WebP ve AVIF: Yayında hangi format, tarayıcı uyumluluğu nasıl yönetilir?

Giriş

Web sitenizde görselleri hangi formatta sunacağınız; hem sayfa hızı hem de arama motorlarında görünürlük için kritik. WebP yaygın bir seçenek; AVIF ise çoğu senaryoda daha küçük dosya üretir ancak tüm tarayıcılarda aynı şekilde desteklenmez. Bu yazıda üretim ortamında format seçimi, geri dönüş (fallback) stratejisi, kalite ayarları ve ölçüm adımlarını bir arada ele alıyoruz.

İlgili site içi içerikler: WebP formatı avantajları ve PNG–JPG–WebP karşılaştırması; performans için daha hızlı açılan siteler için görsel ipuçları.

WebP ve AVIF kısa karşılaştırma

• WebP: Geniş tarayıcı desteği; kayıplı ve kayıpsız modlar; çoğu CDN ve CMS ile uyumlu.
• AVIF: Çoğu senaryoda daha iyi sıkıştırma; daha yeni format, eski istemcilerde ek strateji gerekir.

Google’ın görsel formatları ve performans önerileri için web.dev: Doğru görsel formatını seçin kaynağını inceleyebilirsiniz. Teknik referans için MDN: resim dosya türleri faydalıdır. Smashing Magazine’de modern görsel formatları (AVIF, WebP) üzerine derinlemesine bir özet bulunur.

Hangi durumda hangi format?

Senaryo	Pratik öneri
Hero / LCP görseli	Önce boyutu doğru kırpın veya yeniden boyutlandırın; sonra AVIF/WebP + JPEG yedek
Şeffaf PNG (logo, ikon)	WebP veya AVIF kayıpsız deneyin; kenar halkaları kontrol edin
Çok eski tarayıcı kitlesi	WebP öncelikli, AVIF’i CDN ile koşullu sunun veya WebP’de kalın
CMS sadece JPEG üretiyorse	JPEG kalite 75–85 aralığında test; ileride <picture> için varyant ekleyin

Üretimde adım adım strateji

1. Kaynak (master): Yüksek çözünürlük veya düzenlenebilir katmanlar tek yerde; web için türetilmiş varyantları ayrı klasörde saklayın.
2. <picture> sırası: Çoğu ekip için AVIF → WebP → JPEG/PNG mantıklıdır; tarayıcı ilk desteklediğini seçer.
3. Boyut ve kalite: Aynı piksel boyutunda farklı kalite değerleriyle A/B yapın; gözle “banding” ve metin kenarı bozulması kontrol edin.
4. Ölçüm: Core Web Vitals içinde özellikle LCP ve gerçek kullanıcı verisi (field) ile lab testini birlikte izleyin.

picture örneği (özet)

Tarayıcıya format seçimini bırakmak için kaynak sırası önemlidir; img içindeki JPEG/PNG son çare (fallback) olarak kalır. Detaylı İngilizce karşılık için WebP vs AVIF production yazısındaki checklist ile hizalanabilirsiniz.

SEO ve tarama

Arama motorları farklı formatları indeksleyebilir; önemli olan anlamlı dosya adı, açıklayıcı alt metin ve hızlı yükleme birlikte optimize edilmesidir. Google Görseller en iyi uygulamaları görsel arama için özet kurallar sunar. Format değişince URL değişiyorsa CDN önbelleği ve güncelleme sonrası eski görsel konularını göz önünde bulundurun.

Sık yapılan hatalar

• Sadece en küçük dosyayı seçip çözünürlüğü düşük vitrin göndermek (mobilde bulanık LCP).
• Fallback olmadan yalnızca AVIF sunmak (eski cihazlarda boş kutu).
• loading="lazy" kullanımını LCP adayı görsele uygulamak (öncelikli görselde fetchpriority ve eager yükleme düşünün).

Sonuç

AVIF ve WebP birlikte düşünüldüğünde, en küçük dosya ile en geniş uyumluluk arasında <picture> ve gerektiğinde CDN dönüşümleriyle denge kurabilirsiniz. xcropimage.io üzerindeki kırpma, yeniden boyutlandırma ve format dönüştürme araçlarıyla web varyantlarını hızlıca üretebilirsiniz.