WebP Nedir? Görselleri WebP'ye Çevirme ve Site Hızına Etkisi

WebP, Google'ın web için geliştirdiği, hem kayıplı hem kayıpsız sıkıştırmayı, şeffaflığı ve animasyonu tek dosya biçiminde destekleyen bir görsel formatıdır. Aynı görsel kalitede çoğu zaman JPEG ve PNG'den daha küçük dosya ürettiği için sayfaların daha az veri indirmesini ve daha hızlı açılmasını sağlar. Bugün tüm güncel tarayıcılar WebP'yi destekler; bu yüzden görsel ağırlıklı sitelerde ilk yapılacak hız iyileştirmelerinden biridir.

Bu rehberde WebP'nin teknik olarak ne sunduğunu, JPEG, PNG ve AVIF ile nasıl karşılaştırıldığını, eski tarayıcılar için geri dönüşlü nasıl kullanılacağını, görselleri WebP'ye çevirmenin farklı yollarını ve görsel SEO açısından dikkat edilmesi gereken noktaları adım adım anlatıyoruz.

WebP formatı neler sunar?

WebP tek bir sıkıştırma yöntemi değil, birkaç yeteneği bir araya getiren bir kapsayıcı biçimdir. Hangi modu seçtiğiniz, dosya boyutunu ve görsel kaliteyi doğrudan belirler.

Kayıplı WebP

Kayıplı mod, VP8 video kodlayıcısının tek kare sıkıştırma tekniğine dayanır. Gözün fark etmekte zorlandığı ayrıntıları atarak dosyayı küçültür. Fotoğraflar, ürün çekimleri ve kapak görselleri için uygun olan moddur ve JPEG'in doğrudan alternatifi sayılır. Kalite değeri 0 ile 100 arasında ayarlanır; değer düştükçe dosya küçülür, belli bir eşikten sonra bulanıklık ve blok izleri görünmeye başlar.

Kayıpsız WebP

Kayıpsız mod, görseldeki her pikseli birebir korur. Logolar, ekran görüntüleri, arayüz çizimleri, keskin kenarlı grafikler ve metin içeren görseller için daha uygundur. Bu mod PNG'nin alternatifidir ve aynı içerikte genellikle PNG'den daha küçük dosya üretir. Kayıpsız denince dosyanın her zaman küçük olacağını düşünmeyin; karmaşık bir fotoğrafı kayıpsız kaydetmek, kayıplı JPEG'den çok daha büyük bir dosya verebilir.

Şeffaflık (alfa kanalı)

WebP hem kayıplı hem kayıpsız modda şeffaf arka planı destekler. Bu, PNG'nin en güçlü yanlarından birini WebP'ye taşır: arka planı kaldırılmış bir ürün fotoğrafını kayıplı WebP olarak kaydedip şeffaflığı korumak mümkündür. JPEG ise şeffaflığı hiç desteklemez.

Animasyon

WebP, GIF gibi çok kareli animasyon da saklayabilir. GIF yalnızca 256 renkle sınırlıyken animasyonlu WebP tam renk ve alfa kanalı destekler, çoğu durumda da daha küçük dosya üretir. Yine de uzun ve ağır animasyonlar için kısa, sessiz bir MP4 veya WebM videosu genellikle daha verimli bir tercihtir.

WebP, JPEG, PNG ve AVIF karşılaştırması

Hangi formatın "en iyi" olduğu sorusunun tek bir cevabı yok; görselin türüne, hedef kitlenin tarayıcısına ve iş akışınıza göre değişir. Aşağıdaki tablo kararı hızlandırmak için genel bir çerçeve sunar.

Özellik	JPEG	PNG	WebP	AVIF
Sıkıştırma türü	Kayıplı	Kayıpsız	Kayıplı ve kayıpsız	Kayıplı ve kayıpsız
Şeffaflık	Yok	Var	Var	Var
Animasyon	Yok	Standart PNG'de yok	Var	Var
Fotoğrafta dosya boyutu	Referans	Genellikle çok büyük	Genellikle JPEG'den küçük	Çoğu zaman WebP'den de küçük
Kodlama hızı	Hızlı	Orta	Hızlı	Yavaş
Tarayıcı desteği	Evrensel	Evrensel	Tüm güncel tarayıcılar	Güncel tarayıcılar, eski sürümlerde boşluk var
En uygun kullanım	Geri dönüş görseli	Kayıpsız grafik, düzenleme kaynağı	Genel amaçlı web görseli	Ağır fotoğraf, büyük kapak görseli

