Görseli WebP'ye Dönüştürme (ve Bunu Neden Yapmalısınız)

Google PageSpeed Insights'ta bir test çalıştırıp "Görüntüleri yeni nesil biçimlerde yayınlayın"uyarısını aldıysanız, Google tam olarak şunu istiyor: JPG ve PNG görsellerinizi WebP'ye çevirmenizi. Bu, bir sitenin performansında en büyük etkiyi yaratan müdahalelerden biri — ve uygulaması en kolay olanlardan da.

Neden WebP'ye dönüştürmeli?

WebP, Google tarafından geliştirilip 2010'da yayımlanan, özellikle web için tasarlanmış bir format. JPG ve PNG'den daha modern sıkıştırma algoritmaları kullanır ve aynı görsel kalitede şunları sunar:

• JPG'den %25–35 daha az dosya boyutu — kayıplı (lossy) modda
• PNG'den %20–30 daha az dosya boyutu — kayıpsız (lossless) modda
• Saydamlık desteği (alfa kanalı) — JPG'de bulunmayan bir özellik
• Animasyon desteği — PNG'nin doğal olarak sunmadığı bir özellik

Uygulamada etki gerçek. Her biri 300 KB'lık 20 JPG fotoğraftan oluşan bir e-ticaret ürün galerisi (toplam 6 MB), aynı görsel kalitede WebP ile 4 MB'a inebilir — sayfa ağırlığında %33 azalma. Google için bu, daha hızlı LCP, daha iyi PageSpeed puanı ve sıralamada olası bir iyileşme demek.

WebP ne zaman kullanılmamalı

Modern web için en iyi format olmasına rağmen WebP'nin henüz doğru seçim olmadığı durumlar var:

• E-posta pazarlaması: Outlook ve Apple Mail gibi e-posta istemcilerinin WebP desteği tutarsız. HTML e-postalarda JPG ve PNG hâlâ daha güvenli.
• Matbaa baskısı: matbaalar ve geleneksel baskı yazılımları WebP ile çalışmaz. Baskıya gidecek dosyalarda yüksek kaliteli JPG ya da PNG kullanın.
• Format kısıtı olan platformlar: YouTube kapak görseli yüklemede WebP kabul etmiyor (JPG ve PNG kabul ediyor). Bazı eski sistemlerin formları JPG istiyor. Dönüştürmeden önce kabul edilen formatı kontrol edin.
• Herkesin bilgisayarında açabilmesi gereken dosyalar: indirme bağlantısına tıklayıp dosyayı Windows'un varsayılan görüntüleyicisinde açmaya çalışan kullanıcılar, sistemin eski sürümlerinde WebP ile sorun yaşayabilir.

Yöntem 1 — Çevrimiçi dönüştürme (en hızlısı, kurulum yok)

Tek tük görsel dönüştürmek için — ya da hiçbir şey yapılandırmadan hızlı bir sonuç gerektiğinde — en kısa yol çevrimiçi bir dönüştürücü. ImageTools'un Dönüştür aracı, JPG, PNG ve diğer formatları dosyaları dış sunuculara göndermeden doğrudan tarayıcıda WebP'ye çevirir.

1. Dönüştür aracını açın.
2. Görselleri seçin ya da yükleme alanına sürükleyin.
3. Çıktı formatı olarak WebP'yi seçin.
4. Dönüştürülen görselleri tek tek ya da birden çoksa ZIP olarak indirin.

Yöntem 2 — WordPress (tüm site için otomatik)

WordPress sitelerinde en verimli yaklaşım, WebP'yi otomatik dönüştürüp sunan bir eklenti kullanmaktır — her görseli elle yeniden işlemenize gerek kalmaz.

WordPress 6.1+ (yerleşik dönüştürme)

6.1 sürümünden itibaren WordPress, sunucu şu kütüphaneyi destekliyorsa yükleme sırasında görselleri otomatik olarak WebP'ye dönüştürüyor: libwebp (PHP 8 ve üzeri çalıştıran modern sunucuların çoğunda var). Hiçbir şey yapmanıza gerek yok — WordPress görsellerin WebP sürümlerini üretir ve her tarayıcıya doğru formatı otomatik sunar.

Etkin olup olmadığını görmek için Ayarlar → Medya bölümüne gidip WebP dönüştürme seçeneğini arayın. Seçenek yoksa sunucuda destek yok demektir — bir eklenti düşünün.

Eklentiyle (eski sürümler ya da daha fazla denetim için)

WordPress'te WebP dönüştürme için en çok kullanılan eklentiler:

• ShortPixel Image Optimizer — yükleme sırasında yeni görselleri dönüştürür ve mevcut tüm kütüphaneyi yeniden işleme seçeneği sunar. Ayda 100 görsele kadar ücretsiz.
• Imagify — yalın arayüz, otomatik dönüştürme ve toplu optimizasyon seçeneği. Ücretsiz planı var.
• WebP Express — doğrudan WebP'ye odaklanmış eklenti; dönüştürmeyi yapar ve sunucu kurallarını otomatik yapılandırır.

Yöntem 3 — cwebp ile komut satırı (geliştiriciler için)

Google, terminal üzerinden dönüştürme için WebP'nin resmî kodlayıcısı olan cwebp aracını ücretsiz dağıtıyor. Bir sunucuda ya da derleme hattında büyük görsel yığınlarını dönüştürmenin en hızlı yolu budur.

Kurulum

# Ubuntu / Debian
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

# Windows — ikili dosyayı şu adresten indirin: https://developers.google.com/speed/webp/download

Temel dönüştürme

# Bir JPG dosyasını 80 kalitesiyle WebP'ye dönüştür
cwebp -q 80 fotograf.jpg -o fotograf.webp

# PNG'yi kayıpsız WebP'ye dönüştür
cwebp -lossless logo.png -o logo.webp

# Bir klasördeki tüm JPG dosyalarını dönüştür (Bash)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

-q parametresi kaliteyi denetler (0–100). Web için 75 ile 85 arasındaki değerler, görsel kalite ile dosya boyutu arasında en iyi dengeyi sunar. Kayıpsız sıkıştırma gerektiren görsellerde (logolar, yazı içeren ekran görüntüleri) -lossless kullanın.

Yöntem 4 — sharp ile Node.js (derleme hatları için)

Node.js kullanan projelerde — Next.js, Gatsby, Nuxt siteleri ya da herhangi bir otomatik derleme — hat içinde WebP dönüştürmenin en verimli seçeneği sharp kütüphanesidir:

// npm install sharp

const sharp = require('sharp');

// JPG'yi 80 kalitesiyle WebP'ye dönüştür
sharp('fotograf.jpg')
  .webp({ quality: 80 })
  .toFile('fotograf.webp');

// PNG'yi kayıpsız WebP'ye dönüştür
sharp('logo.png')
  .webp({ lossless: true })
  .toFile('logo.webp');

// Bir klasördeki tüm dosyaları dönüştür
const fs = require('fs');
const path = require('path');

fs.readdirSync('./resimler')
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
  .forEach(file => {
    const input = path.join('./resimler', file);
    const output = path.join('./resimler', file.replace(/\.[^.]+$/, '.webp'));
    sharp(input).webp({ quality: 80 }).toFile(output);
  });

sharp, yerel libvips kütüphanesini kullanır ve saf JavaScript çözümlerinden belirgin biçimde daha hızlıdır — statik sitelerin derlemesi sırasında WebP sürümleri üretmek için ideal.

Eski tarayıcılar için yedek çözümle WebP nasıl uygulanır

2026'da WebP uyumluluğu %97'nin üzerinde olsa da, yedek çözümün gerektiği durumlar hâlâ olabilir — IE11 kullanan kurumsal sistemler, çok eski cihazlar ya da yalnızca azami uyum garantisi için.

Doğru çözüm, HTML'deki <picture>etiketidir; bu etiket, görsel için alternatif kaynakları tercih sırasına göre bildirmenizi sağlar:

<!-- Tarayıcı destekliyorsa WebP, desteklemiyorsa JPG kullanır -->
<picture>
  <source srcset="fotograf.webp" type="image/webp">
  <img src="fotograf.jpg" alt="Fotoğraf açıklaması" width="800" height="600">
</picture>

<!-- Retina ekranlar için birden çok boyutla -->
<picture>
  <source
    srcset="fotograf-800.webp 800w, fotograf-1600.webp 1600w"
    type="image/webp">
  <source
    srcset="fotograf-800.jpg 800w, fotograf-1600.jpg 1600w"
    type="image/jpeg">
  <img src="fotograf-800.jpg" alt="Fotoğraf açıklaması"
    width="800" height="600" loading="lazy">
</picture>

Tarayıcı kaynakları bildirildikleri sırayla değerlendirir: WebP destekliyorsa <source> öğesini type="image/webp" ile kullanır. Desteklemiyorsa <img> içindeki JPG'ye düşer. Sondaki <img> etiketi zorunludur — alt değerini, boyutları ve varsayılan davranışı tanımlayan odur.

Sunucuyu WebP'yi otomatik sunacak şekilde yapılandırma (Apache)

<picture> etiketine alternatif olarak sunucuyu, tarayıcının WebP kabul edip etmediğini algılayıp doğru sürümü otomatik sunacak şekilde yapılandırabilirsiniz. Apache'de .htaccess dosyasına şunu ekleyin:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # .webp varsa ve tarayıcı kabul ediyorsa onu sun
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Bu yapılandırmayla, yalnızca .webp dosyalarını orijinallerin yanında aynı klasörde bulundurmanız yeterli. Apache, tarayıcının WebP kabul edip etmediğini Accept başlığından anlar ve HTML'de hiçbir değişiklik yapmadan doğru sürümü sunar.

Sonucu PageSpeed'te doğrulama

WebP'yi uyguladıktan sonra sitenizin adresinde Google PageSpeed Insights'ı (pagespeed.web.dev) çalıştırın. "Görüntüleri yeni nesil biçimlerde yayınlayın" uyarısı kaybolmalı ya da belirgin biçimde azalmalı. Fırsatlar panelinde, henüz dönüştürülmemiş her görsel için tahmini KB kazancını görürsünüz.

Başka bir kontrol yolu: Chrome DevTools'u (F12) açın, Network sekmesine gidin, "Img" filtresini uygulayın ve yüklenen görsellerin "Type" sütununa bakın. Orada webpgörünüyorsa dönüşüm çalışıyor demektir.

Dönüştürmede hangi kalite düzeyi kullanılmalı?

WebP kalitesi JPG ile aynı mantığı izler: yüksek değerler daha çok ayrıntı korur ama daha büyük dosya üretir. Fark şu: aynı görsel kalite için WebP genelde eşdeğer JPG'nin 10–15 puan altında bir kalite değeri kullanır.

Sıkça sorulan sorular