تحسين الصور: الصور المتجاوبة وWebP وAVIF وLCP

ابدأ بالصورة التي يراها القارئ فعلًا

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

حدّد عنصر Largest Contentful Paint الفعلي في التتبّع؛ فقد يكون نصًّا لا صورة. وتحسين صورة مصغّرة أسفل الجزء المرئي من الصفحة لن يصلح ورقة أنماط لا علاقة لها تعيق العرض.

اختر الصيغة والجودة لكل ملف على حدة

قارن AVIF وWebP بملفات JPEG أو PNG الحالية بالأحجام التي سيستخدمها الناس فعلًا. افحص الحواف والتدرّجات وألوان البشرة والشفافية والنصوص. فمقدار التوفير يعتمد على المحتوى وإعدادات المرمِّز، والنسبة المئوية العامة ليست هدفًا مفيدًا للجودة.

استخدم SVG للرسوم التوضيحية والأيقونات المناسبة حتى تبقى التسميات والخطوط حادّة، مع الاحتفاظ بنسخة نقطية لمنصّات المشاركة عند الحاجة. ويجب أن تظهر الشروحات الأساسية في HTML أيضًا. ولا تصف صورة مضغوطة مع فقدان بأنها «بلا فقدان» لمجرد حصولها على درجة تشابه إدراكي عالية.

اكتب ترميزًا متجاوبًا يطابق التخطيط

يفترض المثال التالي صورة بعرض كامل داخل عمود محتوى عرضه 48rem، مع هوامش 1rem على الشاشات الصغيرة. عدّل قيمة sizes لتناسب تخطيطك الفعلي. يستخدم المتصفح العروض المرشّحة وحجم المساحة وظروف الجهاز لاختيار المورد.

<picture>
  <source type="image/avif"
    srcset="/media/diagram-480.avif 480w,
            /media/diagram-960.avif 960w,
            /media/diagram-1440.avif 1440w"
    sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem">
  <img src="/media/diagram-960.webp"
    srcset="/media/diagram-480.webp 480w,
            /media/diagram-960.webp 960w,
            /media/diagram-1440.webp 1440w"
    sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem"
    width="1440" height="900"
    loading="eager" fetchpriority="high" decoding="async"
    alt="Public requests pass through a cache before the origin">
</picture>

أما الصورة الداعمة الموجودة خارج الشاشة، فاستخدم معها التحميل الكسول وأولوية الجلب العادية. يحجز العرض والارتفاع نسبة الأبعاد، ويمكن لـ CSS مع ذلك أن يجعل الصورة مرنة. وحافظ على نسبة الأبعاد نفسها في كل النسخ ما لم تكن تستخدم التوجيه الفني عن قصد.

استخدم مسار معالجة الصور في ووردبريس كلما أمكن

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

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

تحقّق من التسليم وسلوك التخزين المؤقت

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

المصادر وقراءات إضافية

• MDN: الصور المتجاوبة
• ووردبريس: wp_get_attachment_image
• Google: تحسين LCP

تابع القراءة

تابع مع تشخيص مؤشرات Core Web Vitals أو قائمة التحقّق الكاملة من الأداء.