Pratikte en sağlam yaklaşım şudur: WebP'yi varsayılan web formatınız yapın, büyük ve sayfanın ana görseli olan fotoğraflarda AVIF'i deneyin, JPEG veya PNG'yi yalnızca geri dönüş olarak tutun. Orijinal yüksek çözünürlüklü dosyaları ise düzenleme kaynağı olarak arşivde saklayın; WebP'den tekrar tekrar dışa aktarmak, her seferinde kaliteyi biraz daha düşürür.

Tarayıcı desteği: WebP artık güvenli mi?

Evet. Chrome, Edge, Firefox, Opera ve Safari'nin güncel sürümleri WebP'yi destekler. Uzun süre eksik kalan halka Safari'ydi; Apple, WebP desteğini Safari 14 ile ekledi ve eski macOS sürümlerinde bazı kısıtlar uzun süre devam etti. Bugün ziyaretçilerinizin çok küçük bir kısmı WebP'yi açamayan bir tarayıcı kullanıyor olabilir.

Bu küçük kitle için iki seçenek vardır: ya hiç önemsemezsiniz ya da geri dönüş tanımlarsınız. Geri dönüş tanımlamak birkaç satırlık bir iştir ve kimsenin kırık görsel görmemesini garanti eder. Kendi ziyaretçi profilinizi görmek isterseniz GA4'te tarayıcı ve işletim sistemi kırılımına bakabilirsiniz; raporlara nasıl ulaşacağınızı Google Analytics rehberimizde anlattık.

picture ve srcset ile geri dönüşlü kullanım

HTML'deki picture öğesi, tarayıcıya birden fazla format önerip desteklediği ilkini seçmesini sağlar. Tarayıcı source etiketlerini yukarıdan aşağıya okur, türünü tanıdığı ilk kaynağı kullanır; hiçbirini tanımazsa en alttaki img etiketine düşer.

<picture>
  <source type="image/avif"
          srcset="/img/kapak-800.avif 800w, /img/kapak-1600.avif 1600w"
          sizes="(max-width: 768px) 100vw, 800px">
  <source type="image/webp"
          srcset="/img/kapak-800.webp 800w, /img/kapak-1600.webp 1600w"
          sizes="(max-width: 768px) 100vw, 800px">
  <img src="/img/kapak-800.jpg"
       srcset="/img/kapak-800.jpg 800w, /img/kapak-1600.jpg 1600w"
       sizes="(max-width: 768px) 100vw, 800px"
       width="800" height="450"
       alt="Ahşap masa üzerinde açık dizüstü bilgisayar ve SEO raporu">
</picture>

Bu örnekte dikkat edilmesi gereken birkaç nokta var:

• srcset ve sizes birlikte çalışır. srcset elinizdeki genişlikleri listeler, sizes görselin ekranda kaplayacağı alanı tarif eder. Tarayıcı bu iki bilgiyle ekran genişliğine ve piksel yoğunluğuna uygun dosyayı seçer; mobil kullanıcı 1600 piksellik dosyayı boşuna indirmez.
• alt, width ve height yalnızca img etiketine yazılır. source etiketleri sadece alternatif dosya önerir; erişilebilirlik ve boyut bilgisi her durumda img üzerinden okunur.
• Sıralama önemlidir. En verimli format en üste yazılır. AVIF kullanmıyorsanız o satırı silip yalnızca WebP ve JPEG ile devam edebilirsiniz.

Ziyaretçilerinizin neredeyse tamamı güncel tarayıcı kullanıyorsa doğrudan img src="gorsel.webp" yazmak da kabul edilebilir bir sadeleştirmedir. Ancak picture yapısı, ileride AVIF eklemek istediğinizde kodu yeniden yazmanıza gerek bırakmaz.

