Sıklıkla resimlerden web sitelerindeki şişkinlik hakkında yazıyoruz ve Lighthouse gibi araçlar, resim yüklemenin, yükleme süresinin artması veya daha önemli kaynaklardan bant genişliğinin alınması gibi kullanıcı deneyimi üzerinde olumsuz bir etkisi olduğunda bunu vurguluyor. Bunu düzeltmenin bir yolu, görüntülerin dosya boyutunu azaltmak için modern sıkıştırmayı kullanmaktır ve web geliştiricileri için yeni bir seçenek, AVIF resim formatı. Bu blog yazısı, AVIF için açık kaynak araçlarına yönelik son güncellemelerden bahsediyor, libaom ve libavif kodlama kitaplıklarını tanıtıyor ve AVIF görüntülerini verimli bir şekilde kodlamak için bu kitaplıkların kullanımına yönelik bir eğitim içeriyor.
AVIF, AV1 video codec bileşenine dayalı ve tarafından standartlaştırılmış bir görüntü formatıdır. Açık Medya İttifakı. AVIF, JPEG ve WebP gibi diğer görüntü formatlarına göre önemli sıkıştırma kazanımları sunar. Kesin tasarruf içerik, kodlama ayarları ve kalite hedefine bağlı olsa da, Biz Ve diğerleri JPEG’e kıyasla %50’den fazla tasarruf gördük.
Ayrıca AVIF, aşağıdakiler gibi yeni görüntü özellikleri için codec ve kapsayıcı desteği ekler: Yüksek Dinamik Aralık ve Geniş Renk Gamı, film gren sentezive aşamalı kod çözme.
Ne var ne yok #
AVIF desteği Chrome M85’e geldiğinden beri, açık kaynak ekosistemindeki AVIF desteği birkaç cephede iyileşti.
Libaom #
Libaom Alliance for Open Media bünyesindeki şirketler tarafından sağlanan ve Google’da ve diğer üye şirketlerde birçok prodüksiyon hizmetinde kullanılan açık kaynaklı bir AV1 kodlayıcı ve kod çözücüdür. libaom 2.0.0 sürümüyle (Chrome’un AVIF desteğini eklemesiyle hemen hemen aynı zamanda) ve son 3.1.0 sürümü arasında, kod tabanına eklenen önemli hareketsiz görüntü kodlama optimizasyonları oldu. Bunlar şunları içerir:
- Çoklu iş parçacığı ve döşemeli kodlama için optimizasyonlar.
- Bellek kullanımında 5 kat azalma.
- Aşağıdaki tabloda gösterildiği gibi CPU kullanımında 6,5 kat azalma.
Bu değişiklikler AVIF kodlama maliyetini, özellikle de sitenizdeki en sık yüklenen veya en yüksek önceliğe sahip görüntüleri büyük ölçüde azaltır. Gibi donanım hızlandırmalı kodlama AV1’in yüzdesi sunucularda ve bulut hizmetlerinde daha kullanılabilir hale geldiğinden, AVIF görüntüleri oluşturma maliyeti düşmeye devam edecek.
Libavif #
LibavifAVIF’in referans uygulaması, Chrome’da AVIF görüntülerinin kodunu çözmek için kullanılan açık kaynaklı bir AVIF muxer ve ayrıştırıcıdır. Mevcut sıkıştırılmamış görüntülerinizden AVIF görüntüleri oluşturmak veya mevcut web görüntülerinden (JPEG, PNG, vb.) kod çevrimi yapmak için libaom ile birlikte kullanılabilir.
Libavif kısa süre önce, daha gelişmiş libaom kodlayıcı ayarlarıyla entegrasyon da dahil olmak üzere daha geniş bir kodlayıcı ayarları yelpazesi için destek ekledi. libyuv kullanarak hızlı YUV’den RGB’ye dönüştürme ve önceden çoğaltılmış alfa desteği gibi işleme boru hattındaki optimizasyonlar, kod çözme sürecini daha da hızlandırır. Ve son olarak, libaom 3.1.0’da yeni eklenen all-intra kodlama modu desteği, yukarıda bahsedilen tüm libaom iyileştirmelerini getiriyor.
Not: libheif kullanılan başka bir popüler açık kaynaklı AVIF muxer ve ayrıştırıcıdır. ImageMagick, libvipsve keskin Node.js modülü.
AVIF görüntülerini avifenc ile kodlama #
AVIF ile deneme yapmanın hızlı bir yolu Squoosh.app. Squoosh, libavif’in WebAssembly sürümünü çalıştırır ve komut satırı araçlarıyla aynı özelliklerin çoğunu kullanıma sunar. AVIF’i eski ve yeni diğer formatlarla karşılaştırmanın kolay bir yoludur. ayrıca bir tane var CLI sürümü Düğüm uygulamalarını hedefleyen Squoosh.
Ancak, WebAssembly henüz CPU’ların tüm performans ilkelerine erişemez, bu nedenle libavif’i en hızlı şekilde çalıştırmak istiyorsanız, komut satırı kodlayıcı avifenc’i öneririz.
AVIF görüntülerinin nasıl kodlanacağını anlamak için, aynı kaynak görüntü yukarıdaki örneğimizde kullanılmıştır. Başlamak için ihtiyacınız olacak:
Ayrıca zlib, libpng ve libjpeg için geliştirme paketlerini de yüklemeniz gerekecektir. Debian ve Ubuntu Linux dağıtımları için komutlar şunlardır:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
Komut satırı kodlayıcı avifenc oluşturma #
1. Kodu alın #
Bir libavif yayın etiketine göz atın.
git clone -b v0.9.1
2. Dizini libavif olarak değiştirin #
cd libavif
İnşa etmek için avifenc ve libavif’i yapılandırmanın birçok farklı yolu vardır. Daha fazla bilgiyi şu adreste bulabilirsiniz: libavif. AV1 kodlayıcı ve kod çözücü kitaplığına statik olarak bağlı olacak şekilde avifenc’i oluşturacağız, libaom.
3. libaom’u edinin ve oluşturun #
Libatif dış bağımlılıklar dizinine geçin.
cd ext
Bir sonraki komut libaom kaynak kodunu çekecek ve libaom’u statik olarak oluşturacaktır.
./aom.cmd
Dizini libavif olarak değiştirin.
cd ..
4. Komut satırı kodlama aracı olan avifenc’i oluşturun #
Avifenc için bir derleme dizini oluşturmak iyi bir fikirdir.
mkdir build
Derleme dizinine geçin.
cd build
avifenc için derleme dosyaları oluşturun.
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
avifenc’i oluşturun.
make
Avifenc’i başarıyla kurdunuz!
avifenc komut satırı parametrelerini anlama #
avifenc komut satırı yapısını kullanır:
./avifenc [options] input.file output.avif
Bu eğitimde kullanılan avifenc için temel parametreler şunlardır:
| avifenc | |
|---|---|
| –dk 0 | Renk için minimum niceleyiciyi 0 olarak ayarlayın |
| –maks 63 | Renk için maksimum niceleyiciyi 63’e ayarla |
| –minalfa 0 | Alfa için minimum niceleyiciyi 0 olarak ayarlayın |
| –maxalpha 63 | Alfa için maksimum niceleyiciyi 63’e ayarla |
| -a son kullanım=q | Hız kontrol modunu Sabit Kalite (Q) moduna ayarlayın |
| -a cq seviyesi=Q | Hem renk hem de alfa için niceleme düzeyini Q olarak ayarlayın |
| -a renk:cq-seviyesi=Q | Renk için niceleme düzeyini Q olarak ayarlayın |
| -a alpha:cq-seviyesi=Q | Alfa için niceleme düzeyini Q olarak ayarlayın |
| -a ezgi=ssim | SSIM için ayar yap (varsayılan ayar PSNR için ayar yapmaktır) |
| –işler J | J çalışan iş parçacığı kullan (varsayılan: 1) |
| — hızlı S | Kodlayıcı hızını 0-10 arasında ayarlayın (en yavaş-en hızlı. varsayılan: 6) |
Cq seviyesi seçeneği, renk veya alfa kalitesini kontrol etmek için niceleme seviyesini (0-63) ayarlar.
Varsayılan ayarlarla bir AVIF görüntüsü oluşturun #
Avifenc’in çalışabilmesi için en temel parametreler giriş ve çıkış dosyalarının ayarlanmasıdır.
./avifenc happy_dog.jpg happy_dog.avif
Örneğin niceleme düzeyi 18’de bir görüntüyü kodlamak için aşağıdaki komut satırını öneririz:
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
Avifenc hem kaliteyi hem de hızı etkileyecek bir çok seçeneğe sahiptir. Seçenekleri görmek ve onlar hakkında daha fazla bilgi edinmek istiyorsanız sadece çalıştırın ./avifenc
Artık kendi AVIF resminize sahipsiniz!
Kodlayıcıyı hızlandırma #
Makinenizde kaç tane çekirdeğe sahip olduğunuza bağlı olarak değiştirmek için iyi olabilecek bir parametre, --jobs parametre. Bu parametre, avifenc’in AVIF görüntüleri oluşturmak için kaç iş parçacığı kullanacağını ayarlar. Bunu komut satırında çalıştırmayı deneyin.
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
Bu, avifenc’e AVIF görüntüsünü oluştururken AVIF kodlamasını kabaca 5 kat hızlandıran 8 iş parçacığı kullanmasını söyler.
Çözüm #
libaom, libavif ve diğer açık kaynak araçlarını kullanarak, AVIF kullanarak web siteniz için en iyi görüntü kalitesini ve performansı elde edebilirsiniz. Biçim hala nispeten yenidir ve optimizasyonlar ve araç entegrasyonları aktif olarak geliştirilmektedir. Sorularınız, yorumlarınız veya özellik istekleriniz varsa, av1-posta listesini tartışın, AOM GitHub topluluğuVe AVIF wiki’si.