AVIF mi WebP mi? Hangisi, ne zaman daha küçük

AVIF ve WebP nedir?

WebP, Google'ın 2010'da duyurduğu görsel formatıdır. Kayıplı modu bir resmi, VP8 video kodeğinin tek bir kareyi sıkıştırdığı gibi sıkıştırır; ayrı bir kayıpsız mod olan VP8L, keskin kenarlı ve az renkli grafikler için tasarlanmıştır. İki mod da saydamlık taşıyabilir; animasyonlu WebP, GIF'in yerini tutabilir.

AVIF (AV1 Image File Format), Alliance for Open Media'nın telifsiz video kodeği AV1 ile sıkıştırılmış bir kareyi HEIF kabının içinde saklar. 1.0 spesifikasyonu 2019'da yayımlandı. AV1'in kodlama araçları VP8'inkilerden on yıl yeni olduğu için AVIF fotoğraflarda bayt başına daha çok ayrıntı korur; 10 ve 12 bit renk ile HDR desteği de ekler. Bedeli kodlama süresidir: aynı resmin AVIF'ini üretmek WebP'sini üretmekten belirgin biçimde fazla CPU harcar. Görsel servislerinin her görseli bir kez dönüştürüp sonucu önbelleğe almasının nedeni budur.

Tarayıcı desteği artık belirleyici soru değil. caniuse.com'a göre (30 Eylül 2026 verisi) kullanılan tarayıcıların yaklaşık %97'si WebP, yaklaşık %95'i AVIF gösteriyor. WebP Chrome 32, Firefox 65 ve Safari 14'ten (macOS 11 ve sonrasında) beri; AVIF Chrome 85, Firefox 93, iOS 16'daki Safari, Mac'te Safari 16.4 (durağan görsellerde macOS 13 Ventura ve sonrasında Safari 16.1) ve Edge 121'den beri çalışıyor. Geriye kalan birkaç yüzde, yedek dosyanın neden hâlâ önemli olduğunu açıklıyor; format seçimi sunucuda yapıldığında bu yedeğin size maliyeti yoktur.

Hangisi daha küçük? Görsele bağlı

Karşılaştırmaların çoğu tek bir sayı verir: "WebP %30 daha küçük", "AVIF görsellerinizi yarıya indirir". Bu sayılar fotoğrafların ortalamasıdır. Gerçek bir site ekran görüntüsü, logo ve ikon da sunar ve orada sıralama tersine dönebilir. 5 Ekim 2026'da dört görseli CDN.com.tr'nin arkasındaki görsel optimizer'dan canlı ayarlarıyla geçirdik ve her formatın ürettiği baytları saydık.

Haber fotoğrafı, JPEG, 1920×1080. Özgün 262.025 bayt; optimize JPEG 186.137; WebP 113.860; AVIF 86.936. Ders kitabı örneği: WebP optimize JPEG'den %39 küçük, AVIF de WebP'den %24 daha küçük; özgün dosyanın üçte biri.

Haber fotoğrafı, JPEG, 926×594. Özgün 131.472 bayt; optimize JPEG 93.348; WebP 89.360; AVIF 77.452. Aynı türden, daha küçük ve zaten iyi sıkıştırılmış bir resim: JPEG'e göre WebP yalnızca %4, AVIF %17 kazandırıyor.

Panel ekran görüntüsü, PNG, 1156×775. Özgün 105.078 bayt; optimize PNG (pngquant ve optipng) 40.379; WebP 41.218; AVIF 27.942. Düz renkler ve yazı, paletli PNG'nin en iyi yaptığı iştir: WebP PNG'den 839 bayt büyük çıktı, AVIF ise yine de PNG'den %31 küçüktü.

Favicon, PNG, 16×16. Özgün 701 bayt; optimize PNG 483; WebP 314; AVIF 682. Bu boyutta sonucu dosyanın kabı belirler: AVIF'in 682 baytının 429'u, daha tek bir piksel gelmeden görseli tanımlayan HEIF kutularıdır; WebP'nin sarmalayıcısı ise 46 bayt. AVIF PNG'den %41 büyük çıktı, en küçüğü WebP oldu.

