Web sitelerindeki resimlerdeki şişlikler hakkında sık sık yazıyoruz. Lighthouse gibi araçlar, resim yükleme işleminin kullanıcı deneyimi üzerinde olumsuz etkiye sahip olduğu (yükleme süresini uzatmak veya bant genişliğini daha önemli kaynaklardan uzak tutmak gibi) bu durumu vurguluyor. Bunu düzeltmenin bir yolu, resimlerin dosya boyutunu küçültmek için modern sıkıştırmayı kullanmaktır. 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 yapılan son güncellemelerden bahsediliyor, libaom ve libavif kodlama kitaplıklarını kullanıma sunuyor ve AVIF resimlerini verimli bir şekilde kodlamak için bu kitaplıkların kullanımına dair bir eğitim de yer alıyor.
AVIF, AV1 video codec'ine dayalı olan ve Alliance for Open Media tarafından standartlaştırılan bir resim biçimidir. AVIF, JPEG ve WebP gibi diğer resim biçimlerine kıyasla önemli ölçüde sıkıştırma kazancı sunar. Tam tasarruf; içeriğe, kodlama ayarlarına ve kalite hedefine bağlı olsa da biz ve diğerlerimiz, JPEG'ye kıyasla% 50'den fazla tasarruf sağladı.
AVIF ayrıca Yüksek Dinamik Aralık ve Geniş Renk gamı, 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 ekosisteminde AVIF desteği birçok açıdan iyileştirilmiştir.
Libaom Dili
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. Chrome'un AVIF desteğini eklediği aynı zamanda, libaom 2.0.0 sürümü ile son 3.1.0 sürümü arasında, kod tabanına önemli hareketsiz görüntü kodlama optimizasyonları eklenmiştir. Bunlardan bazıları:
- Çoklu iş parçacığı oluşturma 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 düşüş.
Bu değişiklikler, özellikle sitenizde en sık yüklenen veya en yüksek öncelikli resimler olan AVIF kodlama maliyetini önemli ölçüde azaltır. AV1'in donanım hızlandırmalı kodlaması, sunucularda ve bulut hizmetlerinde daha kullanılabilir hale geldikçe AVIF görüntüleri oluşturma maliyeti de düşmeye devam edecektir.
Libavif
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. Mevcut sıkıştırılmamış resimlerinizden AVIF resimleri oluşturmak veya mevcut web resimlerinden (JPEG, PNG vb.) kod dönüştürmek için libaom ile birlikte de kullanılabilir.
Libavif kısa süre önce daha gelişmiş libaom kodlayıcı ayarlarıyla entegrasyon da dahil olmak üzere daha çeşitli kodlayıcı ayarları için destek ekledi. İşleme ardışık düzeninde, libyuv ile hızlı YUV'den RGB'ye dönüştürme gibi optimizasyonlar ve önceden çarpılmış alfa desteği, 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 sunar.
AVIF resimlerini avifenc ile kodlama
Squoosh.app, AVIF ile deneme yapmanın hızlı bir yoludur. Squoosh, libavif'in WebAssembly sürümünü çalıştırır ve komut satırı araçlarıyla aynı özelliklerin çoğunu sunar. Böylece AVIF öğelerini eski ve yeni formatlarla kolayca karşılaştırabilirsiniz. Ayrıca Squoosh'un Düğüm uygulamalarına yönelik bir KSA sürümü de vardır.
Ancak WebAssembly, CPU'ların tüm temel performans öğelerine henüz erişemez. Bu nedenle, libavif'i en hızlı şekilde çalıştırmak istiyorsanız komut satırı kodlayıcısı olan avifenc'i öneririz.
AVIF resimlerinin nasıl kodlanacağını anlamak için yukarıdaki örneğimizde kullanılan kaynak resmin aynısını kullanan bir eğitim göstereceğiz. Başlamak için gerekenler:
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 şu şekildedir:
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ştir
cd libavif
Avfenc ve libavif'i derlemek için birçok farklı şekilde yapılandırabilirsiniz. Daha fazla bilgiyi libavif adresinde bulabilirsiniz. Av1 kodlayıcı ve kod çözücü kitaplığı olan libaom'a statik olarak bağlanacak şekilde avifenc oluşturacağız.
3. libaom'u edinme ve derleme
libavif harici bağımlılıklar dizinine geçin.
cd ext
Sıradaki komut, libaom kaynak kodunu çekip libaom'u statik olarak derler.
./aom.cmd
Dizini libavif olarak değiştirin.
cd ..
4. Komut satırı kodlama aracını geliştirme: avifenc
Avfenc 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 ..
Avfenc'i oluşturun.
make
Avfenc'i başarıyla oluşturdunuz.
Aavifenc komut satırı parametrelerini anlama
avifenc 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:
| Avfenc | |
|---|---|
| --min. 0 | Renk için minimum miktar belirleyiciyi 0 olarak ayarla |
| --maks. 63 | Renk için maksimum miktar belirleyiciyi 63 olarak ayarla |
| --minalfa 0 | Alfa için minimum miktar belirleyiciyi 0'a ayarla |
| --maxalpha 63 | Alfa için maksimum miktar belirleyiciyi 63 olarak ayarla |
| -a end-usage=q | Hız kontrol modunu Sabit Kalite (Q) moduna ayarlayın |
| -a cq-level=Q | Hem renk hem de alfa için miktar belirleme seviyesini Q olarak ayarla |
| -a color:cq-level=Q | Renk için miktar belirleme seviyesini Q olarak ayarla |
| -a alpha:cq-level=Q | Alfa için miktar belirleme seviyesini Q olarak ayarla |
| -a tune=ssim | SSIM için ayarla (varsayılan olarak PSNR için ayar yapılır) |
| --işler J | J çalışanı iş parçacıklarını kullan (varsayılan: 1) |
| --hız S | Kodlayıcı hızını 0-10 arasında ayarlayın (en yavaş hız: varsayılan: 6) |
cq düzeyi seçeneği, renk veya alfa kalitesini kontrol etmek için miktar belirleme seviyesini (0-63) ayarlar.
Varsayılan ayarlarla AVIF görseli oluşturma
Avfenc'in çalıştırabileceği en temel parametreler giriş ve çıkış dosyalarını ayarlamaktır.
./avifenc happy_dog.jpg happy_dog.avif
Bir resmi kodlamak için, miktar 18'de olduğu gibi aşağıdaki komut satırını kullanmanızı ö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 kalite hem de hızı etkileyecek birçok seçenek sunuyor.
Seçenekleri görmek ve seçenekler hakkında daha fazla bilgi edinmek isterseniz ./avifenc komutunu çalıştırmanız yeterlidir.
Artık kendi AVIF görseliniz var.
Kodlayıcıyı hızlandırma
Makinenizdeki çekirdek sayısına bağlı olarak değiştirilebilecek parametrelerden biri --jobs parametresidir.
Bu parametre, avifenc'in AVIF görselleri oluşturmak için kaç iş parçacığı kullanacağını belirler.
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 komut, avifenc'e AVIF görüntüsünü oluştururken 8 iş parçacığı kullanmasını söyler. Bu işlem, AVIF kodlamasını yaklaşık 5 kat hızlandırır.
Largest Contentful Paint (LCP) üzerindeki etkiler
Görseller, Largest Contentful Paint (LCP) metriği için yaygın bir adaydır. LCP resimlerinin yükleme hızını artırmak için yaygın olarak kullanılan bir öneri, resmin optimize edildiğinden emin olmaktır. Bir kaynağın aktarım boyutunu küçülterek kaynak yükleme süresini iyileştirmiş olursunuz. Bu süre, görüntü şeklindeki LCP adaylarıyla çalışırken hedeflenmesi gereken dört temel aşamadan biridir.
Web sitenizin derleme işleminde resim optimizasyonu ardışık düzenleri oluşturmak veya resimleri elle optimize etmek için kodlayıcı ikili programlarını manuel olarak kullanmaktan çok daha az çaba gerektirdiğinden, resimleri optimize ederken resim CDN kullanmanız önemle tavsiye edilir. Ancak görüntü CDN'leri bazı projeler için maliyeti azaltabilir. Bu durum sizin için de geçerliyse 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. AVIF'ın mevcut kodlama özelliklerinden bazılarıyla denemeler yaparak görüntü kalitesini yeterli düzeyde tutarken ek tasarruf sağlayabilirsiniz.
- AVIF hem kayıplı hem de kayıpsız kodlama sağlar. Görselin 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 kayıplı kodlamayla en iyi performansı gösterirken kayıpsız kodlama, normalde PNG biçiminde sunulan basit ayrıntılar veya çizgi sanatı içeren resimler için en iyi sonucu verir.
- imagemin için topluluk desteğine sahip bir paketleyici kullanıyorsanız paketleyicinizin AVIF resim varyantlarının çıkışını vermesini sağlamak üzere imagemin-avif paketini kullanabilirsiniz.
AVIF ile denemeler yaparak, LCP adayının bir resim olduğu durumlarda web sitenizin LCP süreleri için iyileştirme yapabilirsiniz. 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 resim kalitesini ve performansını elde edebilirsiniz. Bu biçim hâlâ nispeten yenidir ve optimizasyonlar ve araç entegrasyonları da aktif bir şekilde geliştirilmektedir. Sorularınız, yorumlarınız veya özellik istekleriniz için av1-Tartışma posta listesi, AOM GitHub topluluğu ve AVIF wiki üzerinden bize ulaşabilirsiniz.