AVIF'in ekosistemde nasıl benimsendiğiyle ilgili bir güncelleme.
AVIF, yüksek sıkıştırma oranları, verimli performansı ve geniş çapta benimsenmesi nedeniyle web'de hızla popülerlik kazanan yeni bir resim biçimidir. AVIF, Alliance for Open Media tarafından standartlaştırılan AV1 video codec'ini temel alan açık ve telifsiz bir resim biçimidir. Bu blog yayınında, AVIF'in ekosistemde nasıl kullanıldığına dair genel bir bakış sunulacak ve geliştiricilerin hareketsiz resimler ve animasyonlar için AVIF'ten ne tür performans ve kalite avantajları bekleyebileceği açıklanacaktır.
AVIF ekosistemindeki yenilikler
AVIF'in Chrome, Firefox ve Safari'de kullanıma sunulmasından bu yana web'de AVIF kullanımı istikrarlı bir şekilde artıyor. Günümüzde neredeyse tüm tarayıcılar AVIF'i destekliyor.
Chrome'un kararlı sürümüne AVIF desteği eklenmesinden bir yıl sonra, yalnızca Chrome'da AVIF kullanımı yaklaşık yüzde bir arttı.
Akamai, Cloudflare, Cloudinary ve Imgix gibi çeşitli resim CDN'leri günümüzde AVIF resimleri sunmaktadır. Imgix, AVIF desteğini duyurduğu bir blog yayınında, JPEG'e kıyasla% 60, WebP'ye kıyasla ise% 35 dosya boyutu tasarrufu sağladığını bildirdi. Dosya boyutundaki bu tasarruflar, depolama alanında önemli ölçüde tasarruf sağlar. Ayrıca sayfaların daha hızlı yüklenmesine yardımcı olarak Largest Contentful Paint (LCP) sürelerini kısaltır. LCP, Core Web Vitals'dan biridir ve sayfadaki en büyük içerik blokunun ne kadar hızlı yüklendiğini gösterir. Resimleri sıkıştırmak için modern codec'ler kullanmak, LCP'yi azaltmak için kullanılan temel tekniklerden biridir. Lighthouse, web sitenizi test etmek ve AVIF'in ne kadar tasarruf sağlayacağını görmek için kullanabileceğiniz mükemmel bir Chrome geliştirici aracıdır.
WordPress, dünyadaki en popüler web sitesi platformudur ve geliştiricilerin resimlerini AVIF'e dönüştürmek için kullanabileceği çeşitli eklentiler vardır. Örneğin:
Daha deneyimli geliştiriciler için ImageMagick ve FFmpeg gibi araçlar iyi bir başlangıç noktasıdır.
AVIF kodlama hızı
Hızlı kodlama hızı ve yüksek görsel kalite, resim sıkıştırmayı geniş ölçekte kullanmak için çok önemlidir. AVIF yazılım kodlama hızı son iki yılda önemli ölçüde arttı. Diğer modern hareketsiz resim biçimleriyle karşılaştırıldığında AVIF, benzer görsel kaliteye sahip daha küçük dosyalar üretir (aşağıdaki grafiğe bakın, daha düşük değer daha iyidir) ancak kodlaması da 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 sunarken önemli sıkıştırma avantajları sağlar.
Daha ayrıntılı kodlama hızı ve görsel kalite karşılaştırmalarıyla ilgilenen geliştiriciler, Görüntü Kodlama Karşılaştırmaları sitesinde tekrarlanabilir karşılaştırma sonuçlarını bulabilir.
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 büyük miktarda resmi geniş ölçekte sıkıştırmak, hesaplama açısından maliyetli olabilir. Sıkıştırma maliyetlerini azaltmanın bir alternatifi, donanım hızlandırmayı keşfetmektir. Bluedot, AMD'nin Alveo U250'si 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'e kıyasla benzer sıkıştırma verimliliğiyle 7 ila 23 kat daha hızlıdır.
- Test seti: Kodak (768x512 boyutunda 24 resim)
- 24 resmi aynı anda kodlama (24 işlem)
- Her yazılım kodlama işlemi 4 iş parçacığıyla yürütülür. (-j 4)
Geliştiriciler, Pulsar-AVIF kodlayıcıyı Azure NP Serisi gibi bulut sanal makineleriyle dağıtabilir.
Duyarlı web sayfaları için AVIF özellikleri
AVIF, daha duyarlı web sayfaları sunmaya yardımcı olacak birkaç ilginç özelliğe sahiptir. Bu kez, web'de ilgi çekici animasyonlar sunmanın en etkili yolu olan animasyonlu AVIF'leri inceleyeceğiz.
Animasyonlu AVIF
Hareketli GIF, 35 yıllık bir geçmişe sahip olmasına rağmen hareketli resimler için hâlâ popüler bir biçimdir. Hareketli GIF'lerin en büyük dezavantajları, yalnızca 256 rengi desteklemesi ve sıkıştırma performansının düşük olmasıdır. Bu durum, dosya boyutlarının çok büyük olmasına neden olurken pratik kullanım alanları için çözünürlüğü veya kare hızını da sınırlar. Buna karşılık, animasyonlu AVIF kodlaması aslında AV1 video kodlama şemasıyla aynıdır. Bu şema, hareketli GIF'e kıyasla önemli ölçüde dosya boyutu tasarrufu sağlar.
Bir dizi hareketli GIF'i hem AVIF hem de JPEG XL olarak kodladığımız basit bir karşılaştırma yaptık. Test setinde, ortalama dosya boyutu tasarruf yüzdesi, orijinal GIF dosyalarına kıyasla yaklaşık% 86, animasyonlu JPEG XL dosyalarına kıyasla ise yaklaşık% 73 oldu*.
Chrome, Firefox ve Safari, animasyonlu AVIF oynatmayı destekler.
FFmpeg, animasyonlu AVIF dosyaları oluşturmak için kullanılan bir araçtır. FFmpeg kullanarak GIF'i AVIF'e dönüştürmenin basit bir örneğini aşağıda bulabilirsiniz:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF, 0 ile 63 arasında bir ölçekte istenen çıkış kalitesidir. Daha düşük değerler, daha iyi kalite ve daha büyük dosya boyutu anlamına gelir. 0, kayıpsız sıkıştırma kullanır. Küçük animasyonlu AVIF dosyaları için 23 değeriyle başlayın.
FFmpeg, AVIF görüntülerini 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.
Başka bir kullanım alanı da orijinal dosyayı yeniden kodlamadan bir AV1 videoyu AVIF olarak yeniden paketlemektir. Bu, orijinal AV1 dosyasının kodunu çözmekten/kodlamaktan çok daha ucuzdur ve AV1 videonun <img> öğesiyle kullanılabilmesini sağlar. FFmpeg'e -c:v copy parametresini ileterek bunu yapabilirsiniz.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Sonuçlar
AVIF'in web'de kullanımı, kullanıma sunulduğundan beri istikrarlı bir şekilde artıyor ve tarayıcılar, resim CDN'leri, WordPress eklentileri ve kodlama araçları tarafından yaygın olarak destekleniyor. Sonuç olarak AVIF, web'de resim sunmak için mükemmel bir seçenektir. AVIF, web siteniz için tercih ettiğiniz en iyi kaliteyi veya en küçük dosya boyutunu sağlarken hızlı bir şekilde kodlanır ve kodu çözülür. AVIF, web'de animasyon yayınlamanın en verimli yoludur. Sorularınız, yorumlarınız veya özellik istekleriniz varsa lütfen av1-discuss posta listesi, AOM GitHub topluluğu ve AVIF wiki üzerinden bize ulaşın.