Görselleri WebP'ye çevirmenin yolları

Dönüştürme yöntemi, sitenizin altyapısına ve kaç görselle uğraştığınıza bağlıdır. Tek seferlik birkaç görsel için masaüstü araç yeterliyken binlerce ürün görseli olan bir e-ticaret sitesinde otomatik bir çözüm gerekir.

1. cwebp ile komut satırından dönüştürme

Google'ın resmi WebP kütüphanesiyle birlikte gelen cwebp aracı, en kontrollü ve ücretsiz yöntemdir. Tek bir görseli dönüştürmek için:

cwebp -q 80 urun.jpg -o urun.webp

Kayıpsız dönüştürme için -lossless parametresi kullanılır:

cwebp -lossless logo.png -o logo.webp

Bir klasördeki tüm JPEG dosyalarını toplu dönüştürmek için basit bir kabuk döngüsü yeterlidir:

for f in *.jpg; do
  cwebp -q 80 "$f" -o "$(basename "$f" .jpg).webp"
done

Dönüştürmeden önce boyutlandırmayı da aynı adımda yapabilirsiniz. -resize 1600 0 parametresi görselin genişliğini 1600 piksele indirir, yüksekliği oranı koruyarak otomatik hesaplar. 4000 piksellik bir kamera fotoğrafını olduğu gibi WebP'ye çevirmek, formatın kazandırdığından fazlasını boyut tarafında kaybettirir.

2. Görsel düzenleme programları

Güncel görsel düzenleme ve tasarım programlarının çoğu WebP olarak dışa aktarmayı destekler. Dışa aktarma penceresinde kalite ayarını ve kayıplı/kayıpsız seçimini görebilirsiniz. Az sayıda, özenle hazırlanan görsel için bu yol yeterlidir. Toplu işlemde ise insan hatası riski arttığı için komut satırı veya otomatik yöntemler daha güvenlidir.

3. CMS eklentileri ve yerleşik dönüştürme

WordPress gibi içerik yönetim sistemlerinde, yüklenen görselleri otomatik olarak WebP'ye çeviren görsel optimizasyon eklentileri bulunur. Bu eklentilerin çoğu orijinal dosyayı saklar, WebP kopyasını üretir ve tarayıcı desteğine göre doğru dosyayı sunar. Seçerken şunlara bakın: mevcut medya kütüphanesini toplu dönüştürebiliyor mu, orijinali silmeden çalışıyor mu, sunucuyu mu yoksa harici bir hizmeti mi kullanıyor. Genel WordPress hız ve SEO ayarları için WordPress SEO rehberimize göz atabilirsiniz.

4. CDN veya görsel sunucusunda anlık dönüştürme

Pek çok CDN ve görsel işleme hizmeti, isteği yapan tarayıcının desteklediği formatı algılayıp görseli anlık olarak WebP veya AVIF'e çevirebilir. Bu yöntemde siteye JPEG yüklemeye devam edersiniz, dönüştürme ve önbellekleme ağ katmanında yapılır. Next.js gibi modern çatıların görsel bileşenleri de benzer biçimde çalışır. Avantajı, kaynak dosyalarla uğraşmamanızdır; dezavantajı ise ayarların doğru yapılmadığı durumlarda önbelleğin yanlış formatı farklı tarayıcılara sunabilmesidir. Bu yüzden sunucu, yanıtta tarayıcının kabul ettiği formata göre değişen içerik olduğunu doğru biçimde bildirmelidir.

Kalite ayarı önerileri

Kalite değeri için evrensel bir doğru yoktur; aynı değer bir görselde kusursuz, diğerinde bozuk görünebilir. Aşağıdaki aralıklar başlangıç noktası olarak işe yarar, son karar her zaman gözle kontrolle verilmelidir.

Görsel türü	Önerilen mod	Başlangıç kalitesi	Not
Fotoğraf, blog kapağı	Kayıplı	75-82	Gökyüzü ve düz renkli alanlarda bantlaşmaya bakın
Ürün fotoğrafı (e-ticaret)	Kayıplı	80-88	Doku ve renk doğruluğu satışı etkiler, biraz yüksek tutun
Küçük görsel, liste önizlemesi	Kayıplı	65-75	Küçük boyutta kusurlar zor fark edilir
Logo, ikon, arayüz	Kayıpsız	-	Mümkünse SVG daha iyi bir seçenektir
Ekran görüntüsü, metinli grafik	Kayıpsız veya yüksek kaliteli kayıplı	90 ve üzeri	Harf kenarlarında bulanıklık olmamalı

