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 görüntü formatıdır. AVIF, Alliance for Open Media tarafından standartlaştırılan AV1 video codec bileşenini temel alan açık, telifsiz bir görüntü formatıdır. Bu blog gönderisi, AVIF’in ekosistemde nasıl benimsendiğine ve geliştiricilerin durağan görüntüler ve animasyonlar için AVIF’ten ne tür performans ve kalite avantajları bekleyebileceğine dair bir genel bakış sağlayacaktır.
AVIF ekosistemindeki yenilikler nelerdir? #
AVIF’in Chrome, Firefox ve Safari’de tanıtılmasından bu yana, AVIF’in web’de kullanımı istikrarlı bir şekilde artıyor; neredeyse tüm tarayıcılar AVIF’i bugün destekleyin.
Yalnızca Chrome’da AVIF kullanımı, Chrome’un kararlı sürümde AVIF desteğini eklemesinden sonra bir yıldan biraz daha uzun bir süre içinde yaklaşık yüzde bire yükseldi.
Bir dizi görüntü CDN’si, örneğin Akamai, bulut parlaması, Bulutlu Ve imgix bugün AVIF görüntüleri sunuyor. İçinde Blog yazısı AVIF desteğini duyuran Imgix, JPEG’e kıyasla dosya boyutunda %60 ve WebP’ye kıyasla %35 oranında tasarruf bildirdi. Bu dosya boyutu tasarrufları, önemli ölçüde depolama tasarrufu sağlar, ancak aynı zamanda sayfaların daha hızlı yüklenmesine yardımcı olarak, daha hızlı En Büyük İçerikli Boyama (LCP) süreleri sağlar. LCP, Önemli Web Verilerinden 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 bileşenlerini kullanmak, LCP’yi azaltmanın temel tekniklerinden biridir. deniz feneri web sitenizi test etmek ve görmek için harika bir Chrome geliştirici aracıdır. AVIF’in ne kadar tasarruf sağlayacağı.
WordPress en popüler web sitesi platformudur ve geliştiricilerin görüntülerini AVIF’e dönüştürmeleri için aşağıdakiler gibi çeşitli eklentiler mevcuttur:
Daha uygulamalı geliştiriciler için, ImageMagick Ve FFmpeg iyi bir başlangıç noktasıdır.
AVIF kodlama hızı #
Hızlı kodlama hızı ve yüksek görsel kalite, görüntü sıkıştırmayı uygun ölçekte devreye almak için kritik öneme sahiptir. AVIF yazılımı kodlama hızı, son iki yılda önemli ölçüde arttı. Diğer modern durağan görüntü formatlarıyla karşılaştırıldığında AVIF, benzer görsel kaliteye sahip daha küçük dosyalar üretir (aşağıdaki grafiğe bakın, ne kadar düşükse o kadar iyidir) ama aynı zamanda kodlamak için daha hızlı.
Aşağıdaki tablo (daha yüksek, daha iyidir), AVIF kodlama hızının diğer görüntü formatlarıyla karşılaştırmasını göstermektedir. WebP gibi önceki nesil codec’ler, daha az karmaşık (ancak aynı zamanda daha az verimli) sıkıştırma algoritmalarından yararlanır. Çok iş parçacıklı bir kodlama şemasıyla AVIF, önemli sıkıştırma kazanımları sağlarken yaygın kullanım durumları için benzer performans 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ı site tekrarlanabilir kıyaslama sonuçları içerir.
AVIF ve WebP gibi modern görüntü codec bileşenlerine yönelik yazılım uygulamaları, x86 ve ARM işlemci mimarileri için optimize edilmiş olsa da, büyük miktarda görüntüyü ölçekte sıkıştırmak hesaplama açısından pahalı olabilir. Sıkıştırma maliyetlerini düşürmenin bir alternatifi, donanım hızlandırmayı keşfetmektir. Mavi Nokta AMD’nin Alveo U250’si gibi programlanabilir FPGA’larda çalışan donanım hızlandırmalı bir Pulsar-AVIF kodlayıcı geliştirdi. Yazılım tabanlı avifenc ile karşılaştırıldığında Pulsar-AVIF, benzer hızlarda 7 ila 23 kat hız artışı sağlar. sıkıştırma verimliliği.
Geliştiriciler, Pulsar-AVIF kodlayıcıyı aşağıdakiler gibi bulut sanal makinelerle devreye alabilir: Azure NP Serisi.
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 harika animasyonlar sunmanın açık ara en etkili yolu olan animasyonlu AVIF’lere biraz dalacağız.
Animasyonlu AVIF #
animasyonlu GIF hala popüler bir biçim 35 yaşında olmasına rağmen hareketli görüntüler için. Animasyonlu GIF’lerin en büyük dezavantajları, yalnızca 256 renk desteği ve çok büyük dosya boyutlarına yol açan zayıf sıkıştırma ve aynı zamanda pratik kullanım durumları için çözünürlüğü veya kare hızını sınırlamasıdır. Buna karşılık, animasyonlu AVIF kodlaması aslında AV1 video kodlama şemasıyla aynıdır ve animasyonlu GIF’e kıyasla önemli dosya boyutu tasarrufu sağlar.
Bir dizi animasyonlu GIF’i hem AVIF hem de JPEG XL olarak kodladığımız basit bir kıyaslama gerçekleştirdik. Test seti boyunca, ortalama dosya boyutu tasarruf yüzdesi, orijinal GIF dosyalarına kıyasla yaklaşık %86 ve animasyonlu JPEG XL dosyalarına kıyasla yaklaşık %73’tür*.
Chrome, Firefox ve Safari’nin tümü animasyonlu AVIF oynatmalarını destekler.
FFmpeg, animasyonlu AVIF dosyaları oluşturmak için kullanılacak bir araçtır, işte FFmpeg kullanarak bir GIF’i AVIF’e dönüştürmenin temel bir örneği:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF ölçeğinde istenen çıktı kalitesidir. 0 ile 63. Daha düşük değerler, daha iyi kalite ve daha büyük dosya boyutu anlamına gelir. 0 kullanır kayıpsız sıkıştırma. değeriyle başlayın 23 küçük animasyonlu AVIF dosyaları için.
FFmpeg, AVIF görüntülerini kodlamak için varsayılan olarak libaom’u kullanır, ancak aynı zamanda rav1e veya SVT-AV1 uygun olunca. Kodlayıcı seçenekleri, hız/kalite dengeleri için kodlama parametrelerinin ayarlanması hakkında daha fazla bilgi şu adreste bulunabilir: FFmpeg’in AV1 kodlama kılavuzu.
Başka bir kullanım durumu, bir AV1 videosunu orijinal dosyayı yeniden kodlamadan AVIF’e yeniden paketlemektir. Bu, orijinal AV1 dosyasının kodunu çözmekten/kodlamaktan önemli ölçüde daha ucuzdur ve AV1 videosunu <img> eleman. Geçen -c:v copy FFmpeg bunu yapabilir.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Sonuçlar #
Web’de AVIF kullanımı lansmanından bu yana istikrarlı bir şekilde artıyor ve tarayıcılar, görüntü CDN’leri, WordPress eklentileri ve kodlama araçları tarafından geniş çapta destekleniyor. Sonuç olarak AVIF, görüntüleri web’de sunmak için mükemmel bir seçimdir; AVIF, web siteniz için hangisini tercih ederseniz edin, en iyi kaliteyi veya en küçük dosya boyutunu sağlarken kodlaması ve kodunu çözmesi hızlıdır. AVIF, web üzerinde animasyon sunmanın en etkili yoludur. Sorularınız, yorumlarınız veya özellik istekleriniz varsa, lütfen av1-posta listesini tartışın, AOM Github topluluğuVe AVIF wiki’si.