AVIF Resimlerini Sunma

1. Giriş

Görseller, bir web sayfasının yüklenmesi için gereken baytların ortalama %60'ından fazlasını oluşturur. AVIF ile resimlerinizi küçültebilir ve web sitenizin daha hızlı yüklenmesini sağlayabilirsiniz.

AVIF nedir?

AVIF, AV1 video bit noktasından türetilen yeni bir resim biçimidir. AVIF, sıkıştırma verimliliği için tasarlanmıştır.

Neden AVIF?

AVIF resimleri, aynı veya daha iyi kalitede olan JPEG, PNG, GIF veya WebP resimlerden çok daha küçüktür.

Öğrenecekleriniz

• Resimlerinizden AVIF görselleri oluşturma
• Web sayfasında AVIF görselleri oluşturma

Gerekenler

• Chrome 85 veya sonraki sürümler
• Metin düzenleyici
• cmake
• git
• ninja
• Bir resim. Burada bir tane sağladım
• FFmpeg

2. Squoosh ile AVIF görselleri oluşturma

Squoosh, resim sıkıştırma özellikli bir web uygulamasıdır. Squoosh ile resimlerinizi kolayca AVIF görselleri olarak sıkıştırabilirsiniz.

1. https://squoosh.app sayfasını açın.
2. Squoosh'un üzerine yerel bir resim bırakın.

3. Sıkıştır açılır kutusundan AVIF'yi seçin.

Ardından Squoosh, resminizi bir AVIF görüntüsüne sıkıştırır. Squoosh tamamlandığında sağ alt köşede AVIF resmiyle ilgili bazı istatistikleri içeren bir indirme düğmesi gösterilir.

Orijinal örnek resim 3.340 kB, sıkıştırılmış resim ise 378 kB'tır. Örnek resim, orijinal resimden neredeyse 10 kat daha küçük olarak sıkıştırıldı.

4. AVIF görüntüsünü indirin

İndir düğmesini tıkladığınızda AVIF görseli yerel sürücünüze kaydedilir.

AVIF resminizi, Chrome'a sürükleyerek görüntüleyebilirsiniz.

Artık kendi AVIF görseliniz var.

3. Komut satırı kodlayıcı avifenc oluşturma

avifenc, PNG ve JPEG resimlerini AVIF görsellerine dönüştürebilen bir komut satırı uygulamasıdır. avifenc, AVIF resimlerinin kodunu çözebilen ve kodlayabilen bir kitaplık olan libavif'i kullanır. AVIF'ye dönüştürmek istediğiniz çok sayıda resminiz varsa komut satırı kodlayıcı avifenc'i kullanmak muhtemelen iyi bir seçim olacaktır.

Chrome, AVIF görsellerini oluşturmak için libavif'i kullanır.

1. Kodu alın.

git clone https://github.com/AOMediaCodec/libavif.git

2. Dizini libavif olarak değiştirin.

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 edinin ve oluşturun.

libavif uzantı 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ı avifenc'i oluşturun.

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 -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

Avfenc'i oluşturun.

make

Avfenc'i başarıyla oluşturdunuz.

4. Avifenc ile AVIF görselleri oluşturma

1. Varsayılan ayarlarla bir AVIF görseli oluşturun.

Avfenc'in çalıştırabileceği en temel parametreler giriş ve çıkış dosyalarını ayarlamaktır.

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

"–min 0 –max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a keskinlik=3 -y 420" önerilen ayarlardır.

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 size ait ikinci bir AVIF görseliniz var.

2. Kodlayıcıyı hızlandırma.

Makinenizde bulunan ç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. Bu komut satırını çalıştırmayı deneyin.

./avifenc happy_dog.jpg example.avif --jobs 8

Bu, avifenc'e AVIF görüntüsünü oluştururken 8 iş parçacığı kullanmasını söyler. Bu işlem, makinemde AVIF kodlamasını 5 kat hızlandırır.

5. Bir web sayfasında AVIF görselleri oluşturun.

Şimdi sıkı çalışmanızı dünyaya gösterelim.

1. AVIF resminizi yayınlamak için bir web sayfası oluşturun.

avif_example.html adlı bir dosya oluşturun.

