Imgur veya Gfycat gibi bir hizmette incelenmiş animasyonlu GIF'i hiç gördünüz mü? GIF'in gerçekten bir video olduğunu anlamaya çalışırken sorun yaşıyor musunuz? Bir iyi bir nedeni olabilir. Animasyonlu GIF'ler tam anlamıyla çok büyük olabilir.
Neyse ki bu, yükleme performansı konusunda sizlere büyük kazanımlar elde etmek için nispeten az bir çabayla ortaya çıkmıştır! Büyük GIF'leri çok daha verimli bir şekilde kullanabilir, bant genişliği.
Önce ölçüm yapın
Sitenizde videolara dönüştürülebilen GIF'lerin olup olmadığını kontrol etmek için Lighthouse'u kullanın. İçinde Geliştirici Araçları'ndaki Denetimler sekmesini tıklayın ve Performans onay kutusunu işaretleyin. Ardından Lighthouse'u tıklayın ve raporu inceleyin. Dönüştürülebilen GIF'leriniz varsa " animasyonlu içerik için video biçimleri":
MPEG videolar oluşturun
GIF'leri videoya dönüştürmenin çeşitli yolları vardır.
Bu kılavuzda kullanılan araç FFmpeg'dir.
GIF'i FFmpeg kullanarak bir MP4 videosuna dönüştürmek için my-animation.gif
aşağıdaki komutu çalıştırın:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Bu, FFmpeg'e,my-animation.gif
-i işaretini kaldırın ve bunu my-animation.mp4 adlı bir videoya dönüştürün.
libx264 kodlayıcı yalnızca 320 piksel gibi eşit boyutlara sahip dosyalarla çalışır x 240 piksel. Girilen GIF'in boyutları tuhafsa kırpma filtresi ekleyerek FFmpeg'in "yükseklik/genişlik 2'ye bölünmez" hatası vermesini önleyin hata:
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
WebM videoları oluşturun
MP4 1999 yılından beri kullanılıyor olsa da WebM nispeten yeni bir dosya biçimidir ilk olarak 2010'da piyasaya sürüldü. 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ı olacaktır.
my-animation.gif dosyasını WebM videosuna dönüştürmek amacıyla FFmpeg'i kullanmak için aşağıdaki komutu çalıştırın:
komutunu girin:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Farkı karşılaştırın
GIF ve video arasında önemli maliyet tasarrufu sağlanabilir.
Bu örnekte, ilk GIF, MP4 sürümüyle karşılaştırıldığında 3, 7 MB'tır. 551 KB ve WebM sürümünün boyutu yalnızca 341 KB'tır.
GIF resmi bir videoyla değiştirin
Animasyonlu GIF'lerin videoda taklit etmesi gereken üç temel özelliği vardır:
- Otomatik olarak oynatılırlar.
- 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></video>
Bu özelliklere sahip bir <video> öğesi otomatik olarak oynatılır ve sonsuz döngü içinde
ses çalmaz ve satır içinde çalar (yani tam ekran değilse), tüm ayırt edici özellikler
animasyonlu GIF'lerden beklenen davranışlar. 🎉
Son olarak, <video> öğesi için bir veya daha fazla <source> alt öğesi gerekir.
tarayıcının seçebileceği farklı video dosyalarına işaret ederek,
Tarayıcının biçim desteğini
Hem WebM hem de MP4 sağlayın. Böylece,
WebM'yi desteklemez, MP4'e geri dönebilir.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
Largest Contentful Paint (LCP) üzerindeki etkisi
<img> öğeleri LCP için aday olsa da poster görüntüsü içermeyen <video> öğelerin LCP adayları olmadığı unutulmamalıdır. Animasyonlu GIF'lerin emülasyonu durumunda, <video> öğelerinize poster özelliği eklenmeyeceğinden, bu durumun çözümü değildir.
Bu durum web siteniz için ne anlama geliyor? Öneri, animasyonlu GIF yerine <video> kullanmaya devam etmektir. Ancak bu tür medyaların LCP için aday olmayacağını ve bunun yerine bir sonraki en büyük adayın kullanılacağını unutmayın. GIF'ler ve <video>'ler genellikle daha büyük ve indirmeleri çok yavaş olduğundan, farklı bir LCP adayına geçmek sitenin LCP değerini bile artırabilir.