تحسين الصور: التنسيقات والأبعاد المتجاوبة والتحميل المؤجل

لماذا يعد تحسين الصورة مهمًا؟

قد تؤخر الصور الكبيرة أو المتأخرة في التحميل ظهور المحتوى الرئيسي وتضعف LCP. ابدأ بالصور التي تطلبها الصفحة فعلًا وقِس أثرها. قد يحسّن خفض البيانات المنقولة التحميل، لكنه لا يضمن ترتيبًا في البحث أو زيادة محددة في التحويلات.

اختيار تنسيق الصورة

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

الصور المتجاوبة: srcset وsizes

اذكر الملفات المرشحة في srcset وصف عرض الصورة في التخطيط بواسطة sizes. يختار المتصفح ملفًا بحسب هذه البيانات وظروف الجهاز. العروض التالية أمثلة يجب مطابقتها مع CSS الفعلي. المثال لصورة خارج العرض الأولي؛ استبدل النص البديل التوضيحي واستخدم نسبة الأبعاد الحقيقية.

<img
	src="example-400w.jpg"
	srcset="example-400w.jpg 400w, example-800w.jpg 800w, example-1200w.jpg 1200w"
	sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
	alt="بحيرة جبلية"
	width="1200"
	height="800"
	loading="lazy"
/>

التحميل المؤجل للصور خارج الشاشة

يسمح loading="lazy" للمتصفح بتأجيل صورة خارج الشاشة حتى تقترب من المنطقة المرئية. قد يبدأ الطلب قبل ظهورها، ويتوقف التوقيت على المتصفح والظروف.

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

مثال لصورة أسفل العرض الأولي. الأبعاد توضيحية؛ استخدم أبعاد الملف الفعلية.

<img src="example.webp" alt="بحيرة جبلية" width="1200" height="800" loading="lazy" />

الأدوات والخدمات للتحسين

نصائح وأمثلة عملية

1. قارن التنسيقات بجودة مقبولة وأضف بديلًا عند الحاجة.
2. طابق srcset وsizes مع التخطيط الفعلي والأجهزة.
3. استخدم loading="lazy" للصور خارج الشاشة، وأبق صورة LCP المحتملة على التحميل المعتاد. لا يحتاج التحميل المؤجل الأصلي عادة إلى Intersection Observer؛ اجعل المنطق المخصص لحاجة محددة.
4. أتمت تغيير الأبعاد والضغط في البناء أو التوزيع، ثم افحص المخرجات.
5. قارن PageSpeed Insights وWeb Vitals ذات الصلة، بما فيها LCP وCLS، قبل التعديل وبعده في ظروف قابلة للمقارنة.

تحقق من النتيجة المنشورة

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

قلّل البايتات غير الضرورية مع الحفاظ على المحتوى والجودة اللازمين للقارئ.

استخدم تدقيق السرعة لدراسة الصفحة، ثم تحقق من تغييرات الصور المحددة في المتصفح. افصل التحسينات المقاسة عن الافتراضات غير المتحققة.