Metin düzenleyicinizde avif_example.html uygulamasını açın ve şu kodu yazın:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

Kaynak dosyanızı (benim senaryomda happy_dog.jpg) ve AVIF dosyanızı (eaxmple.avif) avif_example.html ile aynı dizine kopyalayın.

Tarayıcı AVIF'yi destekliyorsa AVIF resmini oluşturmak için öğesini kullanırız. Tarayıcı desteklemiyorsa ise JPEG dosyası kullanılır. hakkında daha fazla bilgiyi burada bulabilirsiniz.

2. Web sayfasını Chrome'da açın.

HTML dosyasını açmanın bir yolu, avif_example.html dosyasını Chrome'a sürüklemektir. HTML dosyasını açmak için diğer bir seçenek de avif_example.html öğesini bir HTTP sunucusundan sunmaktır.

AVIF resminiz artık Chrome'da oluşturulur. Resmi sağ tıklayıp Save image as... simgesini seçerek bunu test edebilirsiniz. example.avif ile bir iletişim kutusu açılır. Diğer bir seçenek de Chrome Geliştirici Araçları'nı açıp example.avif uygulamasının indirildiğini görmektir.

6. Animasyonlu AVIF resimleri oluşturma

1. Kaynak medyanızı y4m biçimine dönüştürün.

avifenc, animasyonlu AVIF resimleri oluşturmak için giriş olarak y4m değerini destekler. y4m dosyaları oluşturmak için mükemmel bir seçenek FFmpeg kullanmaktır.

Y4m dosyaları sıkıştırılmadığından çok büyük olabilir.

ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m

2. Animasyonlu AVIF resmi oluşturmak

Kaynak medya dosyanız yoksa kullanmanız için bir y4m dosyası oluşturdum: ice_qcif_15fps.y4m. Dosya Xiph.org Video Test Media'dan alınmıştır.

Bir y4m dosyasından animasyonlu bir AVIF resmi oluşturmak için bu komutu çalıştırın.

avifenc ice_qcif_15fps.y4m animated.avif

Artık size özel animasyonlu AVIF resminiz var.

3. Animasyonlu AVIF resmini bir web sayfasında oluşturun.

avif_animated_example.html adlı bir dosya oluşturun.

Kaynak medya dosyanız yoksa kullanmanız için bir gif dosyası oluşturdum: ice_qcif_15fps.gif.

GIF dosyasının yaklaşık 35 kat daha büyük olduğunu ve çok daha düşük kalitede olduğunu unutmayın.

Metin düzenleyicinizde avif_animated_example.html uygulamasını açın ve şu kodu yazın:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

Kaynak dosyanızı (ice_qcif_15fps.gif öğesinin üzerindeki örnekte) ve AVIF dosyanızı (animated.avif) avif_animated_example.html ile aynı dizine kopyalayın.

4. Web sayfasını Chrome'da açın.

HTML dosyasını açmanın bir yolu, avif_animated_example.html dosyasını Chrome'a sürüklemektir. HTML dosyasını açmak için diğer bir seçenek de avif_animated_example.html öğesini bir HTTP sunucusundan sunmaktır.

Animasyonlu AVIF resminiz artık Chrome'da oluşturulur.

Sağlanan örnek medyayı kullanıyorsanız kod aşağıdaki gibi görünmelidir:

Animasyonlu AVIF dışında kalite çok daha yüksektir.

Bu animasyonlu AVIF resmini, resmi sağ tıklayıp Save image as... seçeneğini belirleyerek test edebilirsiniz. Bu işlemde animated.avif bulunan bir iletişim kutusu açılır. Diğer bir seçenek de Chrome Geliştirici Araçları'nı açıp animated.avif uygulamasının indirildiğini görmektir.

7. Tebrikler!

AVIF resim kodu laboratuvarını tamamladınız.

AVIF'nin resimlerinizi küçültmeye ve web üzerinden aktarım için daha verimli hale getirmeye nasıl yardımcı olabileceğini açıklığa kavuşturduğumuzu umuyoruz. Jake Archibald'ın muhteşem yayınında AVIF özellikleri hakkında daha fazla bilgi edinebilirsiniz.