WebP ve WebM Formatları: Web Medya Sıkıştırma Rehberi

Modern web sitelerinde yüklenen toplam bayt miktarının büyük kısmını görseller ve videolar oluşturur. Eski nesil JPEG/PNG formatları ve ağır MP4/GIF video dosyaları; mobil ağlarda bant genişliğini tüketir, sunucu maliyetlerini artırır ve Google Core Web Vitals metriği olan LCP (Largest Contentful Paint) skorunu doğrudan aşağı çeker.

Google tarafından açık kaynaklı olarak geliştirilen WebP (görsel) ve WebM (video) formatları, görsel kalitesinden ödün vermeden dosya boyutlarını %30 ila %70 oranında küçülterek sayfa açılış hızını milisaniyeler seviyesine indirir.

---

1. WebP ve WebM’in Teknik Mimarisi

[Orijinal Ağır PNG: 2.4 MB]   ──(WebP Lossy Q=80)──>   [WebP: 210 KB (%91 Boyut Tasarrufu)]
[Ağır GIF Animasyon: 8.5 MB]  ──(WebM VP9 Dönüşümü)──> [WebM: 650 KB (%92 Boyut Tasarrufu)]

Medya Türü	Eski Format	Yeni Nesil Format	Sıkıştırma Kazancı	Tarayıcı Desteği
Fotoğraf / Görsel	JPEG / PNG	WebP (ve AVIF)	%30 - %80 Daha Küçük	%97+ (Tüm Modern Tarayıcılar)
Arka Plan Videosu	MP4 (H.264)	WebM (VP9 / AV1)	%40 - %60 Daha Küçük	%96+
Kısa Animasyon	GIF (256 Renk)	WebM / WebP Animasyon	%80 - %95 Daha Küçük	%98+

---

2. Node.js sharp ile Toplu WebP Dönüşümü

Node.js ortamında binlerce görseli otomatik olarak WebP’ye dönüştüren ve meta verilerini optimize eden betik:

import sharp from 'sharp';
import fs from 'fs';
import path from 'path';

async function convertToWebP(inputPath, outputPath) {
  await sharp(inputPath)
    .webp({ quality: 82, effort: 6 })
    .toFile(outputPath);
  
  const oldSize = fs.statSync(inputPath).size;
  const newSize = fs.statSync(outputPath).size;
  console.log(`Dönüşüm Tamamlandı: ${Math.round((oldSize - newSize) / oldSize * 100)}% tasarruf.`);
}

---

3. HTML5 <video> Etiketinde WebM ve MP4 Fallback Mimarisi

Arka plan videolarını en yüksek performansla sunmak için modern WebM dosyasını ilk kaynak olarak tanımlayın:

<video autoplay loop muted playsinline width="1280" height="720" poster="/images/video-poster.webp">
  <!-- 1. Öncelik: En hafif WebM formatı -->
  <source src="/videos/hero-bg.webm" type="video/webm; codecs=vp9,opus">
  
  <!-- 2. Öncelik: Eski tarayıcılar için MP4 fallback -->
  <source src="/videos/hero-bg.mp4" type="video/mp4">
  
  Tarayıcınız video etiketini desteklemiyor.
</video>

Kritik Kural: Mobilde videoların otomatik oynatılabilmesi için muted ve playsinline nitelikleri zorunludur.

---

4. WebP/WebM Dönüşümünde Kaçınılması Gereken 3 Hata

1. Aşırı Sıkıştırma ile Pikselleşme Yaratmak: Kalite (quality) değerini %60’ın altına düşürmek ürün fotoğraflarında bulanıklığa yol açar; ideal denge %80 - %85 aralığıdır.
2. GIF Formatında Israr Etmek: GIF dosyaları sıkıştırma algoritması barındırmaz ve 5-10 MB boyutlara ulaşabilir. GIF yerine her zaman sessiz döngülü WebM/MP4 kullanılmalıdır.
3. Boyut Belirtmemek (width & height): Video ve görsel etiketlerine boyut verilmediğinde yaşanan CLS düzen kaymalarını önleyin.

---

Sıkça Sorulan Sorular

WebP yerine AVIF mi tercih edilmelidir?

AVIF WebP’den de %15-20 daha yüksek sıkıştırma sunar; ancak kodlama süresi (encoding CPU) daha uzundur. İdeal mimaride <picture> etiketiyle en üste AVIF, fallback olarak WebP sunulur.

FFMPEG ile MP4 nasıl WebM’e dönüştürülür?

Terminalde ffmpeg -i girdi.mp4 -c:v libvpx-vp9 -b:v 1M -c:a libopus cikti.webm komutu ile yüksek kaliteli WebM çıktısı alınabilir.

---

Stratejik Sonuç

WebP ve WebM formatlarına geçiş, web sitenizin yüklenme hızını iki katına çıkararak kullanıcı deneyimini ve arama motoru sıralamalarını güvenceye alır. Yüksek performanslı medya mimarileri için teknik SEO çözümlerimizi inceleyin.