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)

Ayrıca AVIF, Yüksek Dinamik Aralık ve Geniş Renk Gamutu, film tanecik sentezi ve aşamalı kod çözme gibi yeni resim özellikleri için codec ve kapsayıcı desteği ekler.

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ımla hızlandırılmış kodlaması sunucularda ve bulut hizmetlerinde daha yaygın hale geldikçe AVIF resimleri oluşturma maliyeti 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

AVIF'i denemenin hızlı bir yolu Squoosh.app'i kullanmaktı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 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 kodlandığını anlamak için yukarıdaki örneğimizde kullandığımız aynı kaynak resmi kullanan bir eğitim sunacağız. 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. avifenc'i, AV1 kodlayıcı ve kod çözücü kitaplığına (libaom) statik olarak bağlanacak şekilde derleyeceğiz.

3. libaom'u indirip derleme

libavif harici bağımlılık dizine geçin.

cd ext

Sonraki komut, libaom kaynak kodunu alır ve libaom'u statik olarak oluşturur.

./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.

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
--min 0Renk için minimum kodlayıcıyı 0 olarak ayarlayın
--max 63Renk için maksimum örnekleyiciyi 63 olarak ayarlayın
--minalpha 0Alfa için minimum kesme noktasını 0 olarak ayarlayın
--maxalpha 63Alfa için maksimum kesme noktasını 63 olarak ayarlayın
-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 kesme düzeyini Q olarak ayarlayın
-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-level seçeneği, renk veya alfa kalitesini kontrol etmek için kesme düzeyini (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'te hem kaliteyi hem de hızı etkileyen birçok seçenek vardır. 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 verilen önerilerden biri, resmin 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ıyla çalışırken hedeflenecek dört önemli aşamadan biridir.

Web sitenizin derleme sürecinde resim optimizasyon ardışık düzenlerini oluşturmaktan veya resimleri manuel olarak optimize etmek için kodlayıcı ikililerini manuel olarak kullanmaktan çok daha az çaba gerektirdiğinden, resimleri optimize ederken resim CDN'si kullanmanızı önemle tavsiye ederiz. 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. Bir resmin 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. Format hâlâ nispeten yeni olduğundan optimizasyonlar ve araç entegrasyonları aktif olarak 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.