Animasyonlu içerik için video biçimleri kullanın

Lighthouse raporunuzun Fırsatlar bölümünde, tüm animasyonlu GIF'ler ve bu GIF'lerin videoya dönüştürülmesiyle elde edilen tahmini saniye cinsinden tasarruflar listelenir:

Animasyonlu içerik denetimi için Lighthouse Video biçimlerini kullanma'nın ekran görüntüsü

Animasyonlu GIF'leri neden videoyla değiştirmelisiniz?

Büyük GIF'ler, animasyonlu içerik yayınlamak için verimli olmaz. Büyük GIF'leri videoya dönüştürerek kullanıcılarınızın zamandan tasarruf etmesini sağlayabilirsiniz. bant genişliği. Ağda kullanılan bayt miktarından tasarruf etmek için GIF yerine, animasyonlar için MPEG4 veya WebM videolarını ve statik görseller için PNG veya WebP biçimlerini kullanabilirsiniz.

MPEG videolar oluşturun

GIF'leri videoya dönüştürmenin çeşitli yolları vardır. Bu kılavuzda FFmpeg aracı kullanılmıştır. GIF'i (my-animation.gif) MP4 videosuna dönüştürmek için FFmpeg'i kullanmak istiyorsanız konsolunuzda aşağıdaki komutu çalıştırın:

ffmpeg -i my-animation.gif my-animation.mp4

Bu, FFmpeg'e my-animation.gif'yi giriş olarak almasını (-i işaretiyle gösterilir) ve my-animation.mp4 adlı bir videoya dönüştürmesini söyler.

WebM videoları oluşturma

WebM videoları MP4 videolarından çok daha küçüktür ancak tüm tarayıcılar WebM'yi desteklemez. Bu nedenle, her ikisini de oluşturmak mantıklıdır.

my-animation.gif dosyasını WebM videosuna dönüştürmek için FFmpeg'i kullanmak istiyorsanız konsolunuzda aşağıdaki komutu çalıştırın:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

GIF resmini videoyla değiştirme

Animasyonlu GIF'lerin videoda taklit etmesi gereken üç temel özelliği vardır:

  • Otomatik olarak oynatılır.
  • Sürekli olarak döngüde oynatılırlar (genellikle, ancak döngüyü engellemek mümkündür).
  • Sessizdirler.

Neyse ki <video> öğesini kullanarak bu davranışları yeniden oluşturabilirsiniz.

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm" />
  <source src="my-animation.mp4" type="video/mp4" />
</video>

GIF'leri HTML5 videolarına dönüştüren bir hizmet kullanın

Birçok resim CDN, GIF'ten HTML5 videoya dönüştürmeyi destekler. Resim CDN'sine bir GIF yüklersiniz ve resim CDN'si bir HTML5 videosu döndürür.

Pakete özel yönergeler

AMP

Animasyonlu içerik için CPU'yu en aza indirmek için amp-anim nasıl kullanılacağını öğreneceğiz.

Kaynaklar