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 görsellerinizi küçültebilir ve web sitenizin daha hızlı yüklenmesini sağlayabilirsiniz.

AVIF nedir?

AVIF, AV1 video bit akışından türetilmiş bir resim biçimidir. AVIF, sıkıştırma verimliliği için geliştirilmiştir.

Neden AVIF?

AVIF resimleri, aynı veya daha iyi kalitedeki JPEG, PNG, GIF ya da WebP resimlerinden çok daha küçüktür.

Öğrenecekleriniz

Görsellerinizden AVIF görselleri oluşturma
AVIF görüntüleri web sayfasında oluşturma

İhtiyacınız olanlar

Herhangi bir büyük tarayıcı.
Metin düzenleyici
cmake
git
ninja
Bir resim. Bir örneği burada paylaştım.
FFmpeg

2. Squoosh ile AVIF resimleri oluşturma

Squoosh, bir resim sıkıştırma web uygulamasıdır. Squoosh ile resimlerinizi kolayca AVIF resimlerine sıkıştırabilirsiniz.

https://squoosh.app adresini açın.
Yerel bir resmi Squoosh'a bırakın.

Squoosh ekran görüntüsü

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

Squoosh açılır kutusu

Squoosh, resminizi AVIF resmine sıkıştırır. Squoosh işlemi tamamlandığında sağ alt köşede AVIF resmiyle ilgili bazı istatistiklerin yer aldığı bir indirme düğmesi gösterilir.

Squoosh indir düğmesi

Orijinal örnek resim 3340 kB, sıkıştırılmış resim ise 378 kB'tır. Örnek resim, orijinal resimden yaklaşık 10 kat daha küçük olacak şekilde sıkıştırıldı.

AVIF resmini indirme

İndirme düğmesini tıkladığınızda AVIF resmi yerel sürücünüze kaydedilir.

Artık kendi AVIF resminiz var.

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

avifenc, PNG ve JPEG resimleri AVIF resimlerine dönüştürebilen bir komut satırı uygulamasıdır. avifenc, AVIF resimlerini kod çözebilen ve kodlayabilen bir kitaplık olan libavif'i kullanır. AVIF'e dönüştürmek istediğiniz çok sayıda resim varsa komut satırı kodlayıcı olan avifenc'i kullanmak iyi bir seçenek olabilir.

Kodu alın.

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

Dizini libavif olarak değiştirin.

cd libavif/

avifenc ve libavif'i derlemek için yapılandırabileceğiniz birçok farklı yöntem vardır. Daha fazla bilgiye libavif adresinden ulaşabilirsiniz. avifenc'i, libaom kodlayıcı, dav1d kod çözücü ve libyuv işleme kitaplıklarına statik olarak bağlanacak şekilde oluşturacağız.

Komut satırı kodlama aracı avifenc'i oluşturun.

avifenc için bir derleme dizini oluşturmanız önerilir.

mkdir build

Derleme dizinine geçin.

cd build

avifenc için derleme dosyalarını oluşturun.

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

avifenc'i oluşturun.

make

avifenc başarıyla oluşturuldu.

4. avifenc ile AVIF görüntüleri oluşturma

Varsayılan ayarlarla bir AVIF resmi oluşturun.

avifenc'in çalışması için en temel parametreler, giriş ve çıkış dosyalarının ayarlanmasıdır.

./avifenc happy_dog.jpg example.avif

Artık ikinci AVIF resminiz var.

AVIF kodlamanın kalitesini değiştirme

Genellikle AVIF kodlamada değiştirmek isteyebileceğiniz tek parametre quality parametresidir. quality, sıkıştırılmış bir görüntünün kalitesini dosyanın boyutuyla değiştiren bir parametredir. Örneğin, yüksek kaliteli bir dosya (-q 90), düşük kaliteli bir dosyadan (-q 20) çok daha büyük olur ancak yüksek kaliteli dosya çok daha iyi görünür.

5. Web sayfasında AVIF resimlerini oluşturun.

Şimdi de tüm bu sıkı çalışmanızı dünyaya gösterme zamanı.

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 dosyası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 durumumda happy_dog.jpg) ve AVIF dosyanızı (eaxmple.avif) avif_example.html ile aynı dizine kopyalayın.

