Görsel Sıkıştırma Rehberi: JPG, PNG ve WebP'yi Kullanıma Göre Seçmek

2026-04-13 tarihinde yayınlandı 8 dk okuma

Özet (TL;DR)

Geçen hafta sonu 4,2 MB’lık bir kedi fotoğrafını Squoosh’a bıraktım ve WebP kalite 80 ile yeniden dışa aktardım. Sonuç 380 KB oldu — yaklaşık %91’lik bir azalma. Telefon ekranında orijinaliyle farkını söyleyebileceğimi sanmıyorum. Kayıplı sıkıştırmanın tam da işini yaptığı an böyle bir şey. Ne zaman bu gerçeği unutsam, bir blog açıp 2 MB’lık bir kahraman JPG’nin LTE üzerinden üç saniyede inişini izliyorum; aynı ders kendiliğinden geri geliyor.

Görsel formatı seçimi “hangisi en iyidir” sorusundan çok “ne için kullanılacak” sorusuyla belirlenir. Sürekli ton ağırlıklı fotoğraflar için JPEG, WebP (kayıplı) ve AVIF gibi kayıplı formatlar uygundur. Benzer görsel kalitede kıyaslandığında WebP genellikle JPEG’e göre yaklaşık %25–35 daha küçük, AVIF ise JPEG’e göre kabaca %40–50 daha küçük dosyalar üretir. Öte yandan logo, simge ve ekran görüntüsü gibi kenarları keskin ve metin okunabilirliği önemli olan görseller için PNG, WebP (kayıpsız) ve TIFF gibi kayıpsız formatlar daha güvenlidir. Şeffaflık ve animasyonu birlikte istiyorsanız WebP, APNG ve AVIF öne çıkan seçeneklerdir. Tarayıcı desteği 2026 başında geniştir: WebP Chrome 32 (2014), Firefox 65 ve Safari 14 (2020 sonu) itibarıyla pratikte her yerde çalışır; AVIF ise Chrome 85 (Ağustos 2020), Firefox 93 (Ekim 2021) ve Safari 16 (Eylül 2022) ve sonrasında düzgün görüntülenir. Makul bir taban çizgi şudur: “Vektörel logolar için SVG, fotoğraflar için WebP veya AVIF, ekran görüntüleri için PNG.” Eski ortamlara uyum gerektiğinde <picture> elementiyle JPEG yedeği eklemek yeterli olur.

Arka plan ve kavramlar

JPEG, kayıplı WebP ve AVIF gibi kayıplı formatlar, insan görsel sisteminin daha az duyarlı olduğu bilgileri atarak dosya boyutunu düşürür. İki temel teknik bu süreci yönetir. Birincisi kuantizasyon (quantization): frekans alanı katsayıları tamsayıya yuvarlanırken yüksek uzaysal frekansa sahip bileşenler daha agresif biçimde kırpılır. Fotoğraf gibi yumuşak geçişlerde bu fark edilmez ama keskin kenarlarda blok sınırları açığa çıkabilir. İkincisi kroma alt örneklemesi (chroma subsampling): parlaklık (Y) yerine renk farkı (Cb, Cr) kanallarının çözünürlüğü düşürülür. 4:4:4 ayarı krom bilgisini tam çözünürlükte tutar; daha yaygın olan 4:2:0 krom kanallarını hem yatay hem dikeyde yarıya indirir. Çoğu varsayılan 4:2:0 olduğundan, özellikle koyu zemin üstünde kırmızı ve mavi yazılarda kenar taşması bu yüzden görülür.

JPEG, 1992’de standartlaştırılmıştır ve 8×8 piksellik bloklara uygulanan Ayrık Kosinüs Dönüşümü (DCT) üzerine kurulur. WebP, VP8 video kodekinin kare içi (intra frame) tekniklerine dayanır; AVIF ise AV1’in kare içi araç setini kullanır. Her ikisi de tahmin, dönüşüm ve nicelleştirme bakımından JPEG’den belirgin biçimde daha moderndir: daha büyük blok boyutları, yönlü tahmin ve daha iyi entropi kodlaması sunarlar. PNG bambaşka bir yerde durur: deflate ailesiyle çalışan kayıpsız bir formattır; alfa şeffaflığı ve paletli indeksli renkleri yerleşik olarak destekler. PNG hiçbir veriyi atmaz, ama bu saflığın bedeli fotoğraf içeriğinde çok daha büyük dosyalardır.

Bununla ilgili bir başka kavram aşamalı çözme (progressive decoding). Aşamalı JPEG ve interlaced PNG, baytlar geldikçe görüntünün düşük çözünürlüklü bir önizlemesini hemen gösterip kademeli olarak iyileştirir. WebP ve AVIF genellikle tek geçişli çözülür; fark çoğunlukla çok büyük görüntülerde veya yavaş bağlantılarda kendini gösterir. SVG ise aslında sıkıştırılmış bir raster değil, şekillerin metinsel tanımıdır; boyutu şekil sayısına ve metnin kendisinin sıkıştırılmasına (gzip, brotli SVG kaynağında oldukça etkilidir) bağlıdır.

