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üldüğünde saniyeler içinde elde edilen tahmini kazanç listelenir:

Animasyonlu içerik denetimi için Lighthouse video biçimlerini kullanın ekran görüntüsü

Animasyonlu GIF'leri neden video ile değiştirmelisiniz?

Büyük GIF'ler, animasyonlu içerik yayınlamak için verimli değildir. Büyük GIF'leri videolara dönüştürerek kullanıcıların bant genişliğinden büyük ölçüde tasarruf edebilirsiniz. Ağda kullanılan bayt miktarından tasarruf etmek için GIF yerine, animasyonlar için MPEG4/WebM videolarını ve statik görseller için PNG/WebP videolarını kullanabilirsiniz.

MPEG videolar oluşturma

GIF'leri videoya dönüştürmenin çeşitli yolları vardır. Bu kılavuzda kullanılan araç FFmpeg'dir. GIF'i FFmpeg'e dönüştürmek için my-animation.gif kodunu MP4 videosuna dönüştürmek için konsolunuzda aşağıdaki komutu çalıştırın:

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

Bu işlem, FFmpeg'e my-animation.gif öğesini giriş olarak (-i işaretiyle belirtilen şekilde) ve bunu my-animation.mp4 adlı bir videoya dönüştürmesini bildirir.

WebM videoları oluşturun

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

my-animation.gif dosyasını bir WebM videosuna dönüştürmek üzere FFmpeg'i kullanmak için 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 bir videoyla değiştirme

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

  • Otomatik olarak oynatılırlar.
  • Sürekli olarak döngü oluştururlar (genellikle ancak döngüyü önlemek mümkündür).
  • Sessiz olurlar.

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

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

Yığına özel rehberlik

AMP

Animasyonlu içerikte içerik ekran dışındayken CPU kullanımını en aza indirmek için amp-anim kullanın.

Kaynaklar