Görsel Optimizasyonu: Kaliteden Ödün Vermeden WebP Formatına Geçiş

İnternet dünyasında ilk izlenim her şeydir. Kullanıcı sitene girdiğinde onu etkileyici, yüksek çözünürlüklü görsellerle karşılamak istersin, çok doğal. Ancak o harika görselleri akıllı telefonundan çektiğin gibi ya da stok sitelerinden indirdiğin 4K çözünürlükteki ham PNG veya JPG halleriyle siteye yüklüyorsan, geçmiş olsun. Ziyaretçin o görselin yüklenmesini beklerken çoktan sıkılıp rakip siteye kaçacaktır.

2026 yılı web standartlarında Core Web Vitals metrikleri (özellikle LCP – En Büyük İçeriksel Boyama) görseller konusunda acımasızdır. Neyse ki elimizde hem pikselleri net tutan hem de dosya boyutunu tüy gibi hafifleten sihirli bir format var: WebP.

Peki, sitenin tasarımını bozmadan, renkleri soldurmadan ve bulanıklık yaratmadan WebP formatına nasıl geçersin? Gelin, görsel optimizasyonunun matematiksel ve pratik şifrelerini çözelim.

Neden WebP? (JPG ve PNG Neden Sınıfta Kaldı?)

Geleneksel olarak internette iki format hakimiyet kurmuştu: Saydam arka planlar için PNG, zengin renkli fotoğraflar için JPG. Ancak bu iki format da internetin emekleme dönemlerine ait eski teknolojilerdir.

Google tarafından geliştirilen WebP, hem PNG’nin transparanlık (saydamlık) yeteneğini hem de JPG’nin renk zenginliğini tek bir potada eritir. Üstelik bunu yaparken çok daha gelişmiş tahmin algoritmaları kullanır.

• Kayıpsız (Lossless) Sıkıştırma: WebP kayıpsız sıkıştırmada PNG’ye göre %26 daha küçük dosya boyutu sunur.
• Kayıplı (Lossy) Sıkıştırma: WebP kayıplı sıkıştırmada ise JPG’ye göre aynı görsel kalitesinde %25 ila %34 daha hafiftir.

Bu ne demek şef? Sitenizde toplamda 100 MB yer kaplayan görselleri WebP’ye çevirdiğinde kalitede hiçbir gözle görülür fark olmadan bu boyut 30 MB’a düşer. Sunucunun bant genişliği rahatlar, site hızlanır, Google PageSpeed skorları yeşile boyanır.

Adım Adım Kaliteyi Korumayarak Görsel Optimizasyonu

Görselleri sadece WebP’ye çevirmek yetmez. Kusursuz bir görsel optimizasyonu süreci şu 3 aşamadan oluşur:

1. Doğru Boyutlandırma (Resizing)

En çok yapılan hata, tarayıcıda sadece 400×400 piksel boyutunda görünecek bir alan için sunucuya 4000×4000 piksel boyutunda görsel yüklemektir. Tarayıcı o devasa resmi indirir ve CSS ile küçülterek ekrana basar. Bu, işlemciye ve internet hattına gereksiz yüktür. Görseli siteye yüklemeden önce tam olarak görüntüleneceği maksimum boyuta getirmelisin.

2. Squoosh ile Akıllı Dönüşüm

Görsellerini tek tek ve sıfır kalite kaybıyla WebP yapmak istiyorsan, Google’ın açık kaynaklı harika bir projesi olan Squoosh.app sitesini mutlaka kullanmalısın.

• Görselini sürükleyip bırak.
• Çıktı formatı olarak WebP seç.
• “Quality” (Kalite) sürgüsünü 75-80 arasına getir.
• Ekranda beliren canlı karşılaştırma çizgisini sağa sola kaydırarak gör görselde bir bozulma var mı diye bak. Göremezsin, çünkü algoritma insan gözünün ayırt edemeyeceği detayları kırpar. Sonuç: %80 boyut tasarrufu!

WordPress Sitelerde Otomatik WebP Geçişi Nasıl Yapılır?

Eğer sitende yüzlerce eski görsel varsa, bunları tek tek bilgisayara indirip WebP’ye çevirmek tam bir amelelik olur şef. WordPress ekosisteminde bu işi arka planda otomatik halleden harika eklentiler var.

LiteSpeed Cache ile Görsel Optimizasyonu

Daha önceki hız rehberimizde bahsettiğimiz gibi, LiteSpeed Cache sadece bir önbellek eklentisi değildir.

1. LiteSpeed Cache > Image Optimization menüsüne git.
2. Settings sekmesinden Create WebP Versions ve Image WebP Replacement seçeneklerini ON konumuna getir.
3. Eklenti, kütüphanendeki tüm görselleri parça parça kendi bulut sunucularına gönderir, kalitesini bozmadan WebP yapar ve orijinal görseli silmeden, tarayıcı destekliyorsa otomatik olarak WebP sürümünü ziyaretçiye gösterir.

Alternatif Eklentiler (Imagify / Converter for Media)

Eğer sunucun LiteSpeed değilse, Converter for Media eklentisi harika bir alternatiftir. Eklentiyi kurup taramayı başlattığında .htaccess kodları yardımıyla tüm görsellerini saniyeler içinde arka planda WebP’ye dönüştürür.

Bir Adım Sonrası: 2026’nın Parlayan Yıldızı AVIF

Madem geleceğe oynuyoruz, o zaman WebP’nin de bir adım ötesinden bahsetmemiz gerekir: AVIF.

Alliance for Open Media tarafından geliştirilen bu yeni nesil format, WebP’den bile %30 daha yüksek sıkıştırma yeteneğine sahiptir. Netflix, Google ve Apple gibi devler şu an tüm sistemlerini AVIF formatına geçiriyor. 2026 yılı itibarıyla modern web tarayıcılarının neredeyse tamamı AVIF formatını tam olarak destekliyor. Eğer maksimum performans istiyorsan, kullandığın optimizasyon eklentilerinde “AVIF desteği” varsa bunu da mutlaka aktif etmeni öneririm.

💡 Teknik İpucu (Expert Box)

Bunu biliyor muydunuz? Bazı çok eski işletim sistemleri ve nadir tarayıcılar hala WebP formatını okuyamaz. Eğer sitenizde saf kodlama (HTML/CSS) kullanıyorsanız ve görsellerin her tarayıcıda kusursuz görünmesini garanti etmek istiyorsanız HTML5 ile gelen <picture> etiketini kullanmalısınız. Aşağıdaki kod yapısı sayesinde tarayıcı modern ise tüy gibi hafif olan WebP’yi indirir, eğer çok eskiyse otomatik olarak yedekte bekleyen klasik JPG’yi yükler:

<picture>
  <source srcset="gorsel.webp" type="image/webp">
  <img src="gorsel.jpg" alt="Siteportal Optimizasyon Rehberi" width="800" height="600" loading="lazy">
</picture>

<picture>
  <source srcset="gorsel.webp" type="image/webp">
  <img src="gorsel.jpg" alt="Siteportal Optimizasyon Rehberi" width="800" height="600" loading="lazy">
</picture>

Sonuç: Kilolardan Kurtulun, Sitenizi Uçurun

Görsel optimizasyonu, bir web sitesinin hızını artırmanın en maliyetsiz ve en etkili yoludur. Sunucu değiştirmeden, binlerce lira harcamadan sadece görsellerini WebP formatına geçirerek sitenin açılış hızını yarı yarıya düşürebilirsin. Unutma, hızlı açılan bir site hem Google botlarının hem de ziyaretçinin gözünde her zaman bir adım öndedir.

Sen sitendeki görselleri optimize etmek için hangi yöntemi kullanıyorsun? WebP’ye geçtikten sonra hız skorlarında nasıl bir değişim fark ettin? Yorumlara yaz, görsellerini ve PageSpeed raporunu birlikte inceleyelim!