Hiç Imgur veya Gfycat gibi bir hizmette animasyonlu GIF görüp geliştirici araçlarınızda GIF'in gerçekten bir video olduğunu gördünüz mü? Bunun iyi bir sebebi var. Animasyonlu GIF'ler çok büyük olabilir.
Neyse ki bu, büyük kazançlar elde etmek için nispeten az çalışarak yükleme performansı alanlarından biri. Büyük GIF'leri videolara dönüştürerek kullanıcıların bant genişliğinden önemli ölçüde tasarruf edebilirsiniz.
Önce ölçüm yapın
Sitenizde videolara dönüştürülebilecek GIF'leri kontrol etmek için Lighthouse'u kullanın. Geliştirici Araçları'nda Denetimler sekmesini tıklayın ve Performans onay kutusunu işaretleyin. Sonra Lighthouse'u çalıştırıp raporu kontrol edin. Dönüştürülebilen GIF'leriniz varsa "Animasyonlu içerik için video biçimlerini kullan" önerisini görürsünüz:
MPEG videolar oluşturma
GIF'leri videoya dönüştürmenin birkaç yolu vardır.
Bu rehberde kullanılan araç FFmpeg'tir.
GIF'i FFmpeg'e dönüştürmek için my-animation.gif öğesini MP4 videosuna dönüştürmek için konsolunuzda 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 işlem FFmpeg'e, -i işaretiyle belirtilen giriş olarak my-animation.gif değerini alıp my-animation.mp4 adlı bir videoya dönüştürmesini söyler.
libx264 kodlayıcı yalnızca 320 piksele 240 piksel gibi çift boyutlara sahip dosyalarla çalışır. Girdi GIF'inin boyutları tek ise FFmpeg'in "yükseklik/genişlik 2'ye bölünmez" 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şturun
MP4 1999 yılından beri kullanılıyor olsa da WebM, 2010 yılında kullanıma sunulan nispeten yeni bir dosya biçimidir. WebM videoları MP4 videolardan ç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 öğesini 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
Farkı karşılaştırın
GIF ile video arasında önemli ölçüde tasarruf sağlayabilirsiniz.
Bu örnekte, ilk GIF'in boyutu 551 KB olan MP4 sürümüne kıyasla 3,7 MB ve WebM sürümünün boyutu yalnızca 341 KB'tır.
GIF resmini bir videoyla değiştirme
Animasyonlu GIF'lerin bir videonun taklit etmesi gereken üç temel özelliği vardır:
- Bunlar otomatik olarak oynatılır.
- 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></video>
Bu özelliklere sahip bir <video> öğesi otomatik olarak oynatılır, sonsuz döngü içinde çalışır, ses çalmaz ve animasyonlu GIF'lerden beklenen tüm ayırt edici davranışlara satır içinde (yani tam ekran değil) satır içinde oynatılır! 🎉
Son olarak <video> öğesi, tarayıcının biçim desteğine bağlı olarak tarayıcının seçim yapabileceği farklı video dosyalarını işaret eden bir veya daha fazla <source> alt öğesi gerektirir. Hem WebM hem de MP4 sağlayın, böylece
bir 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> öğeleri LCP adayları olsa da poster resmi olmayan <video> öğelerinin LCP adayları olmadığı unutulmamalıdır. Animasyonlu GIF'lerin taklit edilmesi durumunda çözüm, resim kullanılmayacağı için <video> öğelerinize poster özelliğini eklemek değildir.
Bu durum web siteniz için ne anlama geliyor? Bu tür bir medyanın LCP için aday olmayacağı ve bunun yerine bir sonraki en büyük adayın kullanılacağı anlayışıyla, animasyonlu GIF yerine bir <video> kullanmaya devam etmeniz önerilir. GIF'ler ve <video>'ler genellikle daha büyük olduğundan ve indirilmesi çok daha yavaş olduğundan, farklı bir LCP adayına geçiş yapmak sitenin LCP'sini bile iyileştirebilir.