AVIF Resimlerini Sunma

1. Giriş

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

AVIF nedir?

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

Neden AVIF?

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

Öğrenecekleriniz

• Resimlerinizden AVIF resimleri oluşturma
• AVIF resimlerini web sayfasında oluşturma

İhtiyacınız olanlar

• Tüm popüler tarayıcılar.
• Metin düzenleyici
• cmake
• git
• ninja
• Resim. Bir örneği bu bağlantıda bulabilirsiniz.
• FFmpeg

2. Squoosh ile AVIF resimleri oluşturma

Squoosh, resimlerinizi AVIF resimlerine dönüştürebilen bir resim sıkıştırma web uygulamasıdır.

1. Squoosh'u açın.
2. Yerel bir resmi Squoosh'a bırakın.

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

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.

Orijinal örnek resim 3.340 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ı.

4. AVIF resmini indirin

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

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

Artık kendi AVIF resminiz var.

3. Building command line encoder avifenc

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

Chrome, AVIF görüntüleri 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/

Derleme için avifenc ve libavif'i yapılandırabileceğiniz birçok farklı yol vardır. Daha fazla bilgiyi libavif sayfasında bulabilirsiniz. avifenc'i libaom kodlayıcı, dav1d kod çözücü ve libyuv işleme kitaplıklarına statik olarak bağlanacak şekilde derleyeceğiz.

libyuv, renk dönüşümlerinin performansını hızlandırmak için önemlidir.

3. Komut satırı kodlama aracı avifenc'i derleyin.

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

Build avifenc.

make

avifenc başarıyla oluşturuldu.

4. avifenc ile AVIF resimleri oluşturma

1. Varsayılan ayarlarla bir AVIF resmi oluşturun.

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

./avifenc happy_dog.jpg example.avif

Artık ikinci AVIF resminiz var.

2. AVIF kodlamanın kalitesini değiştirme

Genellikle AVIF kodlamasında değiştirmek isteyebileceğiniz tek parametre quality parametresidir. quality, sıkıştırılmış bir görüntünün kalitesini dosya 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.

avifenc, hem kaliteyi hem de hızı etkileyecek birçok seçeneğe sahiptir. Seçenekleri görmek ve bunlar hakkında daha fazla bilgi edinmek istiyorsanız ./avifenc komutunu çalıştırın.

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

Şimdi, tüm çalışmalarınızı dünyaya gösterme zamanı.

1. AVIF resminizi sunmak 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ı (example.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 geçiyoruz. picture öğesi hakkında daha fazla bilgi edinin.

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çmanın bir başka 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 belirleyebilirsiniz. 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 resimler oluşturma

FFmpeg'i sisteminize yüklemek bu codelab'in kapsamı dışındadır. FFmpeg'i sisteminize nasıl yükleyeceğiniz hakkında daha fazla bilgi için lütfen FFmpeg belgelerine bakın.

Kaynak medya dosyanız yoksa kullanabileceğiniz bir y4m dosyası oluşturdum: ice_qcif_15fps.y4m. Dosya, Xiph.org Video Test Media'dan alınmıştır.

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

1. Animasyonlu AVIF resmi oluşturun.

Bir y4m dosyasından animasyonlu AVIF resmi 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.

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

avif_animated_example.html adlı bir dosya oluşturun.

Kaynak medya dosyanız yoksa kullanabileceğiniz bir GIF dosyası: ice_qcif_15fps.gif.

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.

3. 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çmanın bir başka yolu da avif_animated_example.html öğesini 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 şu şekilde görünmelidir:

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

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

avifenc, animasyonlu AVIF resimleri oluşturmak için giriş olarak y4m'yi destekler. Y4m dosyaları oluşturmak için FFmpeg'yi kullanabilirsiniz.

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

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

2. Animasyonlu AVIF resmi oluşturun.

Kaynak medya dosyanız yoksa kullanabileceğiniz 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 AVIF resmi oluşturmak için bu komutu çalıştırın.

./avifenc ice_qcif_15fps.y4m animated.avif

Artık kendi 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 kullanabileceğiniz bir GIF dosyası oluşturdum: ice_qcif_15fps.gif.

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.

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çmanın bir başka yolu da avif_animated_example.html öğesini bir HTTP sunucusundan sunmaktır.

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

Sağlanan örnek medya kullanılıyorsa şu şekilde görünmelidir:

Ancak animasyonlu AVIF'te kalite çok daha yüksektir.

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.

5. AVIF kodlamasının kalitesini değiştirme

ice_qcif_15fps.gif dosyası, çok daha kötü kalitede olmasına rağmen yaklaşık 7 kat daha büyüktür. Kalite parametresini 20 olarak değiştirerek AVIF'nin kalitesini yaklaşık olarak ice_qcif_15fps.gif kalitesine eşleyebilirsiniz.

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

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 görüntüleri sunma kod laboratuvarını tamamladınız.

AVIF'in, resimlerinizi küçültmenize ve web üzerinden daha verimli bir şekilde iletmenize nasıl yardımcı olabileceğini anladığınızı umuyoruz. Jake Archibald'ın harika yayınında AVIF'in özellikleri hakkında daha fazla bilgi edinebilirsiniz.