Karşılaştırma ve veriler

FormatKayıplıKayıpsızŞeffaflıkAnimasyonTipik fotoğraf sıkıştırması2025 tarayıcı desteği
JPEGEvetHayırHayırHayırYaklaşık 10:1Tüm tarayıcılar
PNGHayırEvetEvetAPNG uzantısıKabaca 2–3:1Tüm tarayıcılar
WebPEvetEvetEvetEvetJPEG’e göre ~%25–35 daha küçükSafari 14 (2020) ve sonrası; pratikte evrensel
AVIFEvetEvetEvetEvetJPEG’e göre ~%40–50 daha küçükChrome 85+, Firefox 93+, Safari 16+
GIFEvet (palet, 256 renk)HayırYalnızca 1 bitEvetFotoğraf için zayıfTüm tarayıcılar

Bu rakamları genel eğilimler olarak okumak gerekir. Gerçek dünyadaki sıkıştırma; kaynak içerik, kodlayıcı, ön ayar ve hedef kaliteye göre çok değişir. Aynı JPEG’in kalite 85 ve kalite 60 sürümleri arasında dosya boyutu 3–4 kat farklı olabilir; AVIF’in verimlilik üstünlüğü de hızlı ön ayarlarla daralır. Google ve Mozilla’nın 2019–2023 arasında yayımladığı kıyaslamalar, eşit SSIM hedefinde WebP’nin JPEG’e göre yaklaşık %26–34, AVIF’in ise %40–50 daha küçük dosyalar ürettiğini bildiriyordu. Ancak bu aralıklar yavaş ön ayarlı kodlayıcıları ve ince ayarlı kalite hedeflerini varsayar, çoğu düzenleme uygulamasının tek tık varsayılanlarını değil.

Bir diğer boyut ise kodlama ve çözme maliyeti. JPEG, herhangi bir cihazda milisaniyenin altında çözülür. WebP buna yakın. AVIF’in çözme maliyeti CPU’ya daha yüklüdür; yüksek kaliteli ön ayarlarda AVIF kodlaması görsel başına saniyeler alabilir. Bu maliyet profili, derleme zamanı bir varlık boru hattı için uygun; ama sunucunun her yüklemeyi sıcak yolda yeniden kodladığı canlı kullanıcı içeriği için rahatsızdır.

Gerçek senaryolar

Senaryo 1 — Blog küçük resimleri ve kahraman görselleri. Kendi sitemi denetlediğimde kahraman görselinin 1,8 MB olarak servis edildiğini gördüm. Kalite 82 WebP’ye yeniden aktarınca 210 KB’a düştü; Lighthouse’ta throttled 4G profilinde LCP 2,4 saniyeden 1,1 saniyeye indi. Birincil format olarak WebP’yi varsayılan yapın; çok eski ortamlar için <picture> elementi üzerinden JPEG yedeği sunun. Dışa aktardığınız görseli gerçek CSS görüntüleme genişliğine göre yeniden boyutlandırın; 600 piksellik bir kaba 3000 piksellik bir fotoğraf koymak, formattan bağımsız olarak bant genişliği israfıdır.

Senaryo 2 — Logolar ve simgeler. Vektör kaynağınız varsa önce SVG’yi dışa aktarın. Bir keresinde incelediğim bir açılış sayfasında kırmızı bir marka logosu JPEG kalite 75 ile kaydedilmişti; her harfin kenarından pembe bir halkla yayılıyordu. 4:2:0 kroma alt örneklemesi, kırmızının koyu üzerindeki kenarlarını başka her şeyden önce bozar. Elinizde yalnızca raster sanat varsa PNG veya kayıpsız WebP tercih edin. Logolarda kayıplı sıkıştırmayı optimizasyon değil, kırmızı bayrak olarak görün.

Senaryo 3 — Ekran görüntüleri ve arayüz yakalamaları. Ekran görüntüleri varsayılan olarak PNG olmalı. Tarayıcı kabuğu, kod parçacıkları ve CJK yazı tipleri JPEG artefaktlarını güçlü biçimde gösterir — bunu art arda iki PR’da “tek aralıklı yazı tipi bulanık” yorumunu aldıktan sonra öğrendim. Dosyayı küçültmeniz gerekiyorsa pngquant’e uzanın (macOS’ta brew install pngquant) ve paleti 256 renge indirin; arayüz ekran görüntülerinde fark neredeyse hiç görünmez, dosya çoğu zaman 4–6 kat küçülür. Doküman siteleri için PNG’yi CSS duyarlı görsel işaretlemesiyle eşleştirirseniz retina ekranlar 2x varlıkları, daha eski ekranlar 1x sürümü indirir; bu genellikle format değiştirmekten daha fazla bayt tasarrufu sağlar.

