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'un, "Animasyonlu içerik için video biçimleri kullanın" denetiminde GIF'i sorun olarak işaretlediğini görürsünüz.

FFmpeg'i edinme

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çma

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

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u 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

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'ü ç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. Bu işlemin tamamlanması 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 kullanılsa da WebM, ilk olarak 2010'da kullanıma sunulduğu için nispeten yeni bir biçimdir. 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 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 MB, MP4 sürümünün 551 KB ve WebM sürümünün ise yalnızca 341 KB 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 reklamlar otomatik olarak oynatılır.
  • Sürekli olarak döngüde oynatılırlar (genellikle, ancak döngüyü engellemek 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 oynatılır (yani tam ekranda değil). 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ünür. Ş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! 💪