Pratik bir kontrol yöntemi: aynı görseli 70, 80 ve 90 kalitede dışa aktarın, üçünü yüzde 100 yakınlaştırmada yan yana açın. Farkı göremediğiniz en düşük değer sizin için doğru değerdir. Bu testi her görsel türü için bir kez yapıp sonucu bir ayar olarak kaydettiğinizde, sonraki dönüştürmeler tutarlı olur.

WebP tek başına yetmez: lazy loading, width ve height

Formatı değiştirmek dosya boyutunu küçültür ama sayfa hızının tamamını çözmez. Görselin ne zaman yüklendiği ve sayfada ne kadar yer kapladığı da en az format kadar önemlidir.

Lazy loading doğru yerde

Sayfanın aşağısında kalan görsellere loading="lazy" eklemek, bu görsellerin kullanıcı o bölgeye yaklaşana kadar indirilmemesini sağlar. Ancak sayfa açıldığında ilk ekranda görünen ana görsele, yani genellikle LCP öğesine lazy loading eklemek ters etki yapar: tarayıcı en önemli görseli geciktirir. İlk ekran görseli için lazy loading kullanmayın, gerekiyorsa fetchpriority="high" ile önceliğini artırın.

<!-- İlk ekrandaki ana görsel -->
<img src="/img/kapak.webp" width="1200" height="630"
     fetchpriority="high" alt="...">

<!-- Sayfanın alt kısmındaki görseller -->
<img src="/img/detay-1.webp" width="600" height="400"
     loading="lazy" alt="...">

width ve height ile düzen kaymasını önleme

width ve height değerleri yazılmamış bir görsel, yüklenene kadar sayfada yer kaplamaz; yüklendiği anda altındaki içeriği aşağı iter. Bu kayma Core Web Vitals'taki CLS metriğini bozar ve kullanıcının yanlış yere tıklamasına yol açar. Değerleri görselin gerçek en-boy oranına göre yazmanız yeterlidir; CSS ile max-width: 100% ve height: auto verdiğinizde görsel yine duyarlı biçimde ölçeklenir ama tarayıcı yerini önceden ayırır.

Görsellerin LCP ve CLS üzerindeki etkisini ayrıntılı görmek için LCP ve Core Web Vitals rehberimizi, dönüştürme öncesi ve sonrası ölçüm yapmak için de site hızı testi yazımızı okuyabilirsiniz. PageSpeed Insights, eski formatta sunulan ve küçültülebilecek görselleri öneriler bölümünde ayrıca listeler.

Görsel SEO: format değiştirirken kaybetmeyin

Google Görseller WebP dosyalarını sorunsuz dizine ekler; formatı değiştirmek tek başına bir sıralama sorunu yaratmaz. Sorunlar genellikle dönüştürme sırasında ihmal edilen ayrıntılardan çıkar.

Anlamlı dosya adı

Kameradan çıkan IMG_4821.webp gibi adlar arama motoruna hiçbir şey anlatmaz. Dosya adını görselin içeriğini kısaca tarif edecek biçimde, küçük harf ve tire ile yazın: mese-yemek-masasi-6-kisilik.webp. Türkçe karakterleri dosya adında sadeleştirmek, URL kodlama sorunlarını önler. Toplu dönüştürmede yalnızca uzantının değiştiğinden, anlamlı adların korunduğundan emin olun.

Alt metni

Alt metni, görseli göremeyen kullanıcılar ve ekran okuyucular için yazılır; arama motorları da görselin konusunu anlamak için bu metni kullanır. Görselde ne olduğunu doğal bir cümleyle anlatın, anahtar kelime doldurmayın. Yalnızca süs amaçlı görsellerde alt metnini boş bırakmak (alt="") doğru bir tercihtir.