Senaryo 4 — Kaynak materyalin arşivlenmesi. Daha sonra tekrar işlemeniz muhtemel orijinaller (fotoğraf ustaları, ham taramalar, ürün çekimleri) için TIFF veya kayıpsız WebP gibi kayıpsız bir kopyayı soğuk depoda tutun; kayıplı teslim varyantlarını talep üzerine türetin. Kayıplı bir JPEG’i tekrar tekrar yeniden sıkıştırmak her döngüde kaliteyi düşürür (“kuşak kaybı”), bu yüzden dönebileceğiniz temiz bir kaynak işinize yarar.

Yaygın yanlış anlamalar

“PNG her zaman en yüksek kalitedir.” Kayıpsız olduğu için mükemmel üretim anlamında doğrudur; ancak fotoğraflarda bu saflık dosyaları gereğinden birkaç kat büyütür. Mobilde birkaç megabaytlık fotoğraflar algılanan yükleme süresini ve Core Web Vitals’ı doğrudan vurur.

“WebP tüm tarayıcılarda çalışmaz.” 2020 sonunda Safari 14’ten beri WebP, tüm ana akım tarayıcılarda destekleniyor. Gerçekten eski uyum gerekiyorsa <picture> içinde JPEG yedeği temiz bir çözüm sunar.

“AVIF büyülüdür.” Sıkıştırma verimliliği olağanüstü, ama kodlama JPEG veya WebP’den belirgin biçimde yavaş. M2 MacBook Air’imde avifenc --speed 4 tek bir 2400×1600 fotoğraf için 5–9 saniye alıyor; --speed 0 ile 30 saniyeyi aşabiliyor. Eski mobil cihazlarda çözme maliyeti de bir endişe olabilir. AVIF, her kullanıcı yüklemesini sıcak yolda yeniden kodlamaktan çok toplu boru hatlarına ve derleme zamanı optimizasyonuna daha iyi oturur.

“JPEG yeter.” 2015’e kadar makul bir seçimdi, ama bugün modern WebP ve AVIF genellikle benzer kalitede daha küçük dosyalar üretiyor ve desteği evrensele yakın. Yeni boru hatları WebP’yi taban çizgisi olarak almalı.

“Yüksek kalite ayarları her zaman buna değer.” JPEG veya WebP’de kalite 85’in üzerinde dosya boyutu, algısal kaliteden daha hızlı büyür. Kalite 85 ile 95 arasındaki farkı çoğu izleyici göremez, ama dosya iki kat büyük olabilir. Kalite kaydırıcısına doğrusal bir ölçek gibi güvenmek yerine SSIM veya butteraugli gibi algısal bir metrikle ölçün.

“İyi sıkıştırıyorsam yeniden boyutlandırmak gerekmez.” Görsel teslimatında en büyük tek kazanç genellikle uygun boyutta görsel göndermekten gelir, sıkıştırma ayarından değil. 800 piksel genişliğinde bir WebP, kalite ayarından bağımsız olarak 3000 piksel genişliğinde bir WebP’den neredeyse her zaman daha hafiftir; çünkü pikselleri yaklaşıklaştırmak yerine ortadan kaldırıyorsunuz.

Kontrol listesi

  1. Kaynak vektörel mi? Evetse SVG olarak kaydedin.
  2. Şeffaflık gerekli mi?
    • Evet ve içerik fotoğrafikse: alfa kanallı kayıplı WebP veya AVIF.
    • Evet ve içerik logo ya da simgeyse: PNG veya kayıpsız WebP.
  3. Animasyon gerekli mi? Animasyonlu WebP, APNG veya AVIF. GIF’in 256 renk paleti fotoğraflar için zayıftır.
  4. İçerik fotoğrafik veya gradyan ağırlıklı mı? Varsayılan olarak kayıplı WebP; bant genişliği kritikse AVIF ekleyin.
  5. İçerik ekran görüntüsü ya da metin ağırlıklı arayüz mü? PNG veya kayıpsız WebP tercih edin.
  6. En geniş uyum gerekiyor mu? <picture> elementiyle AVIF → WebP → JPEG sırasıyla kaynaklar sunun.

İlgili araç

Bu ödünleşimleri doğrudan relatedToolUrl alanında listelenen Patrache Studio görsel sıkıştırıcısında deneyebilirsiniz. Görseller genellikle daha büyük bir varlık boru hattının parçasıdır; tamamlayıcı rehberleri birlikte okumak kararları kolaylaştırır. Görselleriniz sözleşmeler veya taranmış dosya paketlerinin içine girdiğinde ne olduğunu Tarayıcıda PDF Birleştirme ve Bölme anlatıyor; ürün ambalajlarında veya posterlerde taranabilir QR kodlar varsa QR Kod Güvenliği da mutlaka okunmalı.

Kaynaklar

İlgili araç

tools.patrache.studio/image/compress/