JPEG, web sitelerinde en yaygın kullanılan resim formatı. PNG ise şeffaf görseller için uzun süredir standart. WebP, ikisinin yerini alması için tasarlandı. Ama pratikte tablo bu kadar net değil: JPEG'i her fotoğrafa uygulayan, PNG'yi logo yerine ürün fotoğrafına koyan ve WebP'nin tarayıcı desteğini hâlâ endişe kaynağı sayan kullanıcılar var. Her üç grubun da farklı nedenlerle kısmen yanılıyor olması mümkün.
Format seçimi tek boyutlu bir karar değil. Boyut, kalite, şeffaflık ihtiyacı, düzenleme akışı ve hedef platform — bunların hepsi birlikte tartılmalı. Üstelik yanlış format yalnızca dosya boyutunu değil, görsel kaliteyi ve sayfa yükleme süresini de doğrudan etkiler.
Her format farklı bir soruyu çözer
JPEG, kayıplı sıkıştırma üzerine kurulu. Her kaydetme işleminde dosyadan bir miktar veri atılır, piksel bilgisi kalıcı olarak değişir. Bu büyük bir dezavantaj gibi görünse de fotoğraflar için pratikte kabul edilebilir bir ödün. İnsan gözü renk geçişlerindeki küçük bozulmaları düz renkli yüzeylere kıyasla çok daha zor fark eder — JPEG de tam bu özelliği kullanır. Geniş renk geçişlerini, karmaşık dokuları ve derin gölgeleri olan fotoğraflarda JPEG, kalite-boyut dengesini makul bir noktada tutar.
PNG ise lossless çalışır. Sıkıştırır ama veri atmaz. Bir PNG dosyasını kaç kez kaydederseniz kaydedin, pikseller olduğu gibi kalır. Bunun yanı sıra alfa kanalını — yani şeffaflığı — destekler. Logo, ikon ve ekran görüntüsü gibi görsellerde bu kritik bir özelliktir. Kayıplı ve kayıpsız sıkıştırmanın ne anlama geldiğini ve hangisinde hangi verinin nasıl işlendiğini daha önce ele aldık; burada doğrudan format seçimine odaklanıyoruz.
WebP, Google tarafından geliştirilen bir format ve her iki modda da çalışabilir: hem kayıplı hem kayıpsız. Şeffaflığı da destekliyor. Tarayıcı desteği 2023-2024 itibarıyla artık sorun olmaktan çıktı; tüm modern tarayıcılar WebP'yi işleyebiliyor. Buna rağmen bazı özel kullanım senaryoları hâlâ dikkat gerektirir.
JPEG — fotoğrafta güçlü, ama sınırlarını bilmek gerekir
2000×1000 piksel bir ürün fotoğrafını %80-85 kalite ile JPEG olarak kaydettiyseniz, dosya boyutu muhtemelen 150-300 KB arasında çıkar ve görsel kayıp gözle neredeyse ayırt edilemez. Aynı fotoğrafı PNG'ye koyduğunuzda 1-2 MB'ı kolaylıkla aşabilirsiniz. Bu fark bir sayfada yalnızca iki ya da üç görselde bile LCP skoruna yansır.
Ancak JPEG için iki senaryo sorunludur. Birincisi tekrar kaydetme. Bir JPEG'i açıp düzenleyip kaydedip tekrar açıp tekrar kaydederseniz kayıp birikir. %90 kaliteden kaydedilen bir dosyayı birkaç kez bu döngüden geçirirseniz başlangıçtaki kaliteyi geri getiremezsiniz. Bu yüzden orijinal görsel arşivini PNG ya da ham formatta tutup yalnızca nihai dışa aktarımda JPEG kullanmak doğru yaklaşımdır.
İkinci sorun keskin kenarlı grafikler. Düz renkli arka plan üzerinde ince metin veya geometrik şekil içeren bir görsel — bilgi kartı, sunum slaydı, ekran görüntüsü — JPEG'te bozulur. Keskin kenarlarda bloky artifact'lar oluşur. Küçük boyutta bazen göze çarpmaz ama yakınlaştırıldığında ya da baskıya gönderildiğinde belirginleşir.
PNG — şeffaflık ve keskin kenar için hâlâ birinci tercih
PNG'nin vazgeçilmez olduğu iki durum var: şeffaf arka plan gereken görseller ve keskin kenarlı grafikler.
Bir logoyu PNG olarak kaydettiğinizde arka planı şeffaf tutabilirsiniz; böylece farklı renkli arka planlara bindiğinde kenarlarda beyaz kırpıntılar oluşmaz. JPEG'in alfa kanalı yoktur — şeffaf bölgeler beyaza ya da siyaha dönüşür. Bu küçük fark, bir site tasarımında birden fazla renk temasına sahip sayfalarda oldukça belirgin biçimde ortaya çıkar.
Ekran görüntüleri de PNG'nin ev sahasıdır. Metin, buton, çizgi, kenarlık içeren; düz renkli alanlar ve keskin geçişlerden oluşan her görsel, PNG'de çok daha temiz durur. JPEG'teki artifact'lar, metin içeren ekran görüntülerinde özellikle okunaklılığı bozar.
Ama PNG'nin fotoğrafa uygulanması başka bir sorundur. Şeffaflık gerekmiyorsa ve görsel fotoğrafsa, PNG'nin boyut maliyeti karşılığında elde edilen tek şey gereksiz büyüklüktür. Sayfanın genel yükleme performansına ne ölçüde yansıdığını görmek için bir analiz çalıştırmak yeterli; büyük PNG fotoğrafları LCP raporunda hemen öne çıkar.
WebP — ikisinin ortası mı, daha iyisi mi?
WebP, bağımsız bir format olarak değil, mevcut formatların sınırlarına yanıt olarak tasarlandı. Kayıplı modda JPEG'e kıyasla benzer kalitede yaklaşık %25-35 daha küçük dosya üretir. Kayıpsız modda ise PNG'ye kıyasla benzer ya da daha küçük boyutta, ama şeffaflık desteğiyle birlikte gelir. Tek bir format altında fotoğraf ve grafik ihtiyaçlarının önemli bir bölümünü karşılıyor olması güçlü bir avantaj.
2024 itibarıyla tüm modern tarayıcılar — Chrome, Firefox, Safari, Edge — WebP'yi destekliyor. Birkaç yıl önceki "fallback stratejisi yazalım" kaygısı artık çoğu proje için geçerli değil. Bir istisna yine de var: bazı e-posta istemcileri ve eski sistemler WebP açamaz. Görseller e-posta şablonlarında da kullanılacaksa ya da kullanıcı tarafından indirilen dosyalar olarak sunulacaksa, bu kanallar için JPEG veya PNG versiyonunu ayırı tutmak gerekebilir.
WebP'ye geçişin bir de araç zinciri maliyeti var. Bazı içerik yönetim sistemleri veya eski işlem hatları WebP dosyalarıyla doğrudan çalışamaz. Bu durumda orijinal JPEG ya da PNG'yi arşivde tutup web için WebP formatına dönüştürmek en sağlıklı yoldur — dönüşüm için ek yazılım kurulumu gerekmez, tarayıcıda doğrudan işlem yapabilirsiniz.
Format seçimi için pratik bir karar sırası
Formatı her görsel için ayrı ayrı düşünmek zaman alır; ama birkaç temel soruyu sırayla geçmek bu kararı büyük ölçüde otomatikleştirir:
- Şeffaflık gerekiyor mu? Evetse JPEG dışında kalın. PNG veya WebP lossless.
- Görsel bir fotoğraf mı, yoksa grafik/ikon/ekran görüntüsü mü? Fotoğrafsa WebP (tercih) ya da JPEG. Grafikse PNG ya da WebP lossless.
- Hedef yalnızca modern tarayıcılar mı? WebP güvenli. E-posta veya indirme kanalı da varsa JPEG/PNG ayırın.
- Görsel tekrar editlenecek mi? Arşivi PNG ya da ham formatta tutun, son çıktıyı WebP/JPEG olarak verin.
Bu sırayla bakıldığında blog kapak görseli ve ürün fotoğrafı için WebP ya da JPEG, logo ve ikon için PNG ya da WebP lossless, ekran görüntüsü için PNG ya da WebP lossless seçmek çoğu senaryoda tutarlı bir sonuç verir.
Tablo olarak görmek isteyenler için kısa bir özet:
| Görsel türü | Birinci tercih | Alternatif |
|---|---|---|
| Fotoğraf (ürün, portre, manzara) | WebP lossy | JPEG %80-85 |
| Logo, ikon (şeffaf arka plan) | WebP lossless | PNG |
| Ekran görüntüsü, grafik | WebP lossless | PNG |
| Arşiv / kaynak dosya | PNG veya ham format | — |
Doğru format seçimi bazen boyut farkını ikiye katlar. Fotoğrafta PNG kullanmak ya da grafikte JPEG tercih etmek genellikle bir kural ihlalinden çok fark edilmeden yayına giren bir alışkanlıktır. Görselleri yayına almadan önce farklı kalite ve format ayarlarını denemek, boyut-kalite dengesini gözle değerlendirmenizi sağlar — bunun için resim sıkıştırma aracıyla hızlı bir karşılaştırma yapmak yeterli. Toplu format değişikliği gerekiyorsa her dosyayı tek tek işlemek yerine dönüşümü gruplayarak ilerlemek hem hata riskini azaltır hem de süreyi kısaltır.
Format seçimi küçük bir karar gibi görünür. Ama yüzlerce görselin yanlış formatta yayımlandığı bir sitede, bu küçük karar performans raporuna büyük ölçüde yansır.