URL değişikliği ve yönlendirme

Bir görselin uzantısı .jpg iken .webp olduğunda URL'si de değişir. Görsel aramadan trafik alan bir siteniz varsa eski görsel URL'lerini yeni dosyalara yönlendirmek, biriken görünürlüğü korumaya yardımcı olur. Alternatif olarak picture yapısında JPEG dosyasını yerinde bırakmak, eski URL'nin çalışmaya devam etmesini sağlar.

Görsel site haritası

Görselleriniz sayfa kodunda doğrudan görünmüyorsa, örneğin JavaScript ile sonradan yükleniyorsa, site haritanıza görsel bilgisi eklemek Google'ın onları keşfetmesine yardımcı olur. Mevcut site haritanızdaki her sayfa kaydına image:image ve içinde image:loc etiketi eklenerek yapılır. Google zaman içinde görsel site haritasındaki bazı ek etiketleri desteklemeyi bıraktı; temel ve gerekli olan görselin adresidir. Site haritası kurulumu ve Search Console'a gönderimi için site haritası rehberimize bakabilirsiniz.

WebP geçişi için kontrol listesi

1. Sitedeki en ağır görselleri ve LCP öğesi olan görselleri belirleyin; işe onlardan başlayın.
2. Görselleri gösterildikleri en büyük boyuta göre yeniden boyutlandırın.
3. Fotoğrafları kayıplı, logo ve ekran görüntülerini kayıpsız WebP'ye çevirin.
4. Her görsel türü için kalite değerini gözle test edip sabitleyin.
5. Dosya adlarını anlamlı tutun, alt metinlerini kontrol edin.
6. picture ile geri dönüş tanımlayın veya CDN dönüşümünü doğru ayarlayın.
7. Tüm görsellere width ve height ekleyin.
8. İlk ekran dışındaki görsellere loading="lazy", ana görsele yüksek öncelik verin.
9. Değişen görsel URL'leri için yönlendirme veya geri dönüş dosyası bırakın.
10. Geçiş öncesi ve sonrası hız ölçümünü aynı sayfalarda karşılaştırın.

Hız iyileştirmesinin aramadaki etkisi tek günde görünmez. Değişikliği yaptığınız tarihi not edip birkaç hafta sonra Search Console'daki tıklama ve gösterim eğilimine bakmak daha sağlıklıdır. SEOanalytics gibi Search Console ve GA4 verisini bir arada gösteren bir panel, bu öncesi-sonrası karşılaştırmayı sayfa bazında yapmayı kolaylaştırır.

Sık sorulan sorular

WebP kullanmak SEO sıralamasını doğrudan artırır mı?

Format tek başına bir sıralama sinyali değildir. WebP'nin katkısı dolaylıdır: daha küçük görseller sayfanın daha hızlı yüklenmesini, LCP değerinin iyileşmesini ve kullanıcı deneyiminin güçlenmesini sağlar. Sayfa deneyimi ise Google'ın değerlendirdiği unsurlardan biridir.

WebP'ye çevirince görsel kalitesi düşer mi?

Kayıpsız modda düşmez. Kayıplı modda kalite değeri makul tutulduğunda fark gözle çoğu zaman ayırt edilemez. Asıl risk, zaten sıkıştırılmış bir JPEG'i düşük kaliteyle tekrar sıkıştırmaktır; mümkünse dönüştürmeye en yüksek kaliteli orijinalden başlayın.

AVIF varken WebP'ye hâlâ gerek var mı?

Evet. AVIF çoğu durumda daha küçük dosya üretir ama kodlaması yavaştır ve eski tarayıcı sürümlerinde desteği WebP kadar yaygın değildir. En dengeli yapı, picture içinde önce AVIF, ardından WebP, en sonda JPEG sunmaktır.

Mevcut JPEG dosyalarını silmeli miyim?

Hemen silmeyin. Orijinaller ileride farklı boyut veya format üretmek için kaynak görevi görür, geri dönüş görseli olarak da kullanılır. Ayrıca bu dosyaların URL'leri dış sitelerden bağlantı almış ya da görsel aramada dizine eklenmiş olabilir; silmeden önce yönlendirme planını yapın.