Resim formatı seçimini çoğu geliştirici iki kurala indirger: fotoğraf ise JPEG, şeffaflık gerekiyorsa PNG. Bu kurallar her zaman yanlış değildir; ama bağlamı olmayan kural, genellikle yanlış sonuç üretir. 600 KB'lık bir PNG hero görseli yerleştirip ardından LCP değerini düzeltmeye çalışmak, aslında formatı baştan doğru seçmemekten kaynaklanır.
Her resim formatı belirli bir teknik avantaj için tasarlanmıştır. JPEG kayıplı sıkıştırmayı fotoğraflar için optimize eder; PNG her pikseli sabit tutar; WebP ikisinin ortasında durur; SVG koordinat tabanlıdır ve piksel kavramı yoktur. Doğru format seçimi bu avantajların hangi kullanım senaryosuna uyduğunu bilmekten geçer.
Formattan bağımsız en iyi format yoktur.
Format seçimini belirleyen üç değişken
Format kararı üç değişkenin öncelik sırasına göre verilir: dosya boyutu, görsel kalite ve şeffaflık desteği. Bu üçünün hiçbiri tek başına belirleyici değildir; bağlama göre biri öne çıkar ve diğerleri ikincil kalır.
Dosya boyutu, sayfa yükleme hızının doğrudan girdisidir. Hero görseli veya LCP elemanı konumundaki bir resimde boyut kontrolü birincil önceliktir; küçük bir thumbnail veya dekoratif arka plan deseni için bu sıralama değişir. Görsel kalite ise içerik türüne bağlı farklı hassasiyet gerektirir: 5000+ SKU'lu bir e-ticaret sitesindeki ürün fotoğrafı detay beklentisi yüksek bir görseldir, bir blog yazısındaki ikincil ikon görseli değildir. Şeffaflık desteği ise logo, ikon ve belirli UI bileşenleri dışında gereksizdir; PNG'nin kayıpsız kalitesini zorunlu kılan bir şeffaflık şartı bu kategoriler dışında nadiren ortaya çıkar.
Karar noktasına geldiğinizde şu soruları sırayla sorun: Bu görsel şeffaflık gerektiriyor mu? Fotoğraf mı, grafik mi? Animasyon mu? Boyut kısıtım nereye kadar? Tarayıcı desteğim ne kadar geniş olmalı? Bu soruların cevabı, format seçiminin büyük bölümünü belirler; geri kalan kısım ince ayardır.
JPEG: fotoğraf ve ton geçişleri
JPEG, insan görsel sisteminin renk değişimlerine duyarlılığını temel alan kayıplı sıkıştırma algoritmasıyla çalışır. Fotoğraflarda ve yumuşak ton geçişi içeren görsellerde diğer formatlara kıyasla çok daha iyi sıkıştırma oranı üretir; geniş manzara fotoğrafı, portre, ürün görseli, gıda çekimi; bunlar için JPEG hala güçlü bir seçenektir.
Quality (kalite) parametresi JPEG sıkıştırmasının kritik değişkenidir. Web için genel kabul gören aralık 75-85 arasıdır; bu aralıkta dosya boyutu ile görsel kalite dengesi makul bir noktada kesişir. Quality 100 seçmek mantıklı görünür. Değildir; kayıpsız JPEG yoktur, 100 değeri yalnızca sıkıştırma miktarını minimuma indirir ve dosya boyutunu gereksiz büyütür. Progressive JPEG da gözden kaçan bir seçenektir: standart JPEG yukarıdan aşağıya yüklenirken, progressive JPEG tüm görüntüyü düşük kaliteden başlayarak kademeli yükler; yavaş bağlantılarda algılanan hız farkı belirgindir.
JPEG'in üretemediği iki şey vardır: şeffaflık ve keskin köşeli grafikler. Alfa kanalı yoktur; şeffaf alanlar beyaza ya da siyaha doldurulur. Keskin köşeli metin, ikon veya illüstrasyon içeren görsellerde JPEG sıkıştırması bu kenarlarda bulanıklık (artifact) üretir; bu durum, PNG'nin kayıpsız avantajının gerçekten işe yaradığı ender senaryolardan biridir.
PNG: piksel hassasiyeti ve şeffaflık
PNG kayıpsız (lossless) sıkıştırma kullanır; her piksel tam olarak saklanır. Keskin kenarlı grafikler, şeffaf arka planlı logolar ve ekran görüntüleri için doğru seçenektir. Alfa kanalı tam desteklenir, bu da kısmen şeffaf öğeler için PNG'yi zorunlu kılar.
Fotoğraflarda PNG kullanmak ciddi bir boyut sorununa yol açar. Orta boy bir ürün fotoğrafı JPEG'de 80-150 KB iken PNG olarak 400-800 KB'a çıkabilir; bu artış sayfa ağırlığına ve LCP süresine doğrudan yansır.
Şeffaflık gerekmiyorsa ve görsel fotoğraf tabanlıysa, PNG'yi WebP veya JPEG lehine bırakmak her senaryoda daha iyi bir karardır.
PNG-8 ve PNG-24 arasındaki fark gözden kaçan bir ayrımdır. PNG-8 en fazla 256 rengi destekler; az renkli ikonlar ve basit grafikler için belirgin boyut avantajı sağlar. PNG-24 tam renk derinliğini destekler ve dosya boyutu belirgin şekilde büyüktür. Çoğu geliştirici bu ayrıma dikkat etmeden PNG-24 olarak dışa aktarır, boyut kazancını masada bırakır. Tasarım araçlarınızın dışa aktarma seçeneklerinde hangi PNG türünün varsayılan olduğunu bir kez kontrol etmek yeterlidir.
WebP: varsayılan format, ama koşulsuz değil
WebP hem kayıplı hem kayıpsız modda çalışabilen bir formattır. Kayıplı WebP, benzer kalitede JPEG'e kıyasla yaklaşık %25-35 daha küçük dosya üretir; kayıpsız WebP, PNG'ye kıyasla yaklaşık %26 daha küçük dosya üretir. Bu avantaj, sayfada büyük yer kaplayan hero görselleri ve ürün fotoğrafları için anlamlıdır; küçük ikonlar için dosya boyutu farkı ihmal edilebilir kalır.
Fallback'siz WebP geçişi sessiz bir hata üretir.
Tarayıcı desteği artık pratikte evrensel sayılabilir: Chrome, Firefox, Safari 14+, Edge ve Opera WebP destekler. IE11 desteği gereksinimi olan projelerde ya da eski CMS altyapılarında <picture> etiketi ile fallback düzenlemesi şarttır. WebP'ye geçip fallback'i unutmak, belirli kullanıcılara kırık görsel sunmak demektir; bu hata sessizce geçer ve analitiklere tam yansımaz. Mevcut görsellerinizi WebP'ye dönüştürmek istiyorsanız bunu format kararının hemen ardından uygulayabilirsiniz.
WebP animasyon desteği teknik olarak GIF'in üzerindedir: daha küçük dosya boyutu, daha iyi renk derinliği, alfa kanalı desteği. Ama GIF, sosyal medya platformlarında ve mesajlaşma uygulamalarında çok daha geniş uyumluluk sağlar. Web'e özel bir animasyon için WebP tercih edilebilir; geniş platform uyumluluğu öncelikliyse GIF veya video formatı (özellikle autoplay muted loop özellikli MP4) daha güvenli bir seçimdir.
SVG: vektör ve ölçeklenebilirlik
SVG raster bir format değildir. Matematiksel koordinatlarla tanımlanan vektör grafiklerini saklar; piksel kavramı yoktur ve herhangi bir boyuta ölçeklendiğinde kalite kaybı yaşanmaz. Logo, ikon seti, illüstrasyon ve diyagram gibi geometrik şekil ağırlıklı görseller için SVG doğal seçenektir; retina ekranlar ve yüksek DPI ekranlar için ayrıca büyük boyutlu PNG üretme ihtiyacını ortadan kaldırır.
Karmaşıklık arttıkça SVG'nin boyut avantajı tersine döner.
Basit bir ikon SVG olarak birkaç yüz byte iken PNG olarak 5-10 KB'a çıkabilir; bu fark anlamlıdır. Ancak yüzlerce node ve karmaşık path içeren bir illüstrasyon için SVG dosyası kolayca 300-500 KB'ı aşabilir; böyle bir durumda optimize edilmiş WebP veya PNG daha küçük dosya üretebilir. SVG'yi her vektör grafik için otomatik seçmek, boyutu tahmin etmeden ilerlemek anlamına gelir.
SVG'nin HTML'e inline gömülmesi CSS ile stillendirmeye ve JavaScript ile etkileşime kapı açar; ama bu yaklaşım tarayıcı cache'ini devre dışı bırakır. Aynı SVG'yi birden fazla sayfada kullanan bir projede inline yerine external referans (img veya CSS background) her sayfa yüklenmesinde cache avantajı sağlar. Favicon oluştururken SVG + ICO kombinasyonu da tarayıcı uyumluluğu açısından benzer bir mantıkla değerlendirilebilir.
Senaryoya göre format kararı
Teoriden önce bağlam.
E-ticaret ürün görseli: Beyaz arka planlı standart ürün fotoğrafı için WebP kayıplı tercih edin. Şeffaf arka plan gerekiyorsa kayıpsız WebP veya PNG. JPEG hala çalışır ama WebP benzer kalitede daha küçük dosya üretir. Aynı görsel için boyutu daha da düşürmek gerekiyorsa formatı seçtikten sonra görsel sıkıştırma adımını da uygulamak ek kazanç sağlar.
Blog kapak görseli (hero): 1200x630 piksel civarında, LCP elemanı olma ihtimali yüksek. WebP veya optimize JPEG. PNG bu boyutta gereksiz yük taşır ve LCP süresini uzatır.
Sosyal medya Open Graph görseli: Facebook, Twitter/X ve LinkedIn 1200x630 piksel önerir; bu görseller platform tarafından yeniden sıkıştırılır. Platform kendi sıkıştırmasını uygulayacağı için yüksek kaliteli WebP veya JPEG yüklemek yeterlidir; PNG'nin kayıpsız avantajı burada pratikte anlamsızlaşır. Şeffaflık desteğine de ihtiyaç yoktur; platform arka planı zaten kendi belirler. Open Graph görsel boyutunu sayfa hız testine dahil etmek, paylaşım bağlantısının yavaş bağlantılarda nasıl göründüğünü doğrulamak açısından da faydalıdır.
Logo ve marka ikonu: SVG tercih edin; herhangi bir boyuta ölçeklendiğinde kalite kaybı olmaz ve retina ekranlarda sorunsuz görünür. SVG mümkün değilse, şeffaf arka planlı PNG veya kayıpsız WebP.
Favicon: .ico formatı geniş tarayıcı uyumluluğu için zorunludur; buna ek olarak PNG 192x192 ve 512x512 (PWA manifest için) hazırlayın. SVG favicon Chrome 80+, Firefox 41+ ve Edge 80+ destekler; geniş uyumluluk gerekiyorsa .ico ile birlikte kullanın.
Yanlış format seçilmişse sıkıştırma farkı kapatamaz.
Ekran görüntüsü ve kod snippet görseli: Keskin metin ve köşeli grafik içerdiği için PNG veya kayıpsız WebP. JPEG bu tür görsellerde metin kenarlarında belirgin artifact üretir; kod bloğu görselini JPEG olarak kaydetmek yazının teknik güvenilirliğini görsel olarak zedeleyebilir.
Sık karşılaşılan bir hata, tüm görselleri PNG olarak dışa aktarıp sonradan sıkıştırmaya çalışmaktır. Yanlış format seçilmişse sıkıştırma bu farkı kapayamaz; 600 KB'lık bir fotoğraf PNG'sini 100 KB'a indirmek, JPEG veya WebP'nin ulaştığı boyuta erişmekten çok daha zordur. Format seçimi ve boyut optimizasyonu birbirini tamamlayan iki adımdır; sıkıştırma, format kararının yerini almaz.