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çeriğin sunulmasında verimli olmaz. Büyük GIF'leri videoya 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ı ve statik resimler için PNG/WebP biçimlerini kullanabilirsiniz.
MPEG videoları oluşturma
GIF'leri videoya dönüştürmenin birkaç yolu 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şturun
WebM videoları MP4 videolardan ç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 videoya 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:
- Bu içerikler otomatik olarak oynatılır.
- Döngüler sürekli olarak döngüye girer (genellikle ancak döngüyü ö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, GIF'ten HTML5'e video dönüştürmeyi destekler. Resim CDN'sine bir GIF yüklediğinizde, resim CDN'si bir HTML5 videosu döndürür.
Pakete özel yönergeler
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'inizi, video olarak yerleştirilmek için kullanılabilmesini sağlayacak bir hizmete yüklemeyi düşünün.