Sitelerin çoğunda resimler baytların yarısından fazlasını tutar. Üstelik düzeltilmesi en az teknik olan şeydir bu: kodda hiçbir değişiklik gerekmez ve kazanç anında görülür.

1. Sayfanın kullandığı ölçüyü sunun

600 piksellik bir sütunda gösterilen 4000 piksellik bir fotoğraf, ziyaretçiye 4000 pikselin tamamına mal olur. Bu, tek başına en büyük kazanç ve en yaygın yanlıştır.

<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, tarayıcıya resmin ne kadar geniş OLACAĞINI söyler; böylece yerleşimden önce seçim yapabilir. O olmadan tarayıcı tam genişliği varsayar ve en büyüğünü indirir.

2. JPEG değil, WebP ya da AVIF

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

WebP, aynı kalitede JPEG'den tipik olarak yüzde 25-35 daha küçüktür ve önemli olan her yerde desteklenir. AVIF ise ondan da küçük, ama kodlanması daha yavaştır.

3. Kıvrımın altındakini tembel yükleyin — üstündekini ASLA

<img src="..." loading="lazy" decoding="async">
Üst görseli asla tembel yüklemeyin. Ziyaretçinin beklediği tam da odur, ve onu tembel yüklemek en büyük çizimi geciktirir — Google'ın ölçtüğü sayıyı yani.

Genişliği ve yüksekliği her zaman verin

Onlar olmadan tarayıcı ne kadar yer bırakacağını bilmez, resim yerine oturduğunda da altındaki her şey zıplar. O zıplama bir yerleşim kaymasıdır ve ölçülür.

Bir sayfanın gerçekte ne indirdiğine bakın: ağ panelini açın, resimlere göre süzün, boyuta göre sıralayın. En büyüğü genellikle bir sürprizdir, ve genellikle kimsenin yeniden boyutlandırmadığı bir fotoğraftır.