GIF'leri videoyla değiştirin

Emre Altın

Bu codelab'de, animasyonlu GIF'leri videoyla değiştirerek performansı artırın.

Önce ölçüm yapın

Öncelikle web sitesinin nasıl performans gösterdiğini ölçün:

  1. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a tam ekran basın.
  2. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+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.

İşiniz bittiğinde Lighthouse'un "Animasyonlu içerik için video biçimlerini kullan" denetiminde GIF'i bir sorun olarak işaretlediğini göreceksiniz.

FFmpeg indirin

GIF'leri videoya dönüştürmek için kullanabileceğiniz birkaç yöntem vardır. Bu rehberde FFmpeg kullanılmaktadır. Glitch sanal makinesinde zaten yüklüdür. Dilerseniz yerel makinenize yüklemek için bu talimatları da uygulayabilirsiniz.

Konsolu aç

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

  1. Projeyi düzenlenebilir hale getirmek için Düzenlenecek 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 elde etmeniz gerekir:

/usr/bin/ffmpeg

GIF'i video olarak değiştir

  • Konsolda cd images dosyasını çalıştırarak resimler dizinine girin.
  • İç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 işlem, FFmpeg'e cat-herd.gif'in -i işaretiyle belirtilen girişi alıp cat-herd.mp4 adlı bir videoya dönüştürmesini söyler. Bu komutun çalışması bir saniye sürer. Komut tamamlandığında tekrar ls yazıp iki dosya görebilmeniz gerekir:

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

WebM videoları oluşturun

MP4 1999 yılından beri kullanılıyor olsa da WebM, 2010 yılında piyasaya yeni çıkan göreli bir yeni. WebM videoları, MP4 videolarından çok daha küçük olabileceğinden her ikisini birden oluşturmak mantıklıdır. Neyse ki <video> öğesi, birden fazla kaynak eklemenize olanak sağlar. Böylece, WebM'yi desteklemeyen bir tarayıcı 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
  • Çalıştırılan 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 milyon olmasına, MP4 sürümünün 551K, WebM sürümünün ise yalnızca 341K olduğuna dikkat edin. Bu muazzam bir tasarruf!

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

Animasyonlu GIF'lerin, videoların 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.

  • index.html dosyasında, satırı <img> ile 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, animasyonlu GIF'lerden beklenen tüm davranışlarda otomatik olarak oynatılır, sonsuz bir döngü içinde oynatılır, ses çalmaz ve satır içinde (yani tam ekran değil) oynatılır. 🎉

Kaynaklarınızı belirtin

Tek yapmanız gereken video kaynaklarınızı belirtmek. <video> öğesi, biçim desteğine bağlı olarak tarayıcının seçim yapabileceği farklı video dosyalarına işaret eden bir veya daha fazla <source> alt öğesi gerektirir. <video> öğesini, kedi yavrusu 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öster'e, ardından Tam Ekran'a tam ekran basın.

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

Lighthouse ile doğrulayın

Canlı site açıkken:

  1. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+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çimlerini kullanın" denetiminin başarıyla tamamlandığını göreceksiniz. Harika! 💪