PNG vs JPG vs WebP: 2026'da hangi format gerçekten kazanıyor?

2026'dayız ve PNG (1996), JPG (1992) ve WebP (2010) web genelinde hâlâ aktif üretim kullanımındadır. Bu tembellik değil — her biri dosya boyutu, kalite ve özellik ödünleşim üçgeninde anlamlı ölçüde farklı bir noktada yer alır ve hepsini tek bir formatla değiştirmek gerçekten korumak istediğiniz bilgileri kaybettirir.

Bu, WebP eklenerek ve AVIF sorusu ele alınarak daha kısa PNG vs JPG karşılaştırmamızın genişletilmiş anlatısıdır.

Ödünleşim üçgeni

*APNG (animasyonlu PNG) mevcuttur; destek geniştir ancak 2026'da nadiren doğru seçimdir — WebP ve AVIF animasyonu daha iyi yapar.

Her birinin kazandığı durumlar

JPG ne zaman kazanır

• Öğe bir fotoğraf ve evrensel uyumluluk (yazıcılar, eski e-posta istemcileri, gömülü önizleme okuyucuları) gerekiyorsa.
• Öğe çok sayıda kaydetme döngüsünden geçiyorsa — her kayıt kalite kaybetse de JPG düzenleme en çok desteklenen iş akışıdır.
• Görüntünüzün eski bir tüketicisi başka bir şeyi işleyemiyorsa — gömülü sistemler, on yıllık baskı mağazası yazılımları vb.

PNG ne zaman kazanır

• Öğenin keskin kenarları ve düz renk bölgeleri varsa (ekran görüntüleri, arayüz yakaları, logolar, simgeler). JPG'nin kayıplı yapaylıkları bunlarda çok belirgindir.
• Şeffaflık gerekli ve WebP seçenek değilse (PDF gömme, bazı baskı iş akışları).
• Orijinalin kayıpsız gidiş-dönüş yapması gerekiyorsa — PNG'yi yeniden kaydetmek bozulmaz.

WebP ne zaman kazanır

• Hedef web'se ve öğeler fotoğraf veya fotoğrafa benzer içerikse. Eşdeğer görsel kalitede JPG'den %25-35 daha küçük.
• Şeffaflık gerekli ve dosya bir web sayfasına gidiyorsa. WebP'nin kayıplı + alfa kombinasyonu eşsizdir — alfanın PNG versiyonu devasa; AVIF daha küçük ama destek daha dardır.
• Animasyon gerekli ve kitleniz modern tarayıcılardaysa. WebP animasyonu animasyonlu GIF'ten daha küçük ve daha kalitelidir.

AVIF ne zaman kazanır

• Daha iyi sıkıştırma için yavaş kodlamayı kabul edebiliyorsanız. AVIF kodlaması, kodlayıcıya bağlı olarak WebP'den 10-100 kat daha yavaş olabilir. Kod çözme hızlıdır.
• %7 tarayıcı desteği açığı kitleniz için kabul edilebilirse.
• Görüntü ağırlığı orantısız biçimde önemliyse — e-ticaret üst katı hero fotoğrafları, görüntü galerileri, ölçümlü bağlantılarda mobil kullanıcılar.

Karar ağacı

1. Herhangi bir bağlamda (e-posta, gömülü okuyucu, baskı) görüntülenmesi gerekiyor mu? → Fotoğraflar için JPG, grafikler için PNG.
2. Hedef kesinlikle web ve kitleniz modern mi? → WebP veya AVIF.
3. Fotoğrafa benzer içerik, web hedefi, kolay kodlama? → WebP.
4. Fotoğrafa benzer içerik, web hedefi, görüntü yoğun site, yavaş kodlamayı kabul ediyor? → AVIF.
5. Arayüz / logolar / ekran görüntüleri? → PNG.
6. Animasyon? → WebP (veya zorunluysa animasyonlu GIF).
7. Logo veya simge olan vektör grafik? → SVG. Hiç raster format kullanmayın.
8. ~10 KB'ın altında, bir kez satır içi kullanım? → Görüntüden Base64 aracımız aracılığıyla Base64 veri URI'si.

Picture öğesi geri dönüş deseni

Minimum dosya boyutuyla maksimum uyumluluk için HTML <picture>öğesini format geri dönüşleriyle kullanın:

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

Tarayıcı desteklenen ilk formatı seçer. Modern Chrome AVIF alır; Safari 14+ WebP alır; eski tarayıcılardaki %3 JPG'ye geri döner. Maliyet üç sürüm kodlamaktır; fayda her cihazda doğru format.

Önerilerimiz

• Arayüz ekran görüntüleri ve logolar: PNG. Fazla düşünmeyin.
• Hero fotoğraflar: <picture> ile AVIF + WebP geri dönüşü + JPG geri dönüşü.
• Uzun kuyruklu fotoğraflar ve blog görüntüleri: WebP, JPG geri dönüşü. AVIF yalnızca ucuza üreten bir derleme ardışık düzeniniz varsa.
• Animasyonlu içerik: WebP (veya video — anlamlı boyutlarda kısa bir MP4 animasyonlu WebP'yi geçer).
• Simgeler: SVG.

Format değişimi için görüntü dönüştürücü kümemizi kullanın. Her dönüşüm tarayıcınızda çalışır — yükleme yok, bekleme yok, sunucu tarafı hizmetten kalite ödünü yok.

İşlenmiş örnek: hero görüntüsü üç formatta

Kaynak: sıkıştırılmamış BMP olarak 17,4 MB ağırlığında 3000×2000 24 bit fotoğraf. Varsayılan kodlayıcı ayarlarıyla görsel olarak eşdeğer kalitede (kaynağa karşı SSIM ≥ 0,98) kodlandı:

• JPG (kalite 82): 612 KB.
• WebP (kalite 80): 388 KB — JPG'den %37 daha küçük.
• AVIF (CRF 28): 241 KB — JPG'den %61, WebP'den %38 daha küçük.
• PNG (kayıpsız): 14,8 MB — JPG'den 24 kat büyük, web hero olarak kullanılamaz.

Yaygın hatalar

• JPG'yi defalarca kaydetmek.Her kayıt DCT katsayılarını yeniden nicelendirir; ekranda fark başta görünmese de kalite bozulur. Orijinali (PNG, TIFF veya RAW) saklayın ve JPG'ye yalnızca yayın zamanında aktarın. Son adım için PNG'den JPG'ye aracımızı kullanın.
• PNG-24'ü PNG-8'in yeteceği yerde kullanmak.256 farklı renge sahip bir arayüz ekran görüntüsü, aynı görsel çıkışla PNG-24 boyutunun üçte birine PNG-8'e (8 bit indeksli) sığabilir.
• AVIF için <picture> geri dönüşünü atlamak.%93 global destek bile 14 ziyaretçiden 1'inin bozuk görüntü aldığı anlamına gelir. Geri dönüş, AVIF'i ilk yükleyen tarayıcılar için sıfır ağırlık ekler.
• WebP'nin kayıpsız modunu PNG yedeği olarak görmek.WebP-kayıpsız kayıpsız kodlanmış fotoğraflar için mükemmeldir; indeksli renkli arayüz öğeleri için PNG-8 çoğunlukla daha küçüktür.
• EXIF ve ICC'yi koşulsuz olarak silmek.Renk profili (ICC), geniş gamut ekranlarda görüntülenen fotoğraflar için önemlidir. Gizlilik için EXIF'i silin, doğruluk için ICC'yi saklayın.