Başka sitelere taşınabilen şey bu desendir. AVIF fotoğraflarda ve ayrıntılı ekran görüntülerinde açık farkla kazanır; WebP güvenli ikinci seçenektir; düz grafiklerde iyi optimize edilmiş bir PNG WebP'yi geçebilir, küçük ikonlarda ise AVIF'in sabit ek yükü daha iyi sıkıştırmasından ağır basar. Kesin baytlar kodlayıcıya ve ayarlarına bağlıdır; bunları bir yasa olarak değil, bir servisin ölçümü olarak okuyun. Her görsel için geçerli bir yüzde yoktur: güvenilir test, görseli kodlayıp baytları karşılaştırmaktır.

Sunucu formatı nasıl seçer?

Her görsel isteği, tarayıcının gösterebildiği formatları sıralayan bir Accept başlığı taşır. Chrome image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8 gönderir; AVIF desteklemeyen bir tarayıcı listeye image/avif yazmaz. Görsel dönüştüren bir sunucu ya da CDN bu listeyi okur ve aynı URL'ye AVIF, WebP ya da özgün dosyayla yanıt verir. Dosya adı değişmez, yani hero.png AVIF olarak gelebilir: ne gönderildiğini uzantı değil Content-Type başlığı söyler.

Artık bir URL'nin birden çok olası yanıtı olduğu için yanıtta Vary: Accept bulunmalıdır. Bu başlık yoldaki her önbelleğe, CDN'den şirket proxy'sine ve tarayıcıya kadar, her Accept değeri için ayrı bir kopya tutmasını söyler. Başlık yoksa paylaşılan bir önbellek, bir ziyaretçiye giden AVIF'i onu gösteremeyen bir sonraki ziyaretçiye verebilir.

Öteki yol seçimi HTML'e taşır. Bir <picture> öğesi type="image/avif" ve type="image/webp" olan <source> dosyalarını listeler, tarayıcı desteklediği ilk türü alır, içteki <img> de yedek olur. Sunucu mantığı ve Vary gerekmez; bedeli her varyantı kendiniz üretip saklamak ve işaretlemeyi güncel tutmaktır. Hangi yolu seçerseniz seçin, tarayıcının gerçekte ne aldığını görmek üç istek sürer.

Tek görsel, üç Accept başlığı: dönenleri karşılaştırın

# AVIF ve WebP kabul eden bir tarayıcı
curl -so /dev/null -w '%{content_type} %{size_download} bayt\n' \
  -H 'Accept: image/avif,image/webp,*/*' https://example.com/hero.png

# yalnızca WebP destekleyen bir tarayıcı
curl -so /dev/null -w '%{content_type} %{size_download} bayt\n' \
  -H 'Accept: image/webp,*/*' https://example.com/hero.png

# belirli bir şey istemeyen bir istemci
curl -so /dev/null -w '%{content_type} %{size_download} bayt\n' \
  -H 'Accept: */*' https://example.com/hero.png

# paylaşılan önbellekleri doğru tutan başlık (HEAD değil, GET)
curl -s -D - -o /dev/null -H 'Accept: image/avif,*/*' \
  https://example.com/hero.png | grep -i '^vary'

Sitenizin ne sunduğunu denetleyin

Aşağıdaki denetleyici bu istekleri bütün bir sayfa için yapar. Sayfanın HTML'ini okur, <img>, srcset, <picture> ve og:image içinden en fazla 20 görsel alır ve her birini iki kez ister: bir kez güncel bir tarayıcı gibi (Accept: image/avif,image/webp,…), bir kez her şeyi kabul eden bir istemci gibi (Accept: */*). Dosya adı ne derse desin gerçek formatı anlamak için her yanıtın ilk baytlarını okur, baytları sayar, Vary başlığını ve önbellek durumunu raporlar. Tek bir görsel adresi de girebilirsiniz.

İstekler Türkiye'deki sunucumuzdan gider; bu yüzden bir CDN bize ziyaretçilerinizden farklı bir konumdan yanıt verebilir. Sayfa yüklendikten sonra JavaScript'in eklediği görseller ve CSS arka planları HTML'de olmadığı için denetlenmez. Tüm sınırlar denetleyicinin kendi sayfasında yazılı.

Sonuçları okumak