Tarayıcı AVIF'i destekliyorsa AVIF resmini oluşturmak için picture öğesini kullanıyoruz. Tarayıcı AVIF'i desteklemiyorsa JPEG'e geri dönüyoruz. picture öğesi hakkında daha fazla bilgiyi burada bulabilirsiniz.

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

HTML dosyasını açmanın bir yolu, avif_example.html simgesini Chrome'a sürüklemektir. HTML dosyasını açmanın bir diğer yolu da avif_example.html dosyasını bir HTTP sunucusundan sunmaktır.

AVIF resminiz artık Chrome'da oluşturulmalıdır. Bunu test etmek için resmi sağ tıklayıp Save image as... seçeneğini belirleyin. Bu işlem, example.avif içeren bir iletişim kutusu açar. Diğer bir seçenek de Chrome Geliştirici Araçları'nı açıp example.avif dosyasının indirildiğini görmektir.

6. FFmpeg ile animasyonlu AVIF resimleri oluşturma

Animasyonlu AVIF resmi oluşturun.

y4m dosyasından animasyonlu AVIF görüntüsü oluşturmak için bu komutu çalıştırın.

ffmpeg -i ice_qcif_15fps.y4m animated.avif

Artık kendi animasyonlu AVIF resminiz var.

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

avif_animated_example.html adlı bir dosya oluşturun.

Metin düzenleyicinizde avif_animated_example.html dosyası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ı (yukarıdaki örnekte ice_qcif_15fps.gif) ve AVIF dosyanızı (animated.avif) avif_animated_example.html ile aynı dizine kopyalayın.

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

HTML dosyasını açmanın bir yolu, avif_animated_example.html simgesini Chrome'a sürüklemektir. HTML dosyasını açmanın bir diğer yolu da avif_animated_example.html dosyasını bir HTTP sunucusundan sunmaktır.

Artık animasyonlu AVIF resminiz Chrome'da oluşturulmalıdır.

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

Animasyonlu buz pisti

Resmi sağ tıklayıp Save image as... seçeneğini belirleyerek bunun animasyonlu bir AVIF resmi olup olmadığını test edebilirsiniz. Bu işlem, animated.avif içeren bir iletişim kutusu açar. Diğer bir seçenek de Chrome Geliştirici Araçları'nı açıp animated.avif dosyasının indirildiğini görmektir.

7. avifenc ile animasyonlu AVIF resimleri oluşturma

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

avifenc Animasyonlu AVIF resimler oluşturmak için giriş olarak y4m biçimini destekler. Y4m dosyaları oluşturmak için FFmpeg'i kullanabilirsiniz.

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

Animasyonlu AVIF resmi oluşturun.

y4m dosyasından animasyonlu AVIF görüntüsü oluşturmak için bu komutu çalıştırın.

./avifenc ice_qcif_15fps.y4m animated.avif

Artık ikinci animasyonlu AVIF resminiz hazır.

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

avif_animated_example.html adlı bir dosya oluşturun.

Metin düzenleyicinizde avif_animated_example.html dosyası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ı (yukarıdaki örnekte ice_qcif_15fps.gif) ve AVIF dosyanızı (animated.avif) avif_animated_example.html ile aynı dizine kopyalayın.

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

Artık animasyonlu AVIF resminiz Chrome'da oluşturulmalıdır.

Sağlanan örnek medyayı kullanıyorsanız şu şekilde görünmelidir:

Animasyonlu buz pisti

AVIF kodlamanın kalitesini değiştirme

ice_qcif_15fps.gif dosyası yaklaşık 7 kat daha büyük ve kalitesi çok daha düşük. Kalite parametresini 20 olarak değiştirerek AVIF kalitesini yaklaşık olarak ice_qcif_15fps.gif kalitesine eşleyebilirsiniz.

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

Şimdi animasyonlu AVIF dosyası ve ice_qcif_15fps.gif yaklaşık olarak aynı kaliteye sahip ancak GIF dosyası yaklaşık 22 kat daha büyük.

8. Tebrikler!

AVIF resim yayınlama kod laboratuvarını tamamladınız.

AVIF'in, görsellerinizi küçültmenize ve web üzerinden daha verimli bir şekilde iletmenize nasıl yardımcı olabileceğini anladığınızı umuyoruz. AVIF'in özellikleri hakkında daha fazla bilgiyi Jake Archibald'ın gönderisinde bulabilirsiniz.