Imgur veya Gfycat gibi bir hizmette hareketli GIF görüp geliştirici araçlarınızda inceledikten sonra GIF'in aslında video olduğunu fark ettiğiniz oldu mu? Bunun iyi bir nedeni var. Animasyonlu GIF'ler çok büyük olabilir.
Neyse ki bu, yükleme performansının nispeten az çalışarak büyük kazançlar elde edebileceğiniz alanlarından biridir. Büyük GIF'leri videoya dönüştürerek kullanıcıların bant genişliğinden önemli ölçüde tasarruf edebilirsiniz.
Önce ölçüm yapın
Sitenizde videoya dönüştürülebilecek GIF'ler olup olmadığını kontrol etmek için Lighthouse'u kullanın. Geliştirici Araçları'nda Denetlemeler sekmesini tıklayın ve Performans onay kutusunu işaretleyin. Ardından Lighthouse'u çalıştırın ve raporu kontrol edin. Dönüştürülebilecek GIF'leriniz varsa "Animasyonlu içerik için video biçimleri kullanın" önerisini görürsünüz:
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 konsolunuzda aşağıdaki komutu çalıştırın:my-animation.gif
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Bu komut, FFmpeg'e my-animation.gif dosyasını -i işaretiyle belirtilen giriş olarak almasını ve my-animation.mp4 adlı bir videoya dönüştürmesini söyler.
libx264 kodlayıcı yalnızca 320x240 piksel gibi eşit boyutlara sahip dosyalarla çalışır. Giriş GIF'inin boyutları tekse FFmpeg'in "yükseklik/genişlik 2'ye bölünemiyor" hatası vermesini önlemek için kırpma filtresi ekleyebilirsiniz:
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şturma
MP4 1999'dan beri kullanılsa da WebM, 2010'da kullanıma sunulan nispeten yeni bir dosya biçimidir. 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'yi 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
Farkı karşılaştırma
GIF ile video arasındaki maliyet tasarrufu oldukça önemli olabilir.
Bu örnekte, ilk GIF 3,7 MB iken MP4 sürümü 551 KB ve WebM sürümü yalnızca 341 KB'tır.
GIF resmini videoyla değiştirme
Animasyonlu GIF'lerin, videonun kopyalaması gereken üç temel özelliği vardır:
- Otomatik olarak oynatılır.
- Sürekli olarak döngüye girerler (genellikle, ancak döngüye girmeyi önlemek mümkündür).
- Sessizdirler.
Neyse ki bu davranışları <video> öğesini kullanarak yeniden oluşturabilirsiniz.
<video autoplay loop muted playsinline></video>
Bu özelliklere sahip bir <video> öğesi otomatik olarak oynatılır, sonsuza kadar döngüye girer, ses çalmaz ve satır içi (yani tam ekran değil) oynatılır. Bunların hepsi, animasyonlu GIF'lerden beklenen temel davranışlardır. 🎉
Son olarak, <video> öğesi, tarayıcının biçim desteğine bağlı olarak tarayıcının seçebileceği farklı video dosyalarını işaret eden bir veya daha fazla <source> alt öğesi gerektirir. Hem WebM hem de MP4 biçiminde video sağlayın. Böylece, tarayıcı WebM'yi desteklemiyorsa 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> öğelerinin LCP için aday olduğu, ancak poster resmi olmayan <video> öğelerinin LCP adayı olmadığı unutulmamalıdır. Animasyonlu GIF'lerin taklit edilmesi durumunda çözüm, <video> öğelerinize poster özelliğini eklememektir. Çünkü bu resim kullanılmaz.
Bu durum web sitenizi nasıl etkiler? Animasyonlu GIF yerine <video> kullanmaya devam etmeniz önerilir. Ancak bu tür medyanı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 olduğundan indirilmesi daha uzun sürer. Bu nedenle, farklı bir LCP adayı kullanmak sitenin LCP'sini daha da iyileştirebilir.