Görsellerdeki web sitelerindeki şişkinlikler hakkında sık sık yazıyoruz ve Lighthouse gibi araçlar, resim yüklemenin kullanıcı deneyimi üzerinde olumsuz bir etkiye sahip olduğu durumları (ör. yükleme süresini artırmak veya bant genişliğini daha önemli kaynaklardan almak) vurguluyor. Bunu düzeltmenin bir yolu, modern sıkıştırma kullanarak resimlerin dosya boyutunu küçültmektir. Web geliştiricileri için yeni bir seçenek de AVIF resim biçimidir. Bu blog yayınında AVIF için açık kaynak araçlarla ilgili son güncellemelerden bahsediliyor, libaom ve libavif kodlama kitaplıkları tanıtılıyor ve bu kitaplıkları kullanarak AVIF görüntülerini verimli bir şekilde kodlamayla ilgili eğitici içerikler yer alıyor.
AVIF, AV1 video codec'ine dayalı ve Alliance for Open Media tarafından standartlaştırılmış bir resim biçimidir. AVIF, JPEG ve WebP gibi diğer resim biçimlerine kıyasla önemli ölçüde sıkıştırma kazançları sunar. Kesin tasarruflar içeriğe, kodlama ayarlarına ve kalite hedefine bağlı olsa da biz ve diğerleri JPEG'e kıyasla% 50'den fazla tasarruf sağladı.
Ayrıca AVIF; Yüksek Dinamik Aralık ve Geniş Renk Gamutu, film greni sentezi ve progresif kod çözme gibi yeni görüntü özellikleri için codec ve kapsayıcı desteği sunar.
Yenilikler
Chrome M85'te AVIF desteği kullanıma sunulduğundan beri açık kaynak ekosistemdeki AVIF desteği birçok açıdan iyileştirilmiştir.
Libaom
Libaom, Alliance for Open Media'daki şirketler tarafından yönetilen ve Google ile diğer üye şirketlerdeki birçok üretim 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 eklediği zaman) ile en son 3.1.0 sürümü arasında, kod tabanına önemli ölçüde resim kodlama optimizasyonları eklenmiştir. Bunlardan bazıları:
- Çoklu iş parçacığı işleme ve parçalı kodlama için optimizasyonlar.
- Bellek kullanımında 5 kat azalma.
- Aşağıdaki grafikte gösterildiği gibi CPU kullanımında 6, 5 kat azalma.
Bu değişiklikler, özellikle de sitenizdeki en sık yüklenen veya en yüksek öncelikli resimler olmak üzere AVIF kodlama maliyetini önemli ölçüde azaltır. AV1'in donanım hızlandırmalı kodlaması sunucularda ve bulut hizmetlerinde daha fazla kullanılabilir hale geldikçe AVIF görüntüsü oluşturma maliyeti düşmeye devam edecektir.
Livav
AVIF'nin referans uygulaması olan Libavif, 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. Ayrıca, sıkıştırılmamış mevcut resimlerinizden AVIF görüntüleri oluşturmak veya mevcut web resimlerinden (JPEG, PNG vb.) kod dönüştürme işlemi için libaom ile birlikte kullanılabilir.
Libavif kısa süre önce, daha gelişmiş libaom kodlayıcı ayarlarıyla entegrasyon dahil, daha geniş bir kodlayıcı ayarı yelpazesi için destek ekledi. Libyuv kullanarak işleme ardışık düzenindeki hızlı YUV'den RGB'ye dönüştürme ve önceden çarpılmış alfa desteği gibi optimizasyonlar kod çözme sürecini daha da hızlandırır. Son olarak, libaom 3.1.0'a yeni eklenen all-intra kodlama modu desteği, yukarıda bahsedilen tüm libaom iyileştirmelerini getirir.
AVIF görüntülerini avifenc ile kodlama
Squoosh.app ile AVIF denemesi yapmanın hızlı bir yolu vardır. Squoosh, libavif'in WebAssembly sürümünü çalıştırır ve komut satırı araçlarıyla aynı özelliklerin çoğunu sunar. AVIF'i diğer eski ve yeni biçimlerle kolayca karşılaştırmanızı sağlar. Ayrıca Squoosh'un Düğüm uygulamalarına yönelik bir KSA sürümü de vardır.
Ancak WebAssembly'nin henüz CPU'ların tüm temel performans öğelerine erişimi yoktur. Bu nedenle libavif'i en hızlı şekilde çalıştırmak istiyorsanız avifenc komut satırı kodlayıcısını öneririz.
AVIF görüntülerinin nasıl kodlanacağını anlamak için yukarıdaki örnekte kullanılan aynı kaynak resmi kullanan bir eğitici sunacağız. Başlamak için şunlara ihtiyacınız vardır:
Ayrıca zlib, libpng, ve libjpeg için geliştirme paketlerini yüklemeniz gerekir. 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
Libavif'in yayın etiketine göz atın.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. Dizini libavif olarak değiştirin
cd libavif
Derleme için avifenc ve libavif'i yapılandırmanın birçok farklı yolu vardır. libavif adresinde daha fazla bilgi bulabilirsiniz. Avifenc'i, AV1 kodlayıcı ve kod çözücü kitaplığı olan libaom'a statik olarak bağlı olacak şekilde derleyeceğiz.
3. Libaom alın ve derleyin
Libavif harici bağımlılıklar dizinine geçin.
cd ext
Bir sonraki komut, libaom kaynak kodunu çeker ve libaom'u statik olarak oluşturur.
./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ını oluşturun.
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
Avifenc geliştirin.
make
Avfenc'i başarıyla inşa ettiniz!
Avifenc komut satırı parametrelerini anlama
avifenc, şu komut satırı yapısını kullanır:
./avifenc [options] input.file output.avif
Bu eğiticide kullanılan avifenc için temel parametreler şunlardır:
| Avifenc | |
|---|---|
| --min. 0 | Renk için minimum miktar belirleyiciyi 0'a ayarla |
| --maks. 63 | Renk için maksimum miktar belirleyiciyi 63 olarak ayarla |
| --minalpha 0 | Alfa için minimum miktar belirleyiciyi 0'a ayarla |
| --maxalpha 63 | Alfa için maksimum miktar belirleyiciyi 63'e ayarla |
| -a end-usage=q | Oran kontrol modunu Sabit Kalite (Q) moduna ayarla |
| -a cq-level=Q | Hem renk hem de alfa için nicelik seviyesini Q olarak ayarla |
| -a color:cq-level=Q | Renk için nicelik düzeyini Q olarak ayarla |
| -a alpha:cq-level=Q | Alfa için nicelik seviyesini Q olarak ayarla |
| -bir ayar=ssim | SSIM için ayarla (varsayılan ayar PSNR'ye göre yapılır) |
| --iş fırsatları J | J çalışan iş parçacıklarını kullan (varsayılan: 1) |
| --speed S | Kodlayıcı hızını 0-10 arasında ayarlayın (en yavaş-en hızlı. varsayılan: 6) |
cq düzeyi seçeneği, renk veya alfa kalitesini kontrol etmek için nicelik düzeyi (0-63) ayarlar.
Varsayılan ayarlarla AVIF görüntüsü oluşturma
Avifenc'in çalışması için en temel parametreler, giriş ve çıkış dosyalarının ayarlanmasıdır.
./avifenc happy_dog.jpg happy_dog.avif
Bir resmi kodlamak için, örneğin 18. düzeyde:
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
Avifenc'te hem kaliteyi hem de hızı etkileyen birçok seçenek var.
Seçenekleri görmek ve bunlar hakkında daha fazla bilgi edinmek için ./avifenc uygulamasını çalıştırmanız yeterlidir.
Artık size ait bir AVIF resmi var!
Kodlayıcıyı hızlandırma
Makinenizde kaç tane çekirdeğin bulunduğuna bağlı olarak değiştirilmesi iyi olabilecek parametrelerden biri --jobs parametresidir.
Bu parametre, avifenc'in AVIF görüntüleri oluşturmak için kaç iş parçacığı kullanacağını belirler.
Bu komutu 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 işlem, avifenc'e AVIF görüntüsünü oluştururken 8 iş parçacığı kullanmasını bildirir. Bu işlem, AVIF kodlamasını yaklaşık 5 kat hızlandırır.
Largest Contentful Paint (LCP) üzerindeki etkiler
Resimler, Largest Contentful Paint (LCP) metriği için yaygın bir adaydır. LCP resimlerin yükleme hızını iyileştirmek için yaygın bir öneri, resmin optimize edildiğinden emin olmaktır. Bir kaynağın aktarım boyutunu küçülterek, resim biçimindeki LCP adaylarıyla çalışırken hedeflenecek dört temel aşamadan biri olan kaynak yükleme süresini iyileştirmiş olursunuz.
Web sitenizin derleme sürecinde görüntü optimizasyonu ardışık düzenleri oluşturmaktan veya resimleri elle optimize etmek için kodlayıcı ikili programlarını manuel olarak kullanmaktan çok daha az çaba gerektirdiği için resimleri optimize ederken resim CDN'si kullanmanız önemle tavsiye edilir. Ancak görüntü CDN'leri bazı projeler için maliyetli olabilir. Bu durumda, avifenc kodlayıcıyla optimizasyon yaparken aşağıdakileri göz önünde bulundurun:
- Kodlayıcının sunduğu seçenekler hakkında bilgi edinin. Yeterli resim kalitesini korurken AVIF'in kullanılabilir kodlama özelliklerinden bazılarını deneyerek ek tasarruflar elde edebilirsiniz.
- AVIF, hem kayıplı hem de kayıpsız kodlama sağlar. Bir resmin içeriğine bağlı olarak, bir kodlama türü diğerinden daha iyi performans gösterebilir. Örneğin, normalde JPEG olarak sunulan fotoğraflar muhtemelen kayıplı kodlamayla en iyi performans gösterirken kayıpsız kodlama, genellikle basit ayrıntılar veya normalde PNG olarak sunulan çizgi sanatı içeren resimler için en iyi seçenektir.
- Imagemin için topluluk destekli bir paketleyici kullanıyorsanız paketleyicinizin AVIF resim varyantlarının çıktısını vermesini sağlamak için imagemin-avif paketini kullanmayı düşünün.
AVIF ile deneyler yaparak, LCP adayının bir resim olduğu durumlarda web sitenizin LCP sürelerinde bir iyileşme görebilirsiniz. LCP'yi optimize etme hakkında daha fazla bilgi için LCP'yi optimize etme rehberini okuyun.
Sonuç
Libaom, libavif ve diğer açık kaynak araçları kullanarak AVIF ile web siteniz için en iyi görüntü kalitesini ve performansını elde edebilirsiniz. Bu biçim hâlâ nispeten yeni ve optimizasyonlar ve araç entegrasyonları da aktif olarak geliştiriliyor. Sorularınız, yorumlarınız ve özellik istekleriniz için av1-discuss posta listesi, AOM GitHub topluluğu ve AVIF wiki üzerinden bize ulaşabilirsiniz.