1. صنّف الصورة قبل تحسينها
أنشئ قائمة جرد للصور حسب القالب. سجّل دور كل صورة، وأكبر وأصغر عرض مرسوم لها، وحالتها فيما يتعلق بنافذة العرض المبدئية، وما إذا كانت الشاشات الصغيرة تحتاج قصًا مختلفًا. هذا يحوّل عمل حجم الملفات إلى قرارات يمكنك اختبارها على الصفحات المهمة.
الصور الفوتوغرافية عادةً تتحمل ضغطًا خاضعًا للمراجعة (lossy). قد تناسب الشعارات، رموز الواجهة، الرسوم الخطية، والرسوم البيانية صيغة SVG أو صورة نقطية تحمي الحواف الحادة. يناسب SVG الرسوم الخطية والرسوم التوضيحية والرسوم البيانية، وليس الصور الفوتوغرافية المفصّلة.
احتفظ بالتفاصيل الأساسية ووفّر نصًا ينقل غرض الصورة.
استخدم نصًا بديلًا فارغًا (alt=""); لا تجعلها المصدر الوحيد لمعلومة مهمة.
سمّ العمل أو الوجهة، لا تصف فقط بكسلات الصورة.
2. احجم وفق فتحة التخطيط، ثم قدّم مرشحين استجابات
وافق الأبعاد الداخلية (intrinsic dimensions) مع فتحة CSS. ملف بمقياس سطح مكتب داخل بطاقة ضيقة يهدر النقل؛ ونقطي صغير ممتد جدًا يصبح طريًا. احسب كثافة بكسل الجهاز (device pixel ratio)، لكن حقق بصريًا بدلًا من افتراض أن كل شاشة تحتاج المرشح الأكبر.
لحالة تركيبة واحدة عند عدة أعرض، استخدم واصفات العرض في `srcset` (`width descriptors`) واستخدم `sizes` لبيان عرض الفتحة الفعلي. بعدها يختار المتصفح المرشح المناسب. استخدم `picture` للتوجيه الفني (art direction): قص الشاشة الصغيرة الذي يحافظ على الموضوع يختلف عن مجرد تصغير صورة سطح المكتب. احتفظ بعنصر `img` احتياطي مع `src` و`alt` داخل `picture`.
نفس التركيبة، أبعاد بكسل مختلفة.
قص أو تركيبة مختلفة عندما يُخفي التوسيع الرسالة.
احتفظ بـ `src` على `img` للعملاء الذين لا يستخدمون سمات الاستجابة.
3. اختر الصيغة والضغط بحسب خصائص الصورة
يمكن أن تقلل WebP وAVIF من نقل الصور النقطية في الحالات المناسبة، لكن الصيغة ليست ضمانًا للجودة. اختبر وجوهًا ممثلة، نسيجًا دقيقًا، تدرجات العلامة، نصًا مدمجًا، وشفافية. يظل JPEG خيارًا شائعًا كنسخة احتياطية للصور الفوتوغرافية؛ ويمكن أن يناسب PNG التفاصيل النقطية بدون خسارة أو الشفافية. تحقّق من دعم AVIF ومدى ملاءمته التشغيلي لجمهورك وبنية التوصيل.
الضغط الخاسر (lossy) يزيل معلومات لتوفير بايتات وعادةً يكون أكثر سماحية على الصور المفصلة من الخطوط الحادة أو النص. الضغط غير الخاسر (lossless) يحافظ على البكسلات المشفرة لكنه قد يوفر أقل. اختر الجودة عبر مراجعة جنبًا إلى جنب عند حجم العرض، وليس عبر افتراض قيمة رقمية منسوخة. أزل البيانات الوصفية (metadata) فقط بعد التأكد من اتجاه الصورة (orientation)، والألوان، واحتياجات سير العمل.
قارن AVIF وWebP الخاسرين وJPEG كنسخة احتياطية عند حجم العرض.
فضّل SVG المناسب أو احمِ الحواف النقطية الحادة من خلال الاختبار.
تحقّق من مظهر القناة الشفافة (alpha) في كل صيغة مُسلمة ونسخة احتياطية.
4. اجعل الوسم يحمي السرعة وثبات التخطيط
أعطِ كل `img` محتوى سمات `width` و`height` تطابق نسبة الطول إلى العرض الداخلية (intrinsic aspect ratio). يستطيع المتصفح حجز المساحة قبل وصول الملف، ما يقلّل حركة التخطيط. لا يزال بإمكان CSS ضبط الأبعاد المعروضة.
استخدم `loading=lazy` فقط خارج نافذة العرض المبدئية. لا تقم بتأجيل تحميل صورة من المحتمل أن تكون مرئية عند التحميل، خصوصًا مرشح LCP. LCP هو وقت عرض أكبر عنصر مرئي من صور، كتل نصية، أو فيديو في نافذة العرض. `fetchpriority=high` هو تلميح نسبي فقط؛ طبّقه باعتدال وقِس النتيجة. استخدم وسم HTML للصور للمحتوى الذي يحتاج نصًا بديلاً أو اكتشافًا؛ توثّق Google أنها لا تفهرس الصور المطبقة عبر CSS.
عيّن `width` و`height`، بما في ذلك على صور المعرض التي تُحمّل مؤخرًا.
ابقَ بالصور المتوقعة كـ LCP حماسيًّة (eager) وتحقق من أولوية الطلب.
حمّل بالكسل الصور خارج الشاشة واختبر التمرير بشبكة مقيدة.
5. حافظ على المعنى والاكتشاف والجودة البصرية
يعتمد النص البديل (alt) على الغرض والسياق. صف المعلومات الأساسية للصورة المعلوماتية، استخدم `alt=""` للزخرفة، وسمّ وظيفة صورة مرتبطة أو على زر. للرسوم البيانية أو المخططات المعقدة، قدّم شرحًا مكافئًا في نص قريب. لا تستخدم قوائم مفاتيح (keyword lists).
بالنسبة لصور المحتوى القابلة للاكتشاف، استخدم عناصر HTML القياسية للصور، ونصًا ذا صلة بالقرب، وأسماء ملفات وصفية قصيرة عند الإمكان، ومصدر احتياطي مع وسم استجابي. لا تحوّل الخلفيات الزخرفية إلى محتوى مكرر لمجرد الاكتشاف.
راجع الملفات المضغوطة عند أكبر وأصغر الأحجام المقصودة.
فضّل النص العادي؛ وإلا فوفّر صياغة مكافئة.
ضع الصور المعلوماتية بالقرب من نص الصفحة ذي الصلة.
6. تحقّق من الصفحة، وليس الأصل فقط
اختبر صفحات ممثلة عند نوافذ عرض ضيقة وواصلة. في أدوات مطوري المتصفح، افحص مرشح `srcset` المختار، وحجم النقل، والأبعاد المرسومة، وحركة التخطيط. شبِّك الشبكة بطيئًا لكشف الصور البطل (hero) المتأخرة والمعارض البطيئة. مقارنة التصدير لا تكشف عن قيمة `sizes` غير الدقيقة، أو قص غير متوقع، أو مشكلة تحويل في الإنتاج.
استخدم إشارات المعمل والميدان عند التوفر. يمكن أن يعرّف Lighthouse وPageSpeed Insights الصور ذات الأحجام غير المناسبة؛ يعكس LCP الميداني زيارات حقيقية مع مرور الوقت. قارن نفس القالب، وفئة الجهاز، وإصدار الإصدار، ونافذة القياس. لا تنسب التغيّر في مقياس إلى الصور حين تغيّر وقت الخادم أو السكربتات أو الخطوط أو أطراف ثالثة أيضًا. قم بتصعيد تغييرات القالب المشترك واحتفظ بمسار تراجع حتى يتم التحقق.
تأكد أن الفتحة لا تختار مرشحًا أكبر من المتوقع.
تحقق من القص والحدة واللون والبدائل وثبات التخطيط.
سِم المالك، والإشارة المتوقعة، ومسار الرجوع.