İçeriğe atla
Sitemox
Blog
Altyapı1 dk okuma26 Mayıs 2026

WebP mi AVIF mi? Görsel formatlarında 2026 durumu

İki modern formatın sıkıştırma oranı, kodlama maliyeti ve tarayıcı desteği karşılaştırması. Hangi durumda hangisini seçmeli?

WebP mi AVIF mi? Görsel formatlarında 2026 durumu

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:

FormatBoyutJPEG'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ımdakiler loading="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.

#performans#görsel#cdn
WebP mi AVIF mi? Görsel Format Karşılaştırması ve Seçim Rehberi