
Sayfa ağırlığının büyük kısmını görseller oluşturuyor, dolayısıyla format seçimi doğrudan LCP değerinizi etkiliyor. Peki artık WebP mi kullanmalı, AVIF'e mi geçmeli?
Kısa cevap
Çoğu site için WebP hâlâ doğru varsayılan. AVIF daha iyi sıkıştırıyor ama kodlama maliyeti ve araç desteği farkı, kazancı her senaryoda haklı çıkarmıyor.
Sıkıştırma karşılaştırması
Tipik bir ürün fotoğrafı üzerinde gözlemlediğimiz aralıklar:
| Format | Boyut | JPEG'e göre |
|---|---|---|
| JPEG (kalite 80) | 142 KB | — |
| WebP (kalite 80) | ~52 KB | %63 küçük |
| AVIF (kalite 60) | ~36 KB | %75 küçük |
AVIF'in avantajı özellikle düşük kalite ayarlarında ve düz renk geçişleri olan görsellerde belirginleşiyor. Fotoğrafik içerikte fark daralıyor.
Kodlama maliyeti
İşin görünmeyen tarafı burası. AVIF kodlaması WebP'ye kıyasla belirgin biçimde daha yavaş ve CPU yoğun. Yükleme anında dönüştürme yapan bir sistemde bu, kullanıcının beklediği süreye yansır.
Çözüm: kritik yol dışında, arka planda kodlayın. Görsel yüklendiğinde önce WebP üretin ve yayına alın; AVIF varyantı arka planda hazırlanıp hazır olduğunda devreye girsin.
Tarayıcı desteği
Her iki format da güncel tarayıcıların tamamında destekleniyor. Farkı yaratan eski cihazlar ve bazı uygulama içi tarayıcılar. <picture> etiketiyle kademeli sunum yapın:
<picture>
<source srcset="foto.avif" type="image/avif">
<source srcset="foto.webp" type="image/webp">
<img src="foto.jpg" alt="..." width="800" height="600">
</picture>Formattan daha önemli üç şey
Deneyimimize göre çoğu sitede format seçiminden çok daha fazla kazanç sağlayan noktalar şunlar:
- Doğru boyut: 400 piksel gösterilen yere 2400 piksellik görsel koymak, hangi format olursa olsun israftır.
- Genişlik ve yükseklik: Belirtilmediğinde düzen kayması (CLS) oluşur.
- Öncelik yönetimi: Hero görseli
fetchpriority="high", alt kısımdakilerloading="lazy".
Pratik öneri
Manuel dönüştürmeyle uğraşmayın. Yükleme anında otomatik dönüştüren bir katman kurun; format kararı altyapı seviyesinde alınsın, içerik ekibi hiç düşünmesin. Sitemox CDN tam olarak bunu yapıyor.


