صورٌ أثقل من الصفحة كلّها

في معظم المواقع تتجاوز الصورُ نصفَ البايتات. وهي كذلك أقلُّ ما يحتاج إصلاحُه تقنيّةً: لا تغييرَ في الشفرة، والتوفيرُ فوري.

١. قدِّم المقاس الذي تستعمله الصفحة

صورةٌ بعرض ٤٠٠٠ بكسل تُعرَض في عمودٍ عرضه ٦٠٠ بكسل تكلّف الزائرَ الأربعةَ آلاف كاملة. وهذا أكبرُ توفيرٍ منفرد وأشيعُ خطأ.

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 900px) 100vw, 600px"
     width="800" height="450" alt="...">

السمة sizes تقول للمتصفّح كم سيكون عرضُ الصورة، فيختار قبل التخطيط. وبدونها يفترض المتصفّح العرضَ الكامل ويُنزّل الأكبر.

٢. WebP أو AVIF لا JPEG

cwebp -q 80 photo.jpg -o photo.webp

صيغةُ WebP أصغر من JPEG بنحو ٢٥ إلى ٣٥ بالمئة عند الجودة نفسها، وهي مدعومة في كل ما يهمّ. وAVIF أصغر منها وأبطأ في الترميز.

٣. حمّل تحميلًا كسولًا ما تحت الطيّة — لا ما فوقها

<img src="..." loading="lazy" decoding="async">

وأعطِ العرض والارتفاع دائمًا

فبدونهما لا يعرف المتصفّح كم مساحةً يترك، فيقفز كلُّ ما تحت الصورة حين تحطّ. وتلك القفزةُ إزاحةُ تخطيطٍ وهي مقيسة.