AVIF'in ekosistemde nasıl benimsendiğiyle ilgili güncelleme.
AVIF; yüksek sıkıştırma oranları, verimli performansı ve yaygın olarak benimsenmesi 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 görüntü biçimidir. Bu blog yayınında, AVIF'in ekosistemde nasıl kullanıldığına ve geliştiricilerin sabit resimler ile animasyonlar için AVIF'den bekleyebilecekleri performans ve kalite avantajlarına dair genel bir bakış sunulmaktadır.
AVIF ekosistemindeki yenilikler
Chrome, Firefox ve Safari'de AVIF'in kullanıma sunulmasından bu yana, web'de AVIF kullanımı istikrarlı bir şekilde artmaktadır. Günümüzde neredeyse tüm tarayıcılar AVIF'i desteklemektedir.
Chrome'un AVIF desteğini kararlı sürüme ekledikten birkaç yıl sonra yalnızca Chrome'da AVIF kullanımı yaklaşık yüzde bire çıktı.
Akamai, Cloudflare, Cloudinary ve Imgix gibi çeşitli görüntü CDN'leri şu anda AVIF görüntüleri sunmaktadır. AVIF desteğini duyuran bir blog yayınında Imgix, dosya boyutunda JPEG'e kıyasla% 60, WebP'ye kıyasla% 35 oranında tasarruf ettiğini bildirdi. Bu dosya boyutu tasarrufları, önemli miktarda depolama alanı tasarrufu sağlar, ancak aynı zamanda sayfaların daha hızlı yüklenmesine yardımcı olarak Largest Contentful Paint (LCP) sürelerinin daha hızlı olmasını sağlar. LCP, Önemli Web Verileri'nden biridir ve sayfadaki en büyük içerik bloğunun ne kadar hızlı yüklendiğini gösterir. Görüntüleri sıkıştırmak için modern codec'lerin kullanılması, LCP'yi azaltmaya yönelik temel tekniklerden biridir. Lighthouse, web sitenizi test etmek ve AVIF'nin ne kadar tasarruf sağlayacağını görmek için harika bir Chrome geliştirici aracıdır.
WordPress, dünyadaki en popüler web sitesi platformudur. Geliştiricilerin resimlerini AVIF'ye dönüştürmeleri için sunulan çeşitli eklentiler de mevcuttur. Örneğin:
- AutoOptimize
- Medya için dönüştürüldü
- EWWW Resim Optimize Edici
- Optimole
- ShortPixel Resim Optimize Edici
Uygulamalı geliştiriciler için ImageMagick ve FFmpeg gibi araçlar iyi bir başlangıç noktasıdır.
AVIF kodlama hızı
Yüksek kodlama hızı ve yüksek görsel kalite, geniş ölçekte görüntü sıkıştırması için kritik öneme sahiptir. AVIF yazılımının kodlama hızı son iki yıl içinde önemli ölçüde gelişti. Diğer modern sabit resim biçimlerine kıyasla AVIF, benzer görsel kaliteye sahip daha küçük dosyalar üretir (aşağıdaki grafiğe bakın, düşük kalite daha iyidir) ancak kodlama daha hızlıdır.
Aşağıdaki grafikte (yüksekse), AVIF kodlama hızının diğer resim biçimleriyle karşılaştırması gösterilmektedir. WebP gibi önceki nesil codec'ler, daha basit (ancak daha az verimli) sıkıştırma algoritmalarından yararlanır. Çok iş parçacıklı bir kodlama şemasıyla AVIF, önemli miktarda sıkıştırma kazanımları sağlarken yaygın kullanım alanlarında benzer bir performans elde eder.
Daha ayrıntılı kodlama hızı ve görsel kalite karşılaştırmaları ile ilgilenen geliştiriciler için Görüntü Kodlama Karşılaştırmaları sitesinde yeniden oluşturulabilir karşılaştırma sonuçları bulunmaktadır.
AVIF ve WebP gibi modern görüntü codec'lerine yönelik yazılım uygulamaları, x86 ve ARM işlemci mimarileri için optimize edilmiş olsa da çok büyük miktardaki görüntünün geniş ölçekte sıkıştırılması işlem yükü açısından maliyetli olabilir. Sıkıştırma maliyetlerini azaltmanın bir alternatif yolu da donanım hızlandırmayı keşfetmektir. Bluedot, AMD'nin Alveo U250'si gibi programlanabilir FPGA'lar üzerinde çalışan donanım hızlandırmalı bir Pulsar-AVIF kodlayıcı geliştirmiştir. Yazılım tabanlı avifenc ile karşılaştırıldığında, Pulsar-AVIF benzer bir sıkıştırma verimliliğiyle 7 ila 23 kat hız artışı sağlıyor.
- Test seti: Kodak (768x512 boyutunda 24 resim)
- 24 görüntüyü eşzamanlı olarak 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-Series gibi bulut sanal makinelerle dağıtabilir.
Duyarlı web sayfaları için AVIF özellikleri
AVIF, daha duyarlı web sayfaları sunmanıza yardımcı olacak birkaç ilginç özelliğe sahip. Bu kez biraz, web'de etkileyici animasyonlar sunmanın en etkili yolu olan animasyonlu AVIF'leri inceleyeceğiz.
Animasyonlu AVIF
Animasyonlu GIF, 35 yıllık olmasına rağmen animasyonlu resimler için popüler bir biçimdir. Animasyonlu GIF'lerin en büyük dezavantajları, yalnızca 256 renk desteği ve kötü sıkıştırma ile çok büyük dosya boyutlarına yol açması ve pratik kullanım örneklerinde çözünürlüğün veya kare hızının sınırlandırılmasıdır. Buna karşılık, animasyonlu AVIF kodlaması aslında AV1 video kodlama şemasıyla aynıdır. Bu şema, animasyonlu GIF'e kıyasla önemli ölçüde dosya boyutunda tasarruf sağlar.
Bir dizi animasyonlu GIF grubunu hem AVIF hem de JPEG XL olarak kodladığımız basit bir karşılaştırma yaptık. Test grubunda, dosya boyutu tasarruf yüzdesi orijinal GIF dosyalarına kıyasla yaklaşık% 86, animasyonlu JPEG XL dosyalarına kıyasla yaklaşık% 73'tür*.
Chrome, Firefox ve Safari, animasyonlu AVIF oynatmalarını destekler.
FFmpeg, animasyonlu AVIF dosyaları oluşturmak için kullanılabilecek bir araçtır. Aşağıda, bir GIF'i FFmpeg kullanarak AVIF'e dönüştürmeye ilişkin temel bir örnek verilmiştir:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF, 0 ile 63 arası bir ölçekte istenen çıktı 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 mümkün olduğunda rav1e veya SVT-AV1'i de kullanabilir. Kodlayıcı seçenekleri ve hız/kalite dengeleri için kodlama parametrelerini ayarlama hakkında daha fazla bilgiyi FFmpeg'in AV1 kodlama kılavuzunda bulabilirsiniz.
Diğer bir kullanım alanı da bir AV1 videosunu orijinal dosyayı yeniden kodlamadan AVIF olarak yeniden paketlemektir. Bu yöntem, orijinal AV1 dosyasının kodunu çözmekten/kodlamaktan önemli ölçüde daha ucuzdur ve AV1 videonun <img> öğesiyle kullanılabilmesini sağlar. Bunu FFmpeg'e -c:v copy iletebilir.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Sonuçlar
Web'deki AVIF kullanımı, kullanıma sunulduğundan beri istikrarlı bir şekilde artmaktadır ve tarayıcılar, resim CDN'leri, WordPress eklentileri ve kodlama araçları tarafından yaygın olarak desteklenmektedir. Sonuç olarak AVIF, web'de resim sunmak için mükemmel bir seçimdir. AVIF, web siteniz için tercih ettiğiniz hangisi olursa olsun en iyi kaliteyi veya en küçük dosya boyutunu sağlarken hızlı kodlama ve kod çözme özelliğine sahiptir. AVIF, web'de animasyon yayınlamanın en etkili yoludur. Sorularınız, yorumlarınız veya özellik istekleriniz için av1-discuss posta listesi, AOM GitHub topluluğu ve AVIF wiki üzerinden bize ulaşabilirsiniz.