AVIF Nedir?
Kısa tanım
AVIF (AV1 Image File Format), Alliance for Open Media'nın geliştirdiği AV1 video kodeğinin tek kare sıkıştırmasını HEIF kapsayıcısıyla birleştiren bir görsel formatıdır. Kayıplı ve kayıpsız sıkıştırma, şeffaflık, animasyon, HDR ve geniş renk gamını destekler. Fotoğraflarda benzer görsel kalitede çoğu zaman JPEG'den ve WebP'den küçük dosya üretir; buna karşılık kodlaması yavaştır ve kademeli (progressive) görüntülemeyi desteklemez.
Diğer adları: AV1 Image File Format, .avif, image/avif
Bir video kodeğinden doğan görsel formatı
AVIF, telifsiz olarak tasarlanan AV1 video kodeğinin bir video karesini sıkıştırmak için kullandığı teknikleri tek bir görsele uygular ve sonucu HEIF (ISO temel medya dosya biçimi tabanlı) kapsayıcısına koyar. Apple cihazlarının fotoğraflarda kullandığı HEIC de aynı kapsayıcıyı kullanır, ancak HEVC kodeğine dayanır; AVIF bu yapıyı lisans yükü taşımayan AV1 ile kurar.
Formatın teknik kapsamı JPEG'den çok daha geniştir: kanal başına 8, 10 veya 12 bit renk derinliği, HDR ve geniş renk gamı, alfa kanalı, kayıpsız mod ve çok kareli (animasyonlu) görseller. AV1'in blok tabanlı tahmin ve filtreleme araçları sayesinde düşük bit oranlarında JPEG'in tipik bloklanması yerine daha yumuşak bir bozulma görülür.
Tarayıcı desteği: geniş ama yakın tarihli
MDN'in uyumluluk verilerine göre AVIF desteği Chrome 85, Firefox 93, Safari 16.1 ve Edge 121 sürümleriyle geldi. Firefox'ta animasyonlu AVIF desteği ise 113 sürümünde eklendi. Güncel tarayıcıların tamamı formatı açabiliyor; ancak bu destek WebP'ye göre birkaç yıl daha yeni olduğu için güncellenmemiş cihazlarda hâlâ karşılaşılabilecek boşluklar var. Bu nedenle AVIF genellikle picture öğesi veya sunucu tarafı içerik anlaşmasıyla, yedek bir formatla birlikte sunulur; bu kalıbın örneği WebP maddesinde yer alıyor.
Nerede kazandırır, nerede düşündürür?
- En büyük kazanç fotoğraflarda: Ürün fotoğrafları, ana sayfa görselleri ve büyük arka planlar, aynı algılanan kalitede belirgin biçimde küçülebilir. Bu, mobil ağlarda LCP öğesinin daha erken çizilmesine doğrudan katkı sağlayabilir.
- Kodlama yavaştır: AVIF üretmek JPEG veya WebP üretmekten kat kat fazla işlemci süresi ister. Görselleri her istekte anlık dönüştürmek yerine yükleme anında ya da derleme sürecinde üretmek, veya bunu bir CDN'in görsel dönüştürme servisine bırakmak gerekir.
- Kademeli görüntüleme yok: Progressive JPEG kaba bir önizlemeyle başlayıp netleşirken, AVIF dosyası tamamen inmeden ekranda bir şey göstermez. Yavaş bağlantıda çok büyük bir AVIF, daha büyük ama kademeli bir JPEG'den daha geç “görünüyormuş” gibi algılanabilir.
- İnce doku kaybı: Kalite düşürüldükçe AVIF ayrıntıyı bloklamak yerine yumuşatır. Kumaş, saç, cilt gibi dokular “plastik” görünebilir; bu yüzden kalite ayarını görerek seçmek önemlidir.
- Küçük görsellerde kazanç sınırlı: İkonlar ve küçük küçük resimlerde kapsayıcının sabit ek yükü oransal olarak büyür; vektör grafikler için zaten SVG daha uygundur.
Kalite ayarını seçmek
Kodlayıcıların kalite ölçekleri birbirine karşılık gelmez: AVIF'te 50 kalite, JPEG'de 50 kaliteyle aynı sonucu vermez. Doğru yaklaşım, sitenizi temsil eden birkaç görseli farklı ayarlarla kodlayıp yan yana karşılaştırmak ve kabul edilebilir en düşük ayarı bulmaktır. Node.js'te yaygın olarak kullanılan sharp kütüphanesiyle bir örnek:
import sharp from "sharp";
await sharp("urun.jpg")
.resize({ width: 1200 })
.avif({ quality: 50, effort: 4 })
.toFile("urun-1200.avif");effort değeri arttıkça dosya biraz daha küçülür ama kodlama süresi belirgin biçimde uzar. Bir formata geçmek, görselin doğru boyutta sunulması ihtiyacını ortadan kaldırmaz; her ekran için uygun genişliği seçmek duyarlı görseller konusudur. Format, boyut ve yükleme önceliğinin birlikte ele alındığı genel çerçeve ise görsel optimizasyonu maddesinde anlatılıyor.