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ü](https://developer.chrome.com/static/docs/lighthouse/performance/efficient-animated-content/image/a-screenshot-the-lightho-8a0ec21794e2.png?authuser=5&hl=tr)
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.