JPG vs WebP: aynı kalitede %25 daha küçük dosyalar

Özet. WebP, web kullanımı için JPG'yi geride bırakır — eşdeğer görsel kalitede %25-35 daha küçük dosyalar üretir, saydamlık ve animasyonu destekler; 2026'da tarayıcı kapsamı ~%97. JPG yalnızca e-posta ekleri, baskı hattı ve eski yazılımlar için kazanır.

WebP, Google tarafından 2010'da geliştirilen ve 2020'ye kadar tüm büyük tarayıcılara eklenen bir görüntü biçimidir. Eşdeğer görsel kalitede JPG'den %25-35 daha küçük dosyalar üretir. Çoğu web hedefi için JPG'ye varsayılan olarak devam etmek için kalan bir neden yoktur; tek anlamlı engel — tarayıcı desteği — 2026 itibarıyla özünde çözülmüş durumdadır.

Temel sayılar

WebP'nin kazandığı durumlar

• Web hedefi, modern tarayıcı kitlesi. Varsayılan olarak WebP kullanın. Desteği olmayan %3'lük tarayıcılar, <picture> elementi (aşağıya bakın) aracılığıyla JPG'ye geri dönebilir.
• Saydamlığa sahip fotoğraflar. JPG alfa kanalını hiç desteklemez. WebP destekler — ve PNG'den daha küçük boyutlarda.
• Mobil öncelikli, bant genişliğine duyarlı kitleler. %25-35 daha küçük dosyalar, ölçülü bağlantılarda belirgin şekilde daha hızlı sayfa yüklemesi anlamına gelir.

JPG'nin hâlâ kazandığı durumlar

• E-posta ekleri. Bazı e-posta istemcileri (eski Outlook, belirli webmail varyantları) hâlâ WebP'yi yanlış işliyor. JPG evrenseldir.
• Baskı hattı. Çoğu ön baskı yazılımı JPG'yi yerel olarak kabul eder; WebP desteği tutarsızdır.
• Eski CMS veya belge şablonlarına gömme (test edemediğiniz veya güncelleyemediğiniz).
• Kamera çıktısı. Çoğu kamera varsayılan olarak JPG yazar. Yayımlama aşamasında WebP'ye dönüştürün, çekim aşamasında değil.

Picture elementi geri dönüş düzeni

WebP'nin küçük dosyalarından maksimum yararlanmak için HTML'nin biçim geri dönüşlerine sahip <picture>elementini kullanın. Tarayıcı desteklediği ilk<source>'u seçer; <img>ise <picture>'ı hiç tanımayan tarayıcılar için genel geri dönüş olarak hizmet eder.

<picture>
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="…" />
</picture>

Modern Chrome / Safari / Firefox / Edge WebP alır; küçük kalan kesim JPG alır. Derleme adımının her iki sürümü de üretmesi gerekir; ama aksi takdirde işaret dili yalnızca bir fazladan satırdır.

AVIF ile de uğraşmalı mıyım?

AVIF (2019) halef biçimdir: eşdeğer kalitede WebP'den %20-30 daha küçük. Tarayıcı desteği 2026'da ~%93 — aynı geri dönüş düzeni için yeterince iyi; bu sefer üç katmanlı:

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="…" />
</picture>

AVIF'in zayıf noktası kodlama hızıdır — tipik kodlayıcılar WebP'den 10-100× daha yavaştır. Her görüntüyü bir kez üreten derleme hatları (web yayıncılığı) için beklemeye değer. Anında kodlama için (yüklemeler, kullanıcı içerikleri) WebP pratik seçimdir.

Pragmatik öneri

Web hedefleri için varsayılan olarak WebP kullanın. Eski tarayıcıların uzun kuyruğu için <picture>aracılığıyla JPG geri dönüşü saklayın. Ucuza üretebilen bir derleme hattınız varsa üçüncü katman olarak AVIF ekleyin.

Sayısal gerçekler

• WebP vs JPG dosya boyutu: Google'ın 1 milyon görüntü üzerindeki kendi çalışması, eşleştirilmiş SSIM'de ortanca %25-34 azalma ölçtü; kayıpsız WebP ise PNG'den ortalama %26 daha küçük.
• Renk derinliği: JPG yalnızca kanal başına 8 bit (toplam 24 bit); WebP aynı 8 bitli kayıplı ve alfa ile 8 bitli kayıpsızı destekler; hiçbiri HDR yapmaz — bu AVIF (10-12 bit) ve JPEG XL alanıdır.
• Maksimum boyutlar: JPG 65.535 × 65.535 px (16 bit alanlar); WebP 16.383 × 16.383 px (14 bit) — JPG'nin teknik olarak kazandığı tek yer.
• Kaydedilen alfa baytları: alfaya sahip 1080p PNG ortalama ~600 KB; eşdeğer kayıplı alfaya sahip WebP ~80 KB'da biter — tek JPG çağı alternatifininkinden (PNG) yaklaşık 7× daha küçük.
• Kodlama süresi: libjpeg-turbo ~250 MP/s; libwebp kayıplı ~80 MP/s; 2024 dizüstünde libwebp kayıpsız ~20 MP/s. JPG kodlamada ~3× daha hızlı, kod çözme paritesi %10 içinde.
• Tarayıcı kapsamı (caniuse.com, 2026): WebP ~%97,4, AVIF ~%93, JPEG XL <%1 (Chrome/Edge 2023'te desteği bıraktı).

Aynı kaynak görüntü kalite 80'de karşılaştırma tablosu

Karar matrisi

Kaynaklar

• Google WebP Çalışması — WebP Sıkıştırma Çalışması — developers.google.com/speed/webp/docs/webp_study.
• RFC 9649 — WebP Görüntü Biçimi — rfc-editor.org/rfc/rfc9649.
• caniuse.com image/webp tarayıcı destek matrisi — caniuse.com/webp.