Görselleri hangi biçimde ve hangi boyutta sunmalı

Bir sayfanın toplam ağırlığına baktığında yükü taşıyan şey neredeyse her zaman görseller oluyor: yazı tipleri birkaç yüz kilobayt, betikler birkaç yüz kilobayt, görseller ise rahatlıkla birkaç megabayt tutuyor. Oran çoğu sitede aynı. İyi tarafı da var: burası düzeltmesi en ucuz yer, çünkü kodun tek bir satırına dokunmadan, yalnızca dosyaları değiştirerek çözülüyor.

Boyut, biçimden önce geliyor

En yaygın hata, bir görseli kameradan çıktığı boyutta yüklemek. Dört bin piksel genişliğindeki bir fotoğraf bir kart içinde sekiz yüz piksel gösterildiğinde tarayıcı onu küçültüp çiziyor, indirilen fazlalık hiçbir işe yaramıyor ve ziyaretçi o baytların tamamını yine de ödüyor. Üç bin iki yüz piksel boşa gidiyor.

Kural basit. Sunulan genişlik, görselin gösterildiği en büyük genişliğin iki katını geçmesin; retina ekranlar için iki kat fazlasıyla yeterli oluyor ve üç kata çıkmak gözle görülür hiçbir kazanç vermiyor.

Bu tek düzeltme, henüz biçim değiştirilmeden, çoğu sitede sayfa ağırlığını yarıdan fazla düşürüyor ve hiçbir görsel gözle görülür şekilde bozulmuyor.

Biçim seçimi üç seçenekten ibaret

AVIF. Üçünün en küçük dosyasını üretiyor. Kodlaması yavaş çalışıyor, ama bu bir build zamanı maliyeti olduğu için ziyaretçiye hiç yansımıyor.

WebP. AVIF’ten biraz büyük kalıyor. Karşılığında kodlaması hızlı, desteği daha eski tarayıcılara uzanıyor ve bir yedeğe ihtiyaç duymadan tek başına kullanılabiliyor.

JPEG. Yedek biçim. Fotoğraf için hâlâ makul bir seçenek ve picture ögesi içinde en son sırada duruyor, yani yalnızca diğer ikisi çözülemediğinde indiriliyor.

PNG yalnızca keskin kenarlı grafikler ve şeffaflık isteyen küçük görseller için kalıyor. Bir fotoğrafı PNG olarak sunmak, aynı fotoğrafın JPEG hâline göre dosyayı birkaç kat büyütüyor ve kalite tarafında karşılığında hiçbir şey vermiyor.

Boşluk bırakmayı unutma

Görselin genişlik ve yükseklik değerlerini yazmak, tarayıcının daha dosya inmeden yer ayırmasını sağlıyor. Yazmazsan metin aşağı kayıyor. O kayma Cumulative Layout Shift olarak ölçülüyor.

Bu değerler CSS ile ölçeklenen bir görselde de yazılmalı, çünkü tarayıcı en boy oranını oradan hesaplıyor ve yazdığın piksel değerini görselin gerçek boyutu olarak dayatmıyor. Yalnızca oranı okuyor.

Yükleme sırası

Ekranın üst kısmındaki büyük görsel çoğu sayfada en büyük içerik ögesi oluyor, dolayısıyla Largest Contentful Paint ölçümünü doğrudan o belirliyor. Tek bir dosya, tek bir sayı.

O görsele tembel yükleme koyma. Tembel yükleme ekranın altında kalan görseller için tasarlandı, en üstteki görsele uygulandığında tarayıcı indirmeyi bilerek geciktiriyor ve ölçüm kötüleşiyor. Ayrıntısı web.dev, “Optimize Largest Contentful Paint” sayfasında.

Kalan görsellerin hepsine tembel yükleme uygun, çünkü ziyaretçilerin çoğu sayfanın altını hiç görmüyor ve o dosyalar hiç indirilmemiş oluyor.

Kontrol listesi

Dört soru, bir sayfa başına yaklaşık beş dakika.

En büyük görselin sunulan genişliği kaç piksel, biçimi AVIF ya da WebP mi, genişlik ve yükseklik değerleri yazılı mı? Bir de şunu sor. En üstteki görsel, farkında olmadan tembel yükleme ile mi geliyor?

Dördü de doğruysa görsel tarafında yapılacak iş bitiyor. Sıradaki durak yazı tipleri.