AVIF veya WebP. Modern format isteyen tarayıcı bunlardan birini aldı. Yanındaki boyut o tarayıcının indirdiğidir; "Diğer tarayıcılar" sütunu AVIF ya da WebP desteği olmayan her tarayıcının aldığını gösterir. Kazanç satırı yalnızca iki yanıtı da tam okunan ve farklı formatta gelen görselleri toplar: tahmin değil, ölçümdür.

Yalnızca özgün biçim. AVIF ve WebP isteyen tarayıcı bile JPEG, PNG ya da GIF aldı; yani yolda görseli dönüştüren bir şey yok. Bazı görseller AVIF, bazıları yalnızca özgün biçimde geliyorsa ikinci grubun ortak noktasına bakın: başka bir host, hiçbir kuralın kapsamadığı bir yol, dönüştürücünün atladığı bir uzantı.

Her tarayıcıya aynı dosya. İki istek de aynı formatı aldı. Format seçimi yapmayan bir sitenin sonucu budur; herkese zaten .webp dosyası sunan bir sitenin sonucu da: bugünkü her tarayıcı bu dosyaları gösterir, ama AVIF'in ek kazancı kullanılmadan kalır. Karşılaştıracak bir şey olmadığından kazanç gösterilmez.

Vary: Accept olmadan. Yanıt Accept'e göre değişiyor ama bunu söylemiyor ve paylaşılan önbellekler onu saklayabilir. Önce bunu düzeltin: listede ziyaretçiye bozuk görsel gösterebilecek tek sonuç budur.

Hız sınırı veya engel. Bazı siteler otomatik isteklere 429, 403, bir bot kontrolü ya da küçük bir 503 sayfasıyla yanıt verir. Denetleyici bu durumda denetimin geri kalanında o host'a istek göndermeyi bırakır ve kalan görselleri "denetlenmedi" olarak işaretler. Bu, görseller hakkında değil sitenin koruması hakkında bir bilgidir: birkaç dakika sonra yeniden deneyin ya da tek bir görsel adresini doğrudan denetleyin.

Akıllıca bir strateji: önce AVIF, sonra WebP, asla daha büyük değil

Hepsi bir araya gelince çoğu sitenin istediği strateji kısadır. Önce AVIF sunun: fotoğraflarda ve ayrıntılı ekran görüntülerinde açık farkla en küçüğüdür. AVIF desteklemeyen tarayıcılar için ikinci seçenek WebP olsun. Son yedek olarak özgün dosyayı tutun; böylece her tarayıcı gösterebileceği bir görsel alır.

Sonra favicon'umuzun öğrettiği kuralı ekleyin: baytları görsel görsel karşılaştırın ve normalde göndereceğiniz dosyadan büyük bir dönüştürülmüş dosyayı asla göndermeyin. Format bir araçtır; amaç daha az bayttır. Körlemesine dönüştüren bir hat, görsellerinizin bir kısmını ağırlaştırır ve yine de "optimize edildi" diye raporlar.

İki pratik not. Dönüştürmeyi her istekte değil bir kez yapın ve sonucu önbelleğe alın; bir CDN edge'inde ya da build adımında. Pahalı olan AVIF kodlamasıdır. Bir de fotoğraf değil çizim olan logo ve ikonları mümkünse SVG olarak tutun: dönüştürülecek bir şey yoktur ve her ekranda keskin kalırlar.

CDN.com.tr'de AVIF ve WebP

Görsel optimizasyonu paneldeki bir anahtardır; tüm hesap için ya da tek bir yayınlama kuralı için açılır. Açıkken edge, JPEG ve PNG görselleri destekleyen tarayıcılara WebP olarak sunar; görsel servisimiz her görseli bir kez dönüştürür, edge de sonucu önbelleğe alır. Hesap için WebP + AVIF seçeneğini de seçebilirsiniz: o zaman AVIF kabul eden tarayıcılar AVIF, diğer modern tarayıcılar WebP, geri kalanlar da görseli özgün formatında alır; hepsi aynı URL'den, Vary: Accept ile ve her format için ayrı önbellek kopyasıyla.

İşleme aylık kotanıza sayılır; AVIF daha çok CPU harcadığı için WebP'den yüksek bir oranla. Panel oranı anahtarın yanında gösterir. Her görselde hangi tarayıcının hangi formatı ve kaç bayt aldığını görmek için yukarıdaki denetleyiciyi kendi sayfalarınızda çalıştırın.