AVIF mi WebP mi — küçük dosya her zaman doğru dosya değildir

Bir keresinde aynı hero görselini WebP ve AVIF olarak A/B karşılaştırarak utanç verici bir akşam geçirdim; iki tarayıcı sekmesi arasında gidip gelerek gözümün gerçekten görebileceği bir fark yakalamaya çalıştım. AVIF %31 daha küçüktü. İkisini birbirinden ayıramadım. Orada bedava para bulmuş gibi oturdum — sonra 200 görsellik bir klasörde toplu işi çalıştırdım ve pürüzü hatırladım.

AVIF çoğu zaman daha küçük dosyadır. Bu kısım doğru ve bilmeye değer. Ama «daha küçük», tablodaki tek sütundur ve karar aslında öbür sütunlarda yaşar.

AVIF'in kazandığı yer

AVIF, AV1 video codec'i üzerine kuruludur ve WebP'den gerçekten daha yeni, daha kurnaz bir tasarımdır. Fotoğrafik içerikte, eşleşen görsel kalitede tipik olarak WebP'den %15–30 daha küçük iner. Pürüzsüz degradeleri — gökyüzleri, ten, yumuşak gölgeler — eski codec'lerin üzerlerine bulaştırdığı blok blok bozulmalar olmadan işler. WebP'nin desteklemediği HDR ve geniş renk gamutunu destekler. WebP gibi tam bir alfa kanalını korur.

Bahsettiğim o klasörden kabaca sayılar, hepsi bir fark seçemediğim bir kalite ayarında:

Şu son satıra bir daha bakın. Düz, basit grafiklerde AVIF bazen daha büyük çıkar. Kurnazlığı fotoğrafik karmaşıklık için ayarlanmıştır ve iki renkli bir çizimde çiğneyecek bir şey bulamaz. Orada WebP, hatta PNG kazanabilir.

AVIF'in size neye mal olduğu

Boyut kazanımı bedava değil. İki gerçek bedel:

Kodlama süresi. AVIF'i sıkıştırmak çarpıcı biçimde daha yavaştır. Aynı görselde bir AVIF kodlaması, bir WebP'den birkaç kat uzun sürebilir — bazen «anında» ile «dosya başına birkaç saniye bekle» arasındaki fark. Tek bir hero görseli için kimin umurunda. 200'lük bir toplu iş için her saniyeyi hissedersiniz. WebP o kadar hızlı kodlar ki neredeyse bedavadır.

Çözme ve destek. İnsanların gerçekten kullandığı her tarayıcı artık AVIF çözüyor — Chrome 2020'den beri, Firefox az sonra, Safari 2022 sonunda 16. sürümden itibaren. 2026'da bu, gerçek trafiğin büyük çoğunluğunu kapsıyor. Ama «desteklenen» ile «evrensel» aynı kelime değil. WebP'nin arkasında birkaç yıl daha doygunluk var ve düşük donanımlı telefonlarda daha hızlı çözülüyor; oralarda AV1 çözme işlemi gözle görülür pil ve işlemci harcayabiliyor. Bazı e-posta istemcileri ve eski gömülü web görünümleri AVIF'e hâlâ hiç dokunmuyor.

%20 sorusu

Yani asıl karar şuna iner: fazladan gelen ~%20, bu görsel için, bu yerde önemli mi?

Bir açılış sayfasındaki büyük bir hero görseli için — her ziyaretçinin indirdiği o tek ağır varlık — evet. İlk boyanmanızı kilitleyen şeyden 100 KB tıraşlamak, yalnızca bir kez ödediğiniz daha yavaş bir kodlamaya değer. Bildiğim en net AVIF durumu bu.

Bir küçük resim ızgarası, bir blogun satır içi ekran görüntüleri ya da WebP olarak zaten yaklaşık 50 KB'ın altındaki herhangi bir şey için cevap genellikle hayır. Küçük bir sayının yüzde yirmisi, daha da küçük bir sayıdır. Kimsenin beklemediği baytları kurtarmak için kodlama süresini ve bir tutam uyumluluğu takas etmiş olursunuz. Orada WebP daha sakin varsayılandır.

Ne zaman AVIF'le uğraşmam

Bir dosya modern bir tarayıcının dışında herhangi bir yere gidecekse — bir e-posta bülteni, eski bir içerik yönetim sistemi, kontrol etmediğim bir ortağın sistemi — AVIF'e bel bağlamam. WebP kullanırım ya da sıfır risk istiyorsam düz JPG. Görüntülenmeyen en küçük dosya hiçbir işe yaramaz.

Bir de düz grafikleri, logoları ya da çizgi işlerini AVIF'e kodlamam. Codec bunun için değil ve WebP'ye onlarda yeterince kez yenildiğini görüp denemeyi bıraktım.

Gerçekte nasıl karar veriyorum

Dürüst iş akışım: ağır fotoğrafik şeyleri AVIF'e çeviririm, hafif, basit ve geniş dağıtılan şeyleri WebP olarak tutarım. Hepsini yönetecek tek bir biçim yok. Görsel başına seçmek var.

Karşılaştırmayı kendiniz denemek isterseniz, her ikisi de burada tarayıcınızda çalışır — mevcut WebP varlıklarını biraz daha sıkmak için WebP'den AVIF'e ve doğrudan bir ana dosyadan gitmek için PNG'den AVIF'e. Hiçbir yere hiçbir şey yüklenmez; kodlama makinenizde olur, ki bu yüzden AVIF'in yavaşlığını da ilk elden hissedersiniz. Bu bir hata değil. Bu, codec'in daha küçük bir dosya için daha çok çalışması, tam gözünüzün önünde.

Kendi hero görselinizi ikisinden de geçirin. Farkı göremiyorsanız ve AVIF anlamlı ölçüde daha küçükse, cevabınızı bulmuşsunuz. Yalnızca cevabın sonraki 200 dosya için de aynı olduğunu varsaymayın.