كيفية تحسين الصور للمواقع: التنسيقات، الأحجام، والتسليم

أهمية تحسين صور المواقع

الصور غالبًا ما تكون السبب الرئيسي في بطء الصفحة. عندما تكون أكبر البيانات في الصفحة من صور ضخمة، تنسيقات خاطئة، أو تسليم ضعيف متجاوب، يتأثر كل من تجربة المستخدم وأداء البحث.

لهذا السبب يحتاج تحسين الصور إلى نظام وليس حلول عشوائية. تحتاج إلى خطة واضحة للتنسيقات، الأحجام، التسليم، وسير عمل النشر الذي ينتج هذه الأصول.

أنواع الصور التي تحتاجها عادةً في المواقع

معظم المواقع لا تحتاج أنواع صور أكثر، بل تحتاج أدوار صور مناسبة، بحجم وتسميات صحيحة. فكر في الوظائف، لا في التحميل العشوائي.

التنسيقات: اختر نوع الملف المناسب للعمل

أفضل تنسيق يعتمد على دور الصورة. معظم المواقع تحتاج مزيجًا، وليس تنسيقًا واحدًا فقط.

استخدم WebP كخيار يومي واحتفظ بـ AVIF لمجموعة أصغر من الصور الفوتوغرافية حيث تكون التوفير الأقصى أكثر أهمية.

لمسار WebP الروتيني، اقرأ دليل سير عمل تحويل JPG إلى WebP لضغط انتقائي للصور الرئيسية، استخدم دليل تحويل JPEG إلى AVIF .

تحديد الحجم: الصور المتجاوبة، الأبعاد، واستقرار التخطيط

المواقع البطيئة لا تعاني فقط من مشكلة التنسيق، بل غالبًا ما ترسل صورة كبيرة الحجم لكل حجم شاشة. تحديد الحجم المتجاوب يحل هذه المشكلة.

• أنشئ عدة عرض لتناسب الهواتف، الأجهزة اللوحية، وأجهزة الكمبيوتر المكتبية بالحجم المناسب.
• حدد العرض والارتفاع لحجز المساحة وتقليل تغير التخطيط.
• استخدم نسخًا أصغر للبطاقات والمحتوى المرتبط بدلاً من إعادة استخدام الصورة الرئيسية كاملة في كل مكان.
• احتفظ بالأصل الكبير فقط عندما يتطلب التكبير، التنزيل، أو سلوك صندوق الضوء ذلك فعلاً.

مثال على ترميز التسليم

استخدم إعداد صورة صغير وصريح لصور المحتوى وخصص التحميل المبكر للصورة الرئيسية الحقيقية. هذا النوع من الترميز يسهل فهم سلوك المتصفح ونتائج Lighthouse.

<picture>
  <source
    type="image/avif"
    srcset="/images/articles/hero-640.avif 640w,
            /images/articles/hero-1024.avif 1024w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/articles/hero-640.webp 640w,
            /images/articles/hero-1024.webp 1024w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/articles/hero-1024.jpg"
    alt="Product dashboard preview"
    width="1024"
    height="576"
    loading="lazy"
    decoding="async" />
</picture>

أولويات التسليم: التحميل الكسول، LCP، ومؤشرات الويب الأساسية

بمجرد ضبط التنسيقات والأحجام، يصبح التسليم هو العامل الرئيسي التالي. القاعدة الأساسية: تعامل مع الصورة فوق الطية كأصل ذو أولوية وليس كأمر ثانوي.

السياق: أسماء الملفات، النص البديل، والنص المحيط

تحسين الصور ليس فقط عن حجم البيانات. محركات البحث والمستخدمون يحتاجون أيضًا إلى سياق حول ماهية الصورة ولماذا هي في الصفحة.

• استخدم أسماء ملفات تصف الموضوع بدلاً من أسماء تصدير الكاميرا أو الأسماء المؤقتة.
• اكتب نصاً بديلاً عندما تضيف الصورة معنى، وليس كمكان لتكديس الكلمات المفتاحية.
• حافظ على توافق العناوين، التسميات، والنصوص المجاورة مع محتوى الصورة الفعلي.
• تأكد من أن دور الصورة يدعم موضوع الصفحة بدلاً من أن يكون عشوائيًا.

بيانات التعريف: لماذا تهم صور Open Graph و JSON-LD

قد تبدو الصفحة جيدة في المتصفح لكنها ضعيفة في الاكتشاف إذا تم تجاهل صور البيانات الوصفية، وهذا من أسهل الفجوات التي يمكن إصلاحها.

إذا كنت تبني باستخدام Blazor، فاجمع هذا الدليل مع دليل مكون بيانات التعريف في Blazor حتى تبقى عنوان الصفحة، الوصف، الرابط القانوني، صورة Open Graph، والبيانات المنظمة متزامنة.

سير العمل: عملية منظمة لصور المواقع

1. حدد دور الصورة قبل التصدير: رئيسية، ضمن النص، بطاقة، Open Graph، أو صورة مخطط.
2. اختر التنسيق المناسب للعمل: WebP للعمل الروتيني، AVIF للصور الفوتوغرافية الثقيلة المختارة، SVG للرسوم المتجهة، وPNG فقط عند الحاجة لشفافية بدون فقدان.
3. صدّر الأحجام المناسبة للتخطيط بدلاً من إرسال نسخة أصلية كبيرة الحجم في كل مكان.
4. حدد أولويات التسليم بحيث تتصرف الصورة الرئيسية كأصل ذو أولوية وتبقى الصور الثانوية فعالة.
5. تحقق من صور بيانات التعريف، النص البديل، وأسماء الملفات قبل النشر.

إذا كنت تختار أدوات لهذا سير العمل، دليل أفضل محول صور للويب يغطي قرار استخدام الأدوات المحلية مقابل الأدوات عبر الإنترنت.

قائمة فحص تحسين صور المواقع

الأسئلة المتكررة

الموارد ذات الصلة