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