AV1 Image File Format (AVIF), açık kaynaklı AV1 video codec'ine dayalı bir kodlamadır. AVIF, WebP'den daha yenidir. Yalnızca 2020'den beri Chrome ve Opera, 2021'de Firefox ve 2022'de Safari'de desteklenir. WebP'de olduğu gibi AVIF, web'deki kafes resimleri için akla gelebilecek her kullanım alanını ele almayı amaçlar: GIF benzeri animasyon, PNG benzeri şeffaflık ve JPEG veya WebP'den daha küçük dosya boyutlarında iyileştirilmiş algı kalitesi.
Şu ana kadar AVIF umut verici. AV1 codec'inin geliştirilmesinden sorumlu olan grup Alliance for Open Media'nın kurucu üyelerinden olan Netflix tarafından geliştirilen test çerçevesi, JPEG veya WebP'ye kıyasla dosya boyutlarında önemli ölçüde küçülme olduğunu gösteriyor. Cloudinary ve Chrome codec ekibi tarafından yapılan ek çalışmalar, bu özelliğin mevcut kodlama standartlarına göre olumlu değerlendirmelere sahip olduğunu göstermiştir.
Araç kullanımı nispeten sınırlı olsa da, Squoosh'un sunduğu kodlamalardan biri olan bu aşamada AVIF ile deneme yapmaya başlayabilirsiniz.
Tarayıcı desteği
Şimdi, AVIF ve WebP bize daha yüksek kaliteli sonuçlar ve çok daha küçük dosya boyutları sunarken neden JPEG üzerinde bu kadar uzun zaman harcadığımızı merak ediyorsanız, bunun nedeni büyük bir fark yaratıyor. GIF, PNG ve JPEG desteği tüm tarayıcılarda garanti edilir ve onlarca yıldır devam etmektedir. Bu eski resim biçimleriyle karşılaştırıldığında, AVIF tamamen yenidir ve modern tarayıcılarda WebP desteği mükemmel olsa da tüm web genelinde verilmemiştir.
Tahmin edebileceğiniz gibi, hem kaliteyi hem de aktarım boyutunu iyileştirmeyi amaçlayan yeni resim biçimlerinin geliştirilmesi için çok fazla zaman ve çaba harcanmıştır. SVG vektörler için olduğundan, WebP, AVIF ve JPEG XL (hiçbir tarayıcıda desteklenmez) gibi biçimler web'deki kafes resimler için birleştirici çözüm olmayı amaçlar. JPEG 2000 gibi diğerleri de (yalnızca Safari'de desteklenir), temel JPEG ile aynı kullanım alanlarının tümüne yanıt vermekle birlikte, sıkıştırma yöntemlerini görsel olarak benzer ancak çok daha küçük bir resim sunacak şekilde iyileştirmek için tasarlanmıştır.
Bu yeni biçimlerin bazıları JPEG adını paylaşsa da kodlamaları, JavaScript'in Java'ya benzemesi kadar temelden farklıdır. Belirli bir kodlamayı desteklemeyen bir tarayıcı, bu resim dosyasını hiçbir şekilde ayrıştıramaz. Sanki, sizden anlamadığınız bir dilde grafik kağıt piksel ızgarasını doldurmanızı istemiştim. Tarayıcı, resim verilerini ister, ayrıştırmaya çalışır, başarısız olursa hiçbir şey oluşturmadan verileri siler. Modern tarayıcıların dışında oluşturulamayan bir resim kaynağı, içeriğimiz ve genel olarak web için büyük bir başarısızlık noktasıdır. Bu da bozuk bir görüntü ve bant genişliğinin boşa harcanarak dünya genelinde çok sayıda kullanıcı için boşa harcanması anlamına gelir. Daha etkili bir web uğruna daha dirençli bir web'den ödün vermemelisiniz.
Tek fikirli arkadaşımız <img>, ne kadar umut verici görünse de yeni resim biçimlerini kullanmayı uzun bir zaman son derece zor hale getirdi. <img> ürününün yalnızca tek bir kaynak dosyayı desteklediğini ve o dosyayı hızlı bir şekilde aktarmak için son derece optimize edilmiş olduğunu unutmayın. Hatta o kadar hızlı bir şekilde, bu isteğe JavaScript aracılığıyla müdahale edemedik. Yakın zamana kadar, tek geçerli seçenek tüm kullanıcılara yeni resim türünü sunmak ve tarayıcı bir hata verdiğinde "eski" biçimlerden birini istemekti. Bu da ilk dosya boşadıktan sonra ikinci bir dosya aktarımına neden oluyordu.
Bu ve dolayısıyla, on yıllardır var olan <img> ürününün değişmesi gerekiyordu. Bir sonraki modül olan Duyarlı Resimler'de, bu sorunları gidermek için HTML spesifikasyonunda kullanıma sunulan özellikleri ve bunları günlük işlerinizde nasıl kullanacağınızı öğreneceksiniz.