AVIF'in ekosistemde nasıl benimsendiğine dair bir güncelleme.
AVIF, yüksek sıkıştırma oranları, verimli performansı ve geniş kullanım alanı nedeniyle web'de hızla popülerlik kazanan yeni bir resim biçimidir. AVIF, Alliance for Open Media tarafından standartlaştırılmış AV1 video codec'ine dayalı açık ve telifsiz bir resim biçimidir. Bu blog yayınında, AVIF'in ekosistemde nasıl benimsendiğine ve geliştiricilerin hareketsiz resimler ve animasyonlar için AVIF'den ne tür performans ve kalite avantajları elde edebileceğine genel bir bakış sunulmaktadır.
AVIF ekosisteminde neler değişti?
Chrome, Firefox ve Safari'de AVIF'in kullanıma sunulmasından bu yana web'de AVIF'in kullanımı giderek artıyor. Günümüzde neredeyse tüm tarayıcılar AVIF'i destekliyor.
Chrome'da AVIF desteğinin kararlı sürüme eklenmesinden bir yıldan kısa bir süre sonra AVIF kullanımı yaklaşık yüzde bire ulaştı.
Akamai, Cloudflare, Cloudinary ve Imgix gibi çeşitli resim CDN'leri şu anda AVIF resimleri yayınlamaktadır. Imgix, AVIF desteğini duyuran bir blog yayınında, JPEG'e kıyasla %60, WebP'ye kıyasla ise %35 dosya boyutu tasarrufu sağladığını bildirdi. Bu dosya boyutu tasarrufları, önemli ölçüde depolama alanı tasarrufu sağlar. Ayrıca sayfaların daha hızlı yüklenmesine yardımcı olarak daha hızlı Largest Contentful Paint (LCP) süreleri elde edilmesini sağlar. LCP, Core Web Vitals'dan biridir ve sayfadaki en büyük içerik bloğunun ne kadar hızlı yüklendiğini gösterir. Resimleri sıkıştırmak için modern codec'leri kullanmak, LCP'yi azaltmanın temel tekniklerinden biridir. Lighthouse, web sitenizi test etmek ve AVIF'in ne kadar tasarruf sağlayacağını görmek için mükemmel bir Chrome geliştirici aracıdır.
WordPress, dünyanın en popüler web sitesi platformudur ve geliştiricilerin resimlerini AVIF'ye dönüştürmek için kullanabileceği birçok eklenti mevcuttur. Örneğin:
Daha pratik geliştiriciler için ImageMagick ve FFmpeg gibi araçlar iyi bir başlangıç noktasıdır.
AVIF kodlama hızı
Resim sıkıştırmayı geniş ölçekte dağıtmak için hızlı kodlama hızı ve yüksek görsel kalite önemlidir. AVIF yazılım kodlama hızı son iki yılda önemli ölçüde iyileşti. Diğer modern sabit resim biçimleriyle karşılaştırıldığında AVIF, benzer görsel kaliteye sahip daha küçük dosyalar oluşturur (aşağıdaki grafiğe bakın, düşük olması daha iyidir) ancak aynı zamanda kodlama işlemi daha hızlıdır.
Aşağıdaki grafikte (daha yüksek değer daha iyidir), AVIF kodlama hızının diğer resim biçimleriyle karşılaştırması gösterilmektedir. WebP gibi önceki nesil codec'ler daha az karmaşık (ancak daha az verimli) sıkıştırma algoritmalarından yararlanır. Çok iş parçacıklı bir kodlama şemasıyla AVIF, yaygın kullanım alanları için benzer performans sağlarken önemli sıkıştırma kazanımları elde eder.
Daha ayrıntılı kodlama hızı ve görsel kalite karşılaştırmalarıyla ilgilenen geliştiriciler için Görüntü Kodlama Karşılaştırmaları sitesi, yeniden üretilebilir karşılaştırma sonuçlarını içerir.
AVIF ve WebP gibi modern resim codec'leri için yazılım uygulamaları x86 ve ARM işlemci mimarileri için optimize edilmiş olsa da çok sayıda resmi büyük ölçekte sıkıştırmak hesaplama açısından pahalı olabilir. Sıkıştırma maliyetlerini azaltmanın bir alternatifi de donanım hızlandırmayı keşfetmektir. Bluedot, AMD'nin Alveo U250 gibi programlanabilir FPGA'larda çalışan donanım hızlandırmalı bir Pulsar-AVIF kodlayıcı geliştirdi. Pulsar-AVIF, yazılım tabanlı avifenc ile karşılaştırıldığında benzer sıkıştırma verimliliği ile 7 ila 23 kat daha hızlıdır.
- Test grubu: Kodak (768x512 boyutunda 24 resim)
- 24 görüntüyü aynı anda kodlama (24 işlem)
- Her yazılım kodlama işlemi 4 iş parçacığı ile yürütülür. (-j 4)
Geliştiriciler, Pulsar-AVIF kodlayıcıyı Azure NP-Series gibi bulut sanal makineleriyle dağıtabilir.
Duyarlı web sayfaları için AVIF özellikleri
AVIF, daha duyarlı web sayfaları yayınlamanıza yardımcı olacak birkaç ilginç özelliğe sahiptir. Bu defa, web'de etkileyici animasyonlar sunmanın açık arayla en verimli yolu olan animasyonlu AVIF'leri inceleyeceğiz.
Animasyonlu AVIF
35 yıllık geçmişe sahip olmasına rağmen animasyonlu GIF, animasyonlu resimler için popüler bir biçim olmaya devam ediyor. Animasyonlu GIF'lerin en büyük dezavantajları, yalnızca 256 rengi desteklemesi ve çok büyük dosya boyutlarına yol açan düşük sıkıştırma oranıyla birlikte pratik kullanım alanları için çözünürlüğü veya kare hızını sınırlamasıdır. Buna karşılık, animasyonlu AVIF kodlaması aslında animasyonlu GIF'ye kıyasla önemli ölçüde dosya boyutu tasarrufu sağlayan AV1 video kodlama şemasıyla aynıdır.
Bir dizi animasyonlu GIF'i hem AVIF hem de JPEG XL olarak kodladığımız basit bir karşılaştırma testi çalıştırdık. Test kümesinde, ortanca dosya boyutu tasarruf yüzdesi orijinal GIF dosyalarıyla karşılaştırıldığında yaklaşık% 86, animasyonlu JPEG XL dosyalarıyla karşılaştırıldığında ise yaklaşık% 73 olmuştur.*
Chrome, Firefox ve Safari, animasyonlu AVIF oynatma işlemlerini destekler.
FFmpeg, animasyonlu AVIF dosyaları oluşturmak için kullanılabilecek araçlardan biridir. Aşağıda, FFmpeg'i kullanarak bir GIF'i AVIF'ye dönüştürmeyle ilgili temel bir örnek verilmiştir:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF, 0 ile 63 arasında bir ölçekte istenen çıkış kalitesidir. Düşük değerler daha iyi kalite ve daha büyük dosya boyutu anlamına gelir. 0, kaybetsiz sıkıştırma özelliğini kullanmaktadır. Küçük animasyonlu AVIF dosyaları için 23 değerinden başlayın.
FFmpeg, AVIF resimlerini kodlamak için varsayılan olarak libaom'u kullanır ancak mevcut olduğunda rav1e veya SVT-AV1'i de kullanabilir. Kodlayıcı seçenekleri ve hız/kalite dengesi için kodlama parametrelerini ayarlama hakkında daha fazla bilgiyi FFmpeg'in AV1 kodlama kılavuzunda bulabilirsiniz.
Orijinal dosyayı yeniden kodlamadan bir AV1 videosunu AVIF olarak yeniden paketlemek de bir kullanım alanıdır. Bu işlem, orijinal AV1 dosyasının kodunu çözmekten/kodlamaktan çok daha ucuzdur ve AV1 videosunun <img> öğesiyle kullanılmasını sağlar. -c:v copy değerini FFmpeg'e ileterek bunu yapabilirsiniz.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Sonuçlar
Web'de AVIF kullanımı, kullanıma sunulmasından bu yana giderek artıyor ve tarayıcılar, resim CDN'leri, WordPress eklentileri ve kodlama araçları tarafından yaygın olarak destekleniyor. Genel olarak AVIF, web'de resim yayınlamak için mükemmel bir seçimdir. AVIF, kodlama ve kod çözme işlemini hızlı bir şekilde gerçekleştirirken web siteniz için tercih ettiğiniz en iyi kaliteyi veya en küçük dosya boyutunu sunar. AVIF, web'de animasyon yayınlamanın en verimli yoludur. Sorularınız, yorumlarınız veya özellik istekleriniz varsa lütfen av1-Tartışma posta listesi, AOM GitHub topluluğu ve AVIF wiki üzerinden bize ulaşın.