Hem MP4 hem WEBM üretmek gerekli mi?

Kendi web sitenizde kullanacaksanız evet, çünkü ikisini birlikte sunmak hem verimlilik hem uyumluluk sağlar. Modern tarayıcılar daha küçük olan WEBM'i alır, eskiler MP4'e düşer. Tek bir dosya seçmek zorundaysanız MP4 daha güvenlidir — her yerde çalışır. WEBM'in avantajı yalnızca dosya boyutundadır ve bu genellikle %20-30 civarındadır.

Saydam GIF'imi videoya çevirirsem ne olur?

Saydamlık kaybolur. Yaygın video kodekleri alfa kanalı taşımaz ve saydam pikseller genellikle siyah veya beyazla doldurulur. Saydamlık korunmalıysa video yerine animasyonlu WEBP veya APNG seçin; ikisi de 8 bit alfa destekler ve GIF'in ikili saydamlığından daha iyi sonuç verir.

Animasyonlu WEBP video kadar küçük mü?

Hayır, genellikle iki-üç kat daha büyüktür. Ama GIF'ten yaklaşık üçte bir boyuttadır ve saydamlığı korur. Yani sıralama şöyle: video en küçük, WEBP ortada, APNG daha büyük, GIF en büyük. Saydamlık gerekmiyorsa video her zaman daha verimlidir.

Dönüşüm sonrası GIF dosyalarımı silmeli miyim?

Hemen silmeyin. Bir süre saklayın çünkü bazı ortamlar hâlâ GIF gerektirebilir — e-posta bültenleri, eski forum gönderileri, bazı içerik yönetim sistemleri. Ayrıca dönüşümde bir sorun fark ederseniz kaynağa dönmeniz gerekir. Site genelinde toplu dönüşüm yaptıysanız, birkaç hafta sorunsuz geçtikten sonra arşivleyebilirsiniz.

GIF'i MP4'e mi WEBM'e mi Çevirmeli? Hedef Format Karşılaştırması

GIF'inizi dönüştürmeye karar verdiniz. Şimdi hedef sorusu var: MP4 mü, WEBM mi, animasyonlu WEBP mi, APNG mi? Dördü de GIF'ten küçük ve dördü de farklı ödünler veriyor. Bu yazıda hangisinin hangi durumda doğru olduğunu inceliyoruz.

Dört hedef formatın özeti

MP4 (H.264): En yaygın video formatı. Evrensel destek.

WEBM (VP9): Açık video formatı. Aynı kalitede MP4'ten daha küçük, modern tarayıcılarda desteklenir.

Animasyonlu WEBP: Görsel formatı olarak davranır (<img> etiketiyle kullanılır), tam renk ve alfa saydamlığı destekler.

APNG: PNG'nin animasyonlu sürümü. Tam renk, 8 bit alfa, görsel olarak davranır.

Karşılaştırma tablosu

5 saniyelik, 480×270, 15 fps bir GIF için kabaca:

| Kriter | GIF (kaynak) | MP4 | WEBM | WEBP anim. | APNG | |---|---|---|---|---|---| | Tipik boyut | 4 MB | 400 KB | 300 KB | 1.2 MB | 2.5 MB | | Alfa saydamlık | İkili | Yok | Yok | 8 bit | 8 bit | | HTML etiketi | <img> | <video> | <video> | <img> | <img> | | Otomatik oynatma | Doğal | Öznitelik | Öznitelik | Doğal | Doğal | | Tarayıcı desteği | Evrensel | Evrensel | Modern | Modern | Modern | | E-posta desteği | İyi | Yok | Yok | Yok | Zayıf | | Kroma tam çözünürlük | Evet | Hayır (4:2:0) | Hayır (4:2:0) | Evet | Evet |

Son satır önemli: video formatları renk bilgisini yarı çözünürlükte saklar (4:2:0 kroma altörnekleme), bu da keskin renkli kenarlarda hafif bulanıklık yaratır. WEBP ve APNG bunu yapmaz.

Senaryo 1: Web sitesinde ürün animasyonu

Sayfada otomatik oynayacak, saydamlık gerekmiyor.

Kazanan: WEBM + MP4 birlikte.

<video autoplay muted loop playsinline poster="onizleme.jpg">
  <source src="animasyon.webm" type="video/webm">
  <source src="animasyon.mp4" type="video/mp4">
</video>

Modern tarayıcılar daha küçük olan WEBM'i alır, eskiler MP4'e düşer. İki dosya üretmek küçük bir ek iş ama hem verimlilik hem uyumluluk kazandırır.

Sadece bir dosya seçmek zorundaysanız MP4 alın; WEBM'in avantajı %20-30 boyut farkıdır ve bu, uyumluluk riskini almaya değmeyebilir.

Senaryo 2: Saydam arka planlı logo animasyonu

Arkasındaki sayfa içeriği görünecek.

Kazanan: animasyonlu WEBP.

Video formatları alfa saydamlığını pratikte desteklemez. Bu senaryoda MP4/WEBM tamamen elenir.

WEBP vs APNG:

| Konu | WEBP anim. | APNG | |---|---|---| | Dosya boyutu | Daha küçük | 2-3 kat büyük | | Tarayıcı desteği | Modern tarayıcılar | Biraz daha geniş | | Kayıplı seçenek | Var | Yok (hep kayıpsız) |

WEBP genellikle daha iyi seçimdir çünkü kayıplı modu sayesinde çok daha küçük dosyalar üretir ve modern tarayıcı desteği yeterlidir.

APNG'yi tercih edeceğiniz durum: kayıpsız kalite mutlaka gerekiyorsa (örneğin piksel-mükemmel bir arayüz animasyonu) ve dosya boyutu ikincil öneme sahipse.

Her ikisi de GIF'in ikili saydamlığından çok daha iyidir — 256 saydamlık seviyesiyle yumuşak kenarlar sağlarlar, GIF'in tırtıklı kenarları olmaz.

Senaryo 3: Ekran kaydı animasyonu (arayüz gösterimi)

Bir yazılımın nasıl kullanıldığını gösteren kayıt, metin içeriyor.

Kazanan: WEBM veya animasyonlu WEBP — kroma sorununa dikkat.

Bu senaryoda kroma altörnekleme gerçek bir sorun olabilir. Video kodekleri renk bilgisini yarı çözünürlükte saklar ve bu, keskin renkli metin kenarlarında bulanıklık yaratır. Küçük punto arayüz metinleri okunmaz hâle gelebilir.

İki çözüm var:

1. Yüksek çözünürlük kullanın. Metin yeterince büyük pikselde ise kroma yumuşaması fark edilmez. Ekran kaydını orijinal çözünürlüğünde tutun.

2. WEBP kullanın. WEBP tam renk çözünürlüğü sağlar, kroma altörnekleme uygulamaz. Metin keskin kalır. Dosya videodan büyük olur ama okunabilirlik kritikse buna değer.

Bazı video kodlayıcıları 4:4:4 profilini destekler (tam kroma çözünürlüğü). Varsa kullanın ama tarayıcı desteğini test edin.

Senaryo 4: E-posta bülteni

Kazanan: GIF — dönüştürmeyin.

E-posta istemcilerinin neredeyse hiçbiri video oynatmaz. WEBP ve APNG desteği de zayıftır.

GIF'i olduğu gibi bırakın ama boyutunu optimize edin: süreyi kısaltın (2-3 saniye), çözünürlüğü düşürün (300-400 px), kare hızını azaltın (10 fps), gerekirse renk sayısını 128'e indirin.

Ve önemli bir not: bazı e-posta istemcileri (özellikle bazı Outlook sürümleri) GIF'in sadece ilk karesini gösterir. İlk kareyi tek başına anlamlı olacak şekilde tasarlayın.

Senaryo 5: Blog yazısına adım adım gösterim

Bir işlemin nasıl yapıldığını gösteren kısa animasyon.

Kazanan: MP4/WEBM video — ama kullanıcı kontrolü düşünün.

Bu senaryoda bir kullanıcı deneyimi tercihi var. Otomatik oynayan bir animasyon, kullanıcı henüz metni okurken dikkat dağıtabilir ve tekrar tekrar döngüye girmesi rahatsız edici olabilir.

Alternatif: controls özniteliğiyle kullanıcıya oynatma kontrolü verin ve autoplay kullanmayın. Kullanıcı hazır olduğunda başlatır, duraklatabilir, geri sarabilir.

Uzun veya bilgi yoğun animasyonlarda bu genellikle daha iyi bir tercih olur. Kısa, dekoratif animasyonlarda otomatik oynatma uygundur.

Senaryo 6: Toplu site optimizasyonu

Sitenizde onlarca GIF var, hepsini dönüştüreceksiniz.

Kazanan: WEBM + MP4, sistematik yaklaşımla.

Sıralama:

1. Envanter çıkarın. Hangi GIF'ler nerede, boyutları ne? En büyük dosyalardan başlayın; kazanç orantılıdır.

2. Saydamlık gerektirenleri ayırın. Bunlar WEBP'ye gitmeli, videoya değil.

3. Video hedefleri için ikili üretin. WEBM + MP4.

4. HTML'i güncelleyin. <img src="x.gif"> etiketlerini <video> bloklarına çevirin. poster özniteliğini ekleyin.

5. Ölçün. Sayfa hızı araçlarıyla önce-sonra karşılaştırması yapın. Fark genellikle hemen görülür.

6. GIF'leri hemen silmeyin. Birkaç hafta saklayın; bir sorun fark ederseniz geri dönebilmelisiniz. Ayrıca e-posta bültenlerinde hâlâ ihtiyaç duyabilirsiniz.

Kalite ayarları

Hangi formatı seçerseniz seçin, ayarlar önemli:

MP4/WEBM için: CRF (sabit kalite faktörü) kullanın. H.264 için 18-23, VP9 için 28-33 aralığı yaygındır (düşük değer daha iyi kalite). GIF kaynaklı videolarda kaynak zaten basit olduğu için daha yüksek kalite ayarları da makul boyutlarda kalır.

WEBP için: Kalite değeri 75-90 arası çoğu içerik için iyi bir dengedir. Kayıpsız mod da vardır ama dosya belirgin biçimde büyür.

Ortak: Çözünürlüğü artırmayın. GIF'iniz 400 piksel genişse, videoyu 800 piksel yapmak detay eklemez, sadece dosyayı büyütür.

Karar özeti

Üç soruyla karar verin:

1. Saydamlık gerekiyor mu? Evet → animasyonlu WEBP (veya kayıpsız gerekiyorsa APNG).

2. E-posta veya eski forum ortamı mı? Evet → GIF olarak bırakın, sadece optimize edin.

3. Diğer her durum → WEBM + MP4 birlikte. Tek dosya seçilecekse MP4.

Ek not: keskin metin içeren ekran kayıtlarında video formatlarının kroma altörneklemesi okunabilirliği düşürebilir. Bu durumda çözünürlüğü yüksek tutun veya WEBP'ye geçin.