Sitenizdeki resimleri sıkıştırmak için AVIF kullanma

Jai Krishnan
Jai Krishnan
Wan-Teh Chang
Wan-Teh Chang

Web sitelerinde resimlerden kaynaklanan şişme hakkında sık sık yazıyor ve Lighthouse gibi araçlar, resim yüklemenin kullanıcı deneyimi üzerinde olumsuz bir etkisi olduğunda (ör. yükleme süresini uzatma veya daha önemli kaynaklardan bant genişliği alma) bunu vurgular. Bu sorunu düzeltmenin bir yolu, resimlerin dosya boyutunu küçültmek için modern sıkıştırma yöntemleri 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çlarındaki son güncellemelerden bahsediliyor, libaom ve libavif kodlama kitaplıkları tanıtılıyor ve AVIF resimlerini verimli bir şekilde kodlamak için bu kitaplıkların kullanımıyla ilgili bir eğitim 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 sıkıştırma kazanımları sunar. Kesin tasarruf miktarı içeriğe, kodlama ayarlarına ve kalite hedefine bağlı olsa da biz ve diğerler, JPEG'e kıyasla% 50'den fazla tasarruf elde ettik.

AVIF kullanılan resim
18.769 bayt boyutunda 1.120x840 AVIF (büyütmek için tıklayın)
JPEG kullanan resim
20.036 bayt boyutunda 1.120x840 JPEG (büyütmek için tıklayın)

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 sunulduktan sonra, açık kaynak ekosisteminde AVIF desteği çeşitli açılardan iyileştirildi.

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 kaynak bir AV1 kodlayıcı ve kod çözücüdür. libaom 2.0.0 sürümü (Chrome'un AVIF desteğini eklediği tarihle yaklaşık olarak aynı zaman) ile en son 3.1.0 sürümü arasında kod tabanına önemli sabit resim kodlama optimizasyonları eklendi. Bunlardan bazıları:

  • Çoklu iş parçacıklı ve karo kodlama için optimizasyonlar.
  • Bellek kullanımı 5 kat azalır.
  • Aşağıdaki grafikte gösterildiği gibi CPU kullanımında 6, 5 kat azalma.
8, 1 MP resimler için speed=6, cq-level=18 kullanılıyor

Bu değişiklikler, özellikle sitenizde en sık yüklenen veya en yüksek önceliğe sahip resimler olmak üzere AVIF kodlama maliyetini büyük ö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'in referans uygulaması olan Libavif, AVIF görsellerinin kodunu çözmek için Chrome'da kullanılan açık kaynak bir AVIF birleştirici ve ayrıştırıcısıdır. Mevcut sıkıştırılmamış resimlerinizden AVIF resimleri oluşturmak veya mevcut web resimlerinden (JPEG, PNG vb.) kod dönüştürme işlemi yapmak için libaom ile de kullanılabilir.

Libavif, daha gelişmiş libaom kodlayıcı ayarlarıyla entegrasyon da dahil olmak üzere daha geniş bir kodlayıcı ayarı yelpazesi için yakın zamanda destek ekledi. libyuv ve önceden çarpım uygulanmış alfa desteği kullanılarak hızlı YUV'den RGB'ye dönüştürme gibi işleme ardışık düzenindeki optimizasyonlar, kod çözme sürecini daha da hızlandırır. Son olarak, libaom 3.1.0'a yeni eklenen tüm iç kodlama modu desteği, yukarıda bahsedilen tüm libaom iyileştirmelerini de beraberinde getiriyor.

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. AVIF'i eski ve yeni diğer biçimlerle karşılaştırmanın kolay bir yoludur. Squoosh'un Node uygulamalarına yönelik bir CLI sürümü de vardır.

Ancak WebAssembly henüz CPU'ların tüm performans temel öğelerine erişemiyor. Bu nedenle, libavif'i en hızlı şekilde çalıştırmak istiyorsanız avifenc komut satırı kodlayıcısını kullanmanızı ö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 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 sürüm 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

avifenc ve libavif'i derlemek için yapılandırmanın birçok farklı yolu vardır. 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ık dizine geçin.

cd ext

Sonraki komut, libaom kaynak kodunu alır ve libaom'u statik olarak derler.

./aom.cmd

Dizini libavif olarak değiştirin.

cd ..

4. Komut satırı kodlama aracı avifenc'i derleme

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'i oluşturun.

make

avifenc başarıyla oluşturuldu.

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:

avifenc
--min 0Renk için minimum kodlayıcıyı 0 olarak ayarlayın
--max 63Renk için maksimum örnekleyiciyi 63 olarak ayarlayın
--minalfa 0Alfa için minimum kesme noktasını 0 olarak ayarlayın
--maxalpha 63Alfa için maksimum miktar belirleyiciyi 63 olarak ayarla
-a end-usage=qBit hızı kontrol modunu Sabit Kalite (Q) moduna ayarlayın
-a cq-level=QHem renk hem de alfa için kesme düzeyini Q olarak ayarlayın
-a color:cq-level=QRenk için miktar belirleme seviyesini Q olarak ayarla
-a alpha:cq-level=QAlfa için kesme düzeyini Q olarak ayarlayın
-a tune=ssimSSIM için ayarlama (varsayılan olarak PSNR için ayarlanır)
--jobs JJ çalışan iş parçacığı kullan (varsayılan: 1)
--speed SKodlayı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 miktar belirleme seviyesini (0-63) ayarlar.

Varsayılan ayarlarla AVIF resmi oluşturma

avifenc'in çalışabilmesi için en temel parametreler, giriş ve çıkış dosyalarını ayarlamaktır.

./avifenc happy_dog.jpg happy_dog.avif

Bir resmi kodlamak için aşağıdaki komut satırını (ör. 18. kesme düzeyinde) 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 kaliteyi hem de hızı etkileyen birçok seçeneğe sahiptir. Seçenekleri görmek ve bunlar hakkında daha fazla bilgi edinmek için ./avifenc

Artık kendi AVIF resminiz var.

Kodlayıcıyı hızlandırma

Makinenizdeki çekirdek sayısına bağlı olarak değiştirmeniz iyi olabilecek bir parametre --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, avifenc'e AVIF resmini oluştururken 8 iş parçacığı kullanmasını söyler. Bu da AVIF kodlamayı 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ı iyileştirmek için yaygın olarak önerilen yöntemlerden biri, resimlerin optimize edildiğinden emin olmaktır. Bir kaynağın aktarım boyutunu azaltarak kaynak yükleme süresini iyileştirirsiniz. Bu süre, resim olan LCP adayları söz konusu olduğunda hedeflenecek dört önemli 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 resim CDN'leri bazı projeler için maliyetli olabilir. 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'in mevcut kodlama özelliklerinden bazılarını deneyerek yeterli görüntü kalitesini korurken ek tasarruflar elde edebilirsiniz.
  • 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 yayınlanan fotoğraflar için kayıplı kodlama en iyi seçenektir. Kayıpsız kodlama ise genellikle PNG olarak yayınlanan basit ayrıntılar veya çizgi resimler içeren resimler için en iyi seçenektir.
  • imagemin için topluluk desteği sunan bir paketleyici kullanıyorsanız paketleyicinizin AVIF resim varyantları yayınlamasını sağlamak üzere imagemin-avif paketini kullanabilirsiniz.

AVIF ile deneysel çalışmalar yaparak, LCP adayının resim olduğu durumlarda web sitenizin LCP sürelerinde iyileştirme elde edebilirsiniz. LCP'yi optimize etme hakkında daha fazla bilgi için LCP'yi optimize etme kılavuzunu okuyun.

Sonuç

libaom, libavif ve diğer açık kaynak araçlarını kullanarak web siteniz için AVIF'i kullanarak en iyi görüntü kalitesini ve performansı 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 varsa av1-discuss posta listesine, AOM GitHub topluluğuna ve AVIF wiki'sine ulaşabilirsiniz.