JPEG vs PNG vs WebP vs AVIF: Hangi Format Ne Zaman?

Web performansında görseller genellikle en büyük dosya boyutuna sahip kaynaklardır — bir sayfanın toplam ağırlığının %50'sinden fazlasını oluşturabilirler. Doğru görsel formatını seçmek, hem yükleme hızını hem de görsel kaliteyi doğrudan etkiler. Bu rehberde JPEG, PNG, WebP ve AVIF formatlarını detaylıca karşılaştırıyoruz.

JPEG (Joint Photographic Experts Group)

1992'de tanıtılan JPEG, fotoğraflar için en yaygın kullanılan formattır.

Avantajlar

• Fotoğraflarda mükemmel sıkıştırma oranı
• %100 tarayıcı desteği
• Ayarlanabilir kalite seviyesi (1-100)
• Küçük dosya boyutları

Dezavantajlar

• Şeffaflık (transparency) desteği yok
• Kayıplı (lossy) sıkıştırma — her kaydetmede kalite düşer
• Metin, logo ve keskin kenarlarda bulanıklık oluşturur
• Animasyon desteği yok

Ne zaman kullanılmalı: Fotoğraflar, arka plan görselleri, karmaşık renk geçişleri olan görseller.

PNG (Portable Network Graphics)

PNG, kayıpsız sıkıştırma ve şeffaflık desteği ile öne çıkar.

Avantajlar

• Kayıpsız (lossless) sıkıştırma — kalite kaybı yok
• Alfa kanalı ile şeffaflık desteği
• Metin, logo ve keskin kenarlarda mükemmel sonuç
• %100 tarayıcı desteği

Dezavantajlar

• Fotoğraflarda JPEG'den çok daha büyük dosya boyutu
• Kayıpsız sıkıştırma, sıkıştırma oranını sınırlar
• Animasyon desteği sınırlı (APNG ile mümkün ama yaygın değil)

Ne zaman kullanılmalı: Logolar, ikonlar, ekran görüntüleri, şeffaf arka plan gerektiren görseller, metin içeren görseller.

WebP

Google tarafından 2010'da geliştirilen WebP, hem kayıplı hem kayıpsız sıkıştırma sunar.

Avantajlar

• JPEG'den %25-35 daha küçük dosya boyutu (aynı kalitede)
• PNG'den çok daha küçük dosya boyutu (kayıpsız modda bile)
• Hem kayıplı hem kayıpsız sıkıştırma
• Şeffaflık desteği
• Animasyon desteği (GIF'ten çok daha verimli)
• Modern tarayıcılarda %97+ destek

Dezavantajlar

• Çok eski tarayıcılarda destek yok (IE11)
• Bazı görsel düzenleme yazılımlarında sınırlı destek
• Maksimum boyut sınırı: 16383 x 16383 piksel

Ne zaman kullanılmalı: Genel web görselleri için en iyi seçenek. Fotoğraflar, şeffaf görseller, animasyonlar — hemen her durumda JPEG ve PNG'nin modern alternatifi.

AVIF (AV1 Image File Format)

En yeni format olan AVIF, AV1 video kodek teknolojisini temel alır ve olağanüstü sıkıştırma sunar.

Avantajlar

• JPEG'den %50, WebP'den %20 daha küçük dosya boyutu
• Mükemmel görsel kalite (özellikle düşük bit hızlarında)
• Şeffaflık ve HDR desteği
• Kayıplı ve kayıpsız sıkıştırma
• 10 ve 12 bit renk derinliği desteği

Dezavantajlar

• Kodlama (encode) süresi diğer formatlara göre yavaş
• Tarayıcı desteği büyüyor ama henüz %95 civarında (Edge, Safari'de daha geç geldi)
• Bazı CDN ve CMS platformlarında sınırlı destek
• Progresif yükleme desteği sınırlı

Ne zaman kullanılmalı: Maksimum sıkıştırma gereken durumlarda, özellikle fotoğraf ağırlıklı sitelerde. Fallback olarak WebP veya JPEG ile birlikte kullanılmalıdır.

Format Karşılaştırma Tablosu

Özellik         | JPEG    | PNG      | WebP     | AVIF
Sıkıştırma      | Kayıplı | Kayıpsız | Her ikisi| Her ikisi
Şeffaflık       | ✗       | ✓        | ✓        | ✓
Animasyon        | ✗       | Sınırlı  | ✓        | ✓
Tarayıcı Desteği | %100   | %100     | %97+     | %93+
Dosya Boyutu     | Orta    | Büyük    | Küçük    | En Küçük
Encode Hızı      | Hızlı   | Hızlı   | Orta     | Yavaş

Pratik Strateji

Modern bir web projesi için önerilen yaklaşım:

• HTML'de <picture> elementi ile format fallback zinciri oluşturun: AVIF → WebP → JPEG/PNG
• Fotoğraflar için: AVIF (birincil) + WebP (fallback) + JPEG (son çare)
• Logolar ve ikonlar için: SVG (vektörel) veya WebP/PNG
• Animasyonlar için: WebP veya AVIF (GIF kullanmaktan kaçının)