GIF'leri videoyla değiştirin

Rob Dodson

Bu kod laboratuvarında, animasyonlu GIF'i videoyla değiştirerek performansı artırın.

Önce ölçüm yapın

Öncelikle web sitesinin performansını ölçün:

  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.
  2. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  3. Lighthouse sekmesini tıklayın.
  4. Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
  5. Rapor oluştur düğmesini tıklayın.

İşlemi tamamladığınızda Lighthouse'ın, "Animasyonlu içerik için video biçimleri kullanın" denetiminde GIF'i sorun olarak işaretlediğini görürsünüz.

FFmpeg al

GIF'leri videoya dönüştürmenin birçok yolu vardır. Bu kılavuzda FFmpeg kullanılmaktadır. Bu araç, Glitch sanal makinesine önceden yüklenmiştir. Dilerseniz buradaki talimatları uygulayarak yerel makinenize de yükleyebilirsiniz.

Konsolu aç

FFmpeg'in yüklü ve çalıştığından emin olun:

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
  2. Terminal'i tıklayın (not: Terminal düğmesi görünmüyorsa Tam Ekran seçeneğini kullanmanız gerekebilir).
  3. Konsolda şu komutu çalıştırın:
which ffmpeg

Şu şekilde bir dosya yolu alırsınız:

/usr/bin/ffmpeg

GIF'i videoya dönüştürme

  • Konsolda, resimler dizine girmek için cd images komutunu çalıştırın.
  • İçeriği görmek için ls komutunu çalıştırın.

Aşağıdakine benzer bir tablo görürsünüz:

$ ls
cat-herd.gif
  • Konsolda şu komutu çalıştırın:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Bu, FFmpeg'e cat-herd.gif dosyasının -i işaretiyle gösterilen girişini alıp cat-herd.mp4 adlı bir videoya dönüştürmesini söyler. Bunun çalışması bir saniye sürer. Komut tamamlandığında tekrar ls yazabilir ve iki dosya görebilirsiniz:

$ ls
cat-herd.gif  cat-herd.mp4

WebM videoları oluşturma

MP4, 1999'dan beri piyasada olsa da WebM, ilk olarak 2010'da kullanıma sunulan göreceli bir yeni platformdur. WebM videoları MP4 videolarından çok daha küçük olabilir. Bu nedenle, her ikisini de oluşturmak mantıklıdır. Neyse ki <video> öğesi birden fazla kaynak eklemenize olanak tanır. Böylece, bir tarayıcı WebM'yi desteklemiyorsa MP4'e geçebilir.

  • Konsolda şu komutu çalıştırın:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Dosya boyutlarını kontrol etmek için:
ls -lh

Bir GIF'iniz ve iki videonuz olmalıdır:

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

Orijinal GIF'in 3, 7 M, MP4 sürümünün 551K ve WebM sürümünün yalnızca 341K olduğunu unutmayın. Bu çok büyük bir tasarruf.

GIF efektini yeniden oluşturmak için HTML'yi güncelleme

Animasyonlu GIF'lerin, videoların kopyalaması gereken üç temel özelliği vardır:

  • Bu içerikler otomatik olarak oynatılır.
  • 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.

  • index.html dosyasında, <img> içeren satırı şu şekilde değiştirin:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Bu özellikleri kullanan bir <video> öğesi otomatik olarak oynatılır, sonsuz döngüde oynatılır, ses çalmaz ve satır içi (yani tam ekran değil) oynatılır. Bu, animasyonlu GIF'lerden beklenen tüm davranışlardır. 🎉

Kaynaklarınızı belirtin

Tek yapmanız gereken video kaynaklarınızı belirtmektir. <video> öğesi, tarayıcı tarafından format desteğine bağlı olarak seçilebilecek farklı video dosyalarını işaret eden bir veya daha fazla <source> alt öğesi gerektirir. <video> öğesini, kedi sürüleri videolarınıza bağlantı veren <source> öğeleriyle güncelleyin:

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

Önizleme

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.

Deneyim aynı şekilde görünecektir. Şu ana kadar her şey yolunda.

Lighthouse ile doğrulama

Canlı site açıkken:

  1. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  2. Lighthouse sekmesini tıklayın.
  3. Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
  4. Rapor oluştur düğmesini tıklayın.

"Animasyonlu içerik için video biçimleri kullanın" denetiminin artık geçtiğini göreceksiniz. Harika! 💪