صورة بعرض 1920 بكسل في صفحة تُنزَّل كاملة لدى مستخدم الهاتف أيضاً، ثم تُصغَّر على الشاشة إلى 390 بكسل — خمسة أضعاف عرض النطاق وبطء في التحميل بلا فائدة. تتيح srcset للمتصفح اختيار النسخة التي تناسب الشاشة، بشرط أن تكون قد أنتجت تلك النسخ.
لماذا لا تكفي صورة واحدة
مؤشر LCP ضمن Core Web Vitals هو عادةً الصورة الكبيرة في الجزء العلوي من الصفحة. قدّم لهاتف ملفاً بعرض 1920 وحجم 400KB فنادراً ما يبلغ LCP حد 2.5 ثانية؛ أما نسخة بعرض 480 وحجم 40KB على الاتصال نفسه فأسرع بمرتبة كاملة. وإشارة تجربة الصفحة لدى Google تقرأ هذا الرقم مباشرة.
وفي المقابل تبدو صورة بعرض 768 على شاشة مكتب كبيرة ناعمة وغير حادة. ومن هنا الحاجة إلى عدة مقاسات يختار المتصفح بينها.
جدول عملي لنقاط التوقف
تتبع نقاط التوقف عرض الصورة كما تُعرض في الصفحة، لا عرض نافذة العرض. وهذه الحالتان الشائعتان: اللافتات بعرض كامل والصور داخل المقالات:
- صور بعرض كامل (الصورة الرئيسية واللافتات): 480 و768 و1200 و1920. للهاتف واللوحي والحاسوب المحمول والشاشة الكبيرة.
- صور المقالات (عمود المحتوى حتى نحو 800): 400 و800 و1200؛ والمقاس 1200 يخدم الشاشات بكثافة 1.5x–2x.
- الصور المصغرة والبطاقات (تُعرض بنحو 300): 300 و600.
الإكثار من الدرجات ليس أفضل. فكل درجة تصديرٌ إضافي وملف إضافي للتخزين، والمتصفحات تتسامح مع عدم التطابق، لذا فالنقطة المثلى هي درجات تتباعد بمقدار 1.5–2 ضعف. وأربع درجات تغطي أكثر من تسعة من كل عشرة تركيبات للأجهزة.
هل تحتاج إلى نسخ 2x؟
شاشات Retina ومعظم الهواتف تعمل بكثافة 2x–3x؛ والصورة المعروضة بعرض 400 تحتاج إلى 800 بكسل لتبدو حادة عليها. والدرجات الأكبر في الجدول تقوم أصلاً مقام نسخة 2x للدرجات الأصغر — فالمقاس 768 هو 2x لهاتف بعرض 390، والمقاس 1200 هو 2x لعمود بعرض 600.
فلا حاجة إذن إلى مجموعة «@2x» منفصلة. حافظ على تباعد يقارب الضعف بين الدرجات ودع المتصفح يختار الأعلى بحسب الكثافة.
الصيغة: WebP أولاً وJPG احتياطاً
عند الجودة نفسها يكون WebP أصغر من JPG بنسبة 25–35 بالمئة، وتدعمه كل المتصفحات الحديثة. صدّر WebP لكل مقاس واحتفظ بنسخة JPG احتياطية عبر عنصر picture للمتصفحات القديمة؛ وإن لم تعد المتصفحات ما قبل 2020 تهم جمهورك فيكفي WebP وحده.
AVIF أصغر من ذلك، لكن ترميزه في المتصفح أبطأ بكثير، وهذا يضر في الدفعات الكبيرة. ويتناول AVIF مقابل WebP مقابل JPEG المفاضلة بالتفصيل.
تصدير المجموعة كاملة دفعة واحدة
ضع الصور المصدر في المعالجة الدفعية للصور وشغّلها مرة لكل درجة، مع تغيير العرض واللاحقة في كل مرة:
- الحجم: العرض 480، «السماح بالتكبير» معطّل، الإخراج WebP بجودة 80 بالمئة، اللاحقة -480.
- الإعدادات نفسها عند 768 باللاحقة -768؛ ثم 1200؛ ثم 1920.
- للنسخة الاحتياطية JPG، بدّل الإخراج إلى JPG وأبقِ اللواحق وشغّل مجدداً.
كل تشغيل يستغرق ثوانٍ، ويحتوي ملف ZIP أصلاً على hero-480.webp وhero-768.webp وهكذا، جاهزة لمجلد الصور. أبقِ «السماح بالتكبير» معطلاً حتى لا تُمطَّط صورة أصلية بعرض 1000 إلى 1920.
ولمعاينة فارق الحجم بين الدرجات على صورة واحدة، جرّب أداة تغيير حجم الصور على ملف مفرد.
كتابة HTML
لصورة بعرض كامل:
<img src="hero-1200.jpg"
srcset="hero-480.webp 480w, hero-768.webp 768w, hero-1200.webp 1200w, hero-1920.webp 1920w"
sizes="100vw" width="1920" height="1080" alt="...">وفي صور المقالات اضبط sizes على العرض الفعلي، مثلاً sizes="(max-width: 840px) 100vw, 800px". وأدرج دائماً width وheight ليحجز المتصفح المساحة فلا تقفز الصفحة.
وبعد ذلك أضف نصائح التحميل الكسول والضغط في كيف تجعل الصور تُحمَّل أسرع، فيبلغ جزء الصور في درجة الأداء حده الأقصى فعلياً.