Sayfaların daha hızlı yüklenmesi için animasyonlu GIF'leri videoyla değiştirin

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.

13,7 MB'lık GIF'in gösterildiği Geliştirici Araçları ağ paneli.

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":

Başarısız bir Lighthouse denetimi. Animasyonlu içerik için video biçimleri kullanın.

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.

Dosya boyutu karşılaştırmasıyla GIF için 3,7 MB, mp4 için 551 KB ve webm için 341 KB gösteriliyor.

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.