1. Ana sayfa
2. Görüntü formatları

Görüntü formatları karşılaştırması: JPEG, PNG, WebP ve AVIF

Dört format modern webdeki görüntülerin %99’undan fazlasını kapsar. Sıkıştırma, şeffaflık, animasyon ve tarayıcı desteği arasında çok farklı ödünleşimler sunarlar. Doğru olanı seçmek için pratik bir rehber.

Yan yana karşılaştırma

Önce kısa özet, aşağıda her biçimin tam açıklaması.

JPEG — evrensel temel

Nasıl çalışır

JPEG (Joint Photographic Experts Group) 1992’de standardize edildi ve dört biçimin en eskisidir. 8×8 piksel bloklarda kayıplı ayrık kosinüs dönüşümü, ardından niceleme ve entropi kodlaması kullanır. Kalite tek bir 1–100 sayısıyla kontrol edilir. MozJPEG gibi modern kodlayıcılar bit akışını değiştirmeden biçimden %10–20 daha fazla verim alır; her JPEG çözücü bunları okuyabilir.

En iyi kullanım

Pürüzsüz ton geçişleri ve bol detay içeren fotoğrafik içerik — portre, manzara, ürün fotoğrafı, kahraman görselleri.

Avantajlar

• Dünyadaki neredeyse her görüntü görüntüleyici tarafından desteklenir.
• Neredeyse her yerde donanım hızlandırmalı çözme.
• Olgun optimizasyon ekosistemi (MozJPEG, jpegli).

Dezavantajlar

• Alfa kanalı yok — arka planlar düzleştirilmelidir.
• Metin, çizim ve keskin kenarlarda blok artefaktları.
• Kanal başına yalnızca 8 bit.

PNG — kayıpsız ve şeffaf

Nasıl çalışır

PNG (Portable Network Graphics) 1990’ların ortasında GIF’in ücretsiz alternatifi olarak doğdu. Kesin kayıpsızdır: satır başına piksel filtrelemesinin üzerinde DEFLATE sıkıştırması. oxipng (optipng’nin Rust portu) tek bir pikseli değiştirmeden en küçük temsili bulmak için filtre/sıkıştırma kombinasyonlarını dener.

En iyi kullanım

Arayüz grafikleri, simgeler, ekran görüntüleri, diyagramlar, çizim, düz renkli logolar ve gerçek alfa kanalı gereken her şey.

Avantajlar

• Kayıpsız — pikseller gidiş-dönüşte aynen kalır.
• Tam 8 bit alfa, kanal başına 16 bit’e kadar.
• Evrensel destek.

Dezavantajlar

• Fotoğraflarda büyük — çoğu zaman JPEG/WebP/AVIF’ten kat kat fazla.
• Orijinal spesifikasyonda animasyon yok (APNG sonradan gelen bir uzantıdır).

WebP — Google’ın web öncelikli formatı

Nasıl çalışır

WebP 2010’da Google tarafından VP8 video codec’ine dayalı olarak yayınlandı; sonra ayrı bir kayıpsız mod eklendi. Tek kapsayıcıda hem kayıplı hem kayıpsız sıkıştırma, isteğe bağlı alfa ve animasyon destekler. Kayıplı modda genelde aynı algılanan kalitede JPEG’den %25–35 daha küçük dosyalar üretir; kayıpsız modda PNG’ye göre yaklaşık %20–30 kazanç sağlar.

En iyi kullanım

AVIF henüz güvenli olmayan genel web teslimi — fotoğraflar, şeffaflıklı arayüz sprite’ları, animasyonlu GIF alternatifleri ve AVIF altında yedek katman.

Avantajlar

• Tek format fotoğraf, grafik, alfa ve animasyonu kapsar.
• Benzer kalitede JPEG ve PNG’den belirgin şekilde daha küçük.
• Geniş destek: 2020’den beri tüm güncel tarayıcılar.

Dezavantajlar

• Kanal başına 8 bit — HDR yok.
• Bazı düşük uç cihazlarda JPEG’den daha yavaş çözülür.

AVIF — sıkıştırmada güncel lider

Nasıl çalışır

AVIF (AV1 Image File Format), Alliance for Open Media’nın 2019’da yayınladığı AV1 video codec’inin durgun görüntü profilidir. 12 bit renk, tam alfa, HDR, geniş gam ve film greni sentezi destekler. Referans kodlayıcı (aom-av1, libavif tarafından kullanılır) yavaştır ancak gerçek dünya fotoğraflarında bugünkü en iyi sıkıştırmayı verir.

En iyi kullanım

Kahraman görseller, foto galerileri ve CPU süresinden çok bant genişliğinin önemli olduğu her yer. <picture> öğesinde üst katman olarak iyi çalışır.

Avantajlar

• Sınıfının en iyi sıkıştırması — genelde JPEG’den %40–60 daha küçük.
• Alfa, animasyon, HDR, geniş gam ve 10/12 bit derinlik destekler.
• Telifsiz ve açık.

Dezavantajlar

• Yavaş kodlanır — derleme zamanı veya asenkron kodlama planlayın.
• Safari desteği yalnızca sürüm 16’da (2022) eklendi.
• Sentetik grafiklerde kayıpsız WebP veya PNG kadar zarif değil.

Hangi formatı kullanmalıyım?

• Fotoğraflar, tam genişlik kahraman görseller: Birincil AVIF, <picture> ile WebP ve JPEG yedekleri.
• Şeffaflıklı arayüz (simgeler, logolar): Eski uyumluluk için PNG, daha küçük yük için kayıpsız WebP.
• Çizim, ekran görüntüsü, diyagram: PNG (veya kayıpsız WebP) — JPEG/AVIF artefaktı keskin kenarlarda acımasızdır.
• Animasyonlu GIF değişimi: WebP veya AVIF — ikisi de çok daha küçük ve gerçek alfa sunar.
• Bugün her tarayıcı için tek format: Fotoğraflar için JPEG, grafikler için PNG. En küçük seçenek değil, sıfır uyumluluk borcu.

Pratikte yalnızca birini seçmek zorunda değilsiniz. <picture> içinde önce AVIF, sonra WebP, en sonda JPEG veya PNG sunun — her tarayıcı çözebildiği en küçük sürümü alır.