WebP ve Görsel Optimizasyonu: Site Hızı için Kapsamlı Rehber
- Sezer DEMİR
- 2 gün önce
- 5 dakikada okunur
WebP Formatı Nedir?
⠀
WebP, Google'ın 2010 yılında geliştirdiği, web için tasarlanmış modern bir görsel formatıdır. Hem kayıplı (lossy) hem de kayıpsız (lossless) sıkıştırmayı destekler; ayrıca şeffaflık (alpha channel — alfa kanalı) ve animasyon özelliklerine sahiptir. Bu özellikler daha önce farklı formatlara — PNG, JPEG, GIF — dağılmış durumdaydı.
WebP'nin temel amacı, görsel kaliteyi korurken dosya boyutunu önemli ölçüde küçültmektir. Google'ın kendi karşılaştırma testlerine göre WebP, aynı kalitedeki JPEG görsellerine kıyasla ortalama yüzde 25-35 daha küçük dosya boyutu üretir. Kayıpsız sıkıştırmada ise PNG'ye kıyasla yüzde 26 daha küçük dosyalar elde edilir.
Web sayfalarındaki içeriğin büyük bölümünü görseller oluşturur. Görsellerin dosya boyutu azaldığında indirme süresi kısalır, sayfa daha hızlı yüklenir ve Core Web Vitals (temel web metrikleri) skorları iyileşir. Bu durum hem kullanıcı deneyimini hem de arama motoru sıralamalarını doğrudan etkiler.
⠀
⠀
JPEG ve PNG'ye Göre Avantajları
⠀
JPEG, fotoğraf gibi renkli ve ayrıntılı görseller için tasarlanmıştır; ancak şeffaflığı desteklemez ve yüksek sıkıştırma oranlarında görsel bozulma (artifact — yapıt) yaratır. PNG şeffaflığı destekler ve kayıpsız sıkıştırma sunar; bununla birlikte dosya boyutları JPEG'e kıyasla çok daha büyük olabilir.
WebP, bu iki formatın avantajlarını tek çatı altında sunar:
Format | Şeffaflık | Animasyon | Sıkıştırma
Format: JPEG | Şeffaflık: Hayır | Animasyon: Hayır | Sıkıştırma: Kayıplı
Format: PNG | Şeffaflık: Evet | Animasyon: Hayır | Sıkıştırma: Kayıpsız
Format: GIF | Şeffaflık: Evet (1 bit) | Animasyon: Evet | Sıkıştırma: Sınırlı
Format: WebP | Şeffaflık: Evet | Animasyon: Evet | Sıkıştırma: Her ikisi
⠀
Dosya boyutu açısından: 100 KB'lık bir JPEG görseli WebP formatında genellikle 65-75 KB aralığına düşer. Bir e-ticaret sayfasında 20 ürün görseli varsa bu, 500 KB ile 700 KB arasında değişen bir tasarruf anlamına gelir — ve bu tasarruf her sayfa yüklenişinde tekrarlanır.
⠀
⠀
AVIF Formatı ve Tarayıcı Desteği
⠀
AVIF (AV1 Image File Format), WebP'den de ileri bir sıkıştırma verimliliği sunan yeni nesil görsel formatıdır. AVIF, JPEG'e kıyasla yüzde 50'ye varan boyut küçültmesi sağlayabilir. Görsel kalitesi yüksek, dosya boyutu çok küçüktür.
Ancak AVIF'in zayıf yanı daha sınırlı tarayıcı desteğidir. 2025 itibarıyla Chrome, Firefox ve Edge AVIF'i desteklerken Safari 16+ ile kısmi destek sağlamaktadır. Kodlama (encoding — dönüştürme) işlemi de WebP'ye kıyasla belirgin biçimde daha yavaştır; bu durum büyük ölçekli ürün kataloglarında önemli bir kısıt oluşturabilir.
Pratik önerimiz: WebP'yi birincil modern format olarak kullanın, AVIF'i ise belirli yüksek öncelikli görseller için test edin. Her iki durumda da eski tarayıcılar için JPEG yedekleri hazır bulundurun.
⠀
⠀
Görsel Optimizasyonun Temel Adımları
⠀
1. Doğru Boyut
⠀
Görseli asla HTML veya CSS ile yeniden boyutlandırmayın. 2000 piksel genişliğinde bir görseli CSS ile 400 piksele sıkıştırmak, tarayıcının 2000 piksellik dosyayı indirip hafızada 400 piksele ölçeklendirmesi anlamına gelir. Fazladan veri indirilir ve gereksiz işlemci gücü harcanır.
Görseli, kullanılacağı alanda ihtiyaç duyulan boyuta yakın üretin. Mobil ve masaüstü için farklı boyutlar gerekiyorsa srcset kullanın (aşağıda açıklanmaktadır).
2. Sıkıştırma
⠀
Her görsel için sıkıştırma oranı dikkatli seçilmelidir. Fotoğraf kalitesinde görseller için WebP kayıplı sıkıştırmayla 75-85 kalite aralığı çoğunlukla gözle fark edilemeyen bir bozulma yaratır. Logo ve ikon gibi düz renkli görseller için kayıpsız sıkıştırma tercih edilmelidir.
3. Format Seçimi
⠀
Fotoğraf, ürün görseli, banner: WebP (kayıplı)
Logo, ikon, şema: WebP (kayıpsız) veya SVG
Animasyon: WebP animasyonu veya video (<video> etiketi GIF'ten çok daha verimlidir)
⠀
⠀
⠀
Alt Text ve SEO İlişkisi
⠀
Alt text (alternatif metin), bir görselin içeriğini metin olarak tanımlayan HTML niteliğidir. İki farklı amaç taşır: görsel yüklenemediğinde veya ekran okuyucu kullanan kullanıcılar sayfayı incelediğinde görselin içeriğini aktarmak ve arama motorlarına görselin konusunu bildirmek.
Google Görseller (Google Images) trafiğini artırmak ve sayfa içeriğini güçlendirmek için alt text'in açıklayıcı, odak kelimeyi doğal biçimde içeren ve 125 karakteri geçmeyen cümleler hâlinde yazılması önerilir.
Kötü örnek: alt="gorsel123.jpg"
İyi örnek: alt="Siyah deri çanta, kahverengi ahşap masa üzerinde"
Her görsele ayrı ve özgün bir alt text yazmak gerekir. Aynı metni birden fazla görselde tekrarlamak SEO açısından değersiz olduğu gibi kullanıcı deneyimini de olumsuz etkiler.
⠀
⠀
Srcset ile Responsive Görseller
⠀
srcset niteliği, tarayıcıya farklı ekran boyutları ve çözünürlükleri için farklı görsel seçenekleri sunar. Tarayıcı kullanıcının cihazına en uygun görseli seçer ve indirir.
<img src="urun-800.webp" srcset="urun-400.webp 400w, urun-800.webp 800w, urun-1200.webp 1200w" sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px" alt="Ürün adı ve açıklaması" loading="lazy" width="800" height="600" >
⠀
Bu yapıyla mobil cihazlar küçük dosyayı, masaüstü büyük dosyayı indirir. Retina ekranlar için 2x çözünürlük seçenekleri de eklenebilir. Sonuç: her cihazda gerekli kalitede görsel, gereksiz veri indirimi olmadan.
Sayfa hız optimizasyonunun en etkili bileşenlerinden biri budur; özellikle mobil kullanıcıların yoğun olduğu sitelerde.
⠀
⠀
E-Ticarette Ürün Görseli Optimizasyonu
⠀
E-ticaret sitelerinde görsel optimizasyonu iki nedenden kritiktir: ürün görselleri hem sayfanın en ağır kaynağıdır hem de dönüşüm oranını (conversion rate — satış oranı) doğrudan etkiler.
Pratikte dikkat edilmesi gerekenler:
Boyut standardı: Tüm ürün listeleme görsellerini aynı boyutta tutun (örneğin 800x800 piksel). Farklı boyutlardaki görseller hem görsel düzeni bozar hem de sıkıştırma optimizasyonunu zorlaştırır.
Beyaz arka plan ve WebP: Beyaz arka planlı ürün görselleri WebP kayıpsız sıkıştırmayla oldukça iyi sıkışır. Aynı zamanda farklı tema renklerine uyum sağlar.
Zoom (yakınlaştırma) görselleri: Ürün sayfalarında yakınlaştırma için 2000+ piksel görsel gerekebilir. Bu görsel yalnızca kullanıcı zoom'ladığında yüklenmelidir; sayfa açılırken değil.
Toplu optimizasyon: Binlerce ürün görseli barındıran kataloglarda manuel optimizasyon pratik değildir. Bu durumda otomatik optimizasyon araçları veya CDN (Content Delivery Network — içerik dağıtım ağı) düzeyinde dönüşüm tercih edilir.
Ürün sayfası SEO optimizasyonu ve görsel performansı birlikte ele aldığınızda sayfa hızı ve dönüşüm oranı aynı anda iyileşir.
⠀
⠀
Görsel Optimizasyon Araçları
⠀
Squoosh
⠀
Google'ın geliştirdiği tarayıcı tabanlı bir araçtır. WebP, AVIF ve diğer formatlara dönüşüm yapabilirsiniz; sıkıştırma öncesi ve sonrasını yan yana karşılaştırma imkânı sunar. Küçük hacimli işlemler için ücretsiz ve pratiktir.
TinyPNG / TinyJPEG
⠀
PNG ve JPEG görsellerini %70'e varan oranlarda sıkıştıran çevrimiçi hizmettir. API desteği sayesinde WordPress eklentileriyle entegre çalışabilir. Ücretsiz planda aylık 500 görsel limitine kadar işlem yapar.
ShortPixel
⠀
WordPress için en yaygın kullanılan görsel optimizasyon eklentilerinden biridir. Yükleme sırasında otomatik olarak WebP'ye dönüştürür, kayıplı ve kayıpsız sıkıştırma seçenekleri sunar ve CDN desteğiyle birlikte gelir.
Imagify
⠀
WP Rocket geliştiricileri tarafından hazırlanan bu eklenti, görselleri yüklendiği anda optimize eder. Üç sıkıştırma seviyesi (normal, agresif, ultra) sunar. AVIF desteği de eklenmiş durumdadır.
Cloudinary ve imgix
⠀
Büyük ölçekli e-ticaret ve medya siteleri için tercih edilen CDN tabanlı görsel yönetim platformlarıdır. URL parametreleriyle gerçek zamanlı format dönüşümü ve boyutlandırma yapılabilir. Yönetim maliyeti yüksek olmakla birlikte sunduğu otomasyon geniş kataloglarda büyük fark yaratır.
⠀
⠀
WebP için <picture> Etiketi
⠀
Eski tarayıcı desteği önemliyse <picture> etiketi ile birden fazla kaynak tanımlanabilir. Tarayıcı desteklediği ilk formatı kullanır:
<picture> <source srcset="urun.avif" type="image/avif"> <source srcset="urun.webp" type="image/webp"> <img src="urun.jpg" alt="Ürün açıklaması" width="800" height="600"> </picture>
⠀
Bu yapıda AVIF'i destekleyen tarayıcılar AVIF'i, WebP'yi destekleyenler WebP'yi, eski tarayıcılar ise JPEG'i indirir. Destek kontrolü otomatik olarak yapılır.
⠀
⠀
Sık Sorulan Sorular
⠀
WebP'ye geçmek için tüm görselleri manuel dönüştürmek gerekiyor mu?
Hayır. ShortPixel veya Imagify gibi WordPress eklentileri mevcut görselleri toplu hâlde WebP'ye dönüştürür ve yeni yüklemeleri otomatik olarak işler. E-ticaret platformlarında ise Cloudinary gibi CDN tabanlı çözümler orijinal görsele dokunmadan gerçek zamanlı dönüşüm yapar.
JPEG kaldırılmalı mı, yoksa her iki format mı kullanılmalı?
Tam geçiş için <picture> etiketi en güvenli yoldur: modern tarayıcılar WebP alır, eski tarayıcılar JPEG. Tamamen modern tarayıcılara odaklanıyorsanız doğrudan WebP kullanmak yeterlidir.
Görsel boyutu küçülünce kalite gözle görülür şekilde düşer mi?
Kayıplı sıkıştırmada kalite kaybı sıkıştırma oranına bağlıdır. WebP 80-85 kalite ayarıyla üretilen görseller çoğu durumda JPEG 90 kalitesiyle üretilenden ayırt edilemez; dosya boyutu ise çok daha küçüktür. Test etmek için Squoosh'un yan yana karşılaştırma ekranını kullanabilirsiniz.
E-ticarette görsel optimizasyonu dönüşüm oranını etkiler mi?
Doğrudan etkiler. Yavaş yüklenen sayfalar sepet terk oranını artırır. Aynı zamanda optimize edilmiş görseller, Blakfy'ın e-ticaret SEO süreçlerinde düzenli olarak üzerinde durduğumuz, hem hız hem dönüşüm açısından yüksek etkili bir konudur.
SVG ne zaman tercih edilmeli?
Logo, ikon, basit illüstrasyon ve grafik gibi geometrik, düz renkli görseller için SVG (Scalable Vector Graphics — ölçeklenebilir vektör grafik) tercih edilmelidir. SVG dosyaları piksel tabanlı görsellerden çok daha küçüktür ve sonsuz büyütüldüğünde pikselleşme olmaz.
