Görsel optimizasyonu: WebP, boyutlandırma ve tembel yükleme

Web sayfalarının toplam ağırlığında görseller genellikle ilk sırada yer alır. İyi haber şu: görsel optimizasyonu, sonuç veren en kolay performans çalışmasıdır. Üç başlıkta toplanabilir: format, boyut ve yükleme stratejisi.

Format: hangi durumda ne kullanmalı?

• WebP: Fotoğraflar ve karmaşık görseller için varsayılan tercih. JPEG'e göre benzer kalitede belirgin biçimde küçüktür ve tüm güncel tarayıcılarda desteklenir.
• AVIF: Daha da küçük dosyalar üretir ancak kodlama süresi uzundur. Yoğun görselli sitelerde kademeli olarak devreye alınabilir.
• PNG: Saydamlık gereken arayüz öğeleri ve keskin kenarlı grafikler için. Fotoğraf için kullanılmamalı.
• SVG: Logo, ikon ve çizimler için. Ölçeklenebilir ve genellikle birkaç kilobayttır.

Pratik yaklaşım: yüklenen her görselin WebP varyantını otomatik üretmek ve orijinali yedek olarak tutmak. Böylece hem eski istemciler hem yeni tarayıcılar doğru dosyayı alır.

Boyut: aynı görseli her yere göndermeyin

Bir ürün listesinde 300 piksel genişliğinde gösterilen kartlara 2000 piksellik dosya göndermek, kullanıcının veri paketini ve sayfa hızını boşa harcar. Yükleme sırasında en az iki varyant üretin: büyük (detay sayfası için) ve küçük (liste/kart için).

HTML tarafında srcset ve sizes nitelikleriyle tarayıcıya seçenek sunun. Tarayıcı, ekran genişliği ve piksel yoğunluğuna göre en uygun dosyayı indirir.

Yükleme stratejisi: neyi ne zaman indirmeli?

loading="lazy" özniteliği, ekranın altındaki görsellerin indirilmesini kullanıcı oraya yaklaşana kadar erteler. Ancak sayfanın en üstündeki ana görsele bunu uygularsanız, en büyük içerikli boyama (LCP) metriğini kötüleştirirsiniz. Kural basittir: ilk ekranda görünen görsele tembel yükleme uygulanmaz.

Ana görsele fetchpriority="high" vermek, tarayıcının onu diğer kaynaklardan önce indirmesini sağlar. Ayrıca her görsele width ve height yazmak, yer ayrıldığı için düzen kaymasını (CLS) engeller.

Sunucu tarafında ne yapmalı?

• Görselleri uzun süreli önbellek başlıklarıyla sunun; dosya adında sürüm/özet kullanın.
• Dönüşüm işlemlerini yükleme anında değil, kuyrukta yapın; kullanıcı beklemesin.
• Çok görselli sitelerde bir CDN kullanmayı değerlendirin.
• Orijinal dosyaları saklayın; ileride farklı bir formata geçmek isteyebilirsiniz.

Sık yapılan hatalar

Kaliteyi aşırı düşürmek: WebP'de 75-85 aralığı çoğu fotoğraf için gözle ayırt edilemeyen sonuç verir. Daha aşağısı, özellikle ürün fotoğraflarında satışa zarar verir.

Yalnızca dosya boyutuna bakmak: 40 KB'lık ama 4000 piksel genişliğindeki bir görsel, tarayıcıda yeniden boyutlandırılırken yine de işlemci harcar.

Ekran görüntüsünü PNG bırakmak: Arayüz ekran görüntüleri genellikle PNG olarak alınır ve megabaytlarca yer kaplar. Bunları da WebP'ye dönüştürün.

Ölçülebilir sonuç

Bu üç başlığı uygulayan tipik bir katalog sayfasında toplam ağırlık, görsel kalitesinden ödün vermeden üçte bire kadar inebilir. Değişikliği yaptıktan sonra aynı sayfayı aynı koşullarda yeniden ölçün; kazanımı görmek, ekibin geri kalan optimizasyonlara devam etmesini kolaylaştırır.