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 tasarruf listelenir:
Neden animasyonlu GIF'leri videoyla değiştirmelisiniz?
Büyük GIF'ler, animasyonlu içeriğin sunulmasında verimli olmaz. Büyük GIF'leri videoya dönüştürerek kullanıcıların bant genişliğinden önemli ölçüde tasarruf edebilirsiniz. Ağ veri miktarından tasarruf etmek üzere animasyonlar için MPEG4/WebM videoları ve statik resimler için GIF yerine PNG/WebP kullanma seçeneğini değerlendirin.
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 MP4 videoya dönüştürmek için FFmpeg'i kullanmak üzere my-animation.gif konsolunuzda aşağıdaki komutu çalıştırın:
ffmpeg -i my-animation.gif my-animation.mp4
Bu komut, FFmpeg'e my-animation.gif dosyasını giriş olarak almasını (-i işaretiyle belirtilir) 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 desteklemediğinden 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 üzere 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, videolarda da bulunması gereken üç temel özelliği vardır:
- Otomatik olarak oynatılırlar.
- Sürekli olarak döngüye girerler (genellikle, ancak döngüye girmeyi önlemek 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'si, GIF'i HTML5 videosuna 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çerik için içerik ekran dışındayken CPU kullanımını en aza indirmek amacıyla amp-anim kullanın.
Drupal
GIF dosyanızı, video olarak yerleştirmek için kullanılabilmesini sağlayacak bir hizmete yüklemeyi düşünün.