PNG, JPG yoksa WebP? Görsel Formatı Nasıl Seçilir

Hangi formatın ne zaman daha iyi sonuç verdiğine dair pratik bir kıyaslama.

Özet

JPG fotoğraflar için küçük dosya boyutu verir ama şeffaflık desteklemez. PNG şeffaflığı destekler ama dosyalar daha büyük olur. WebP genelde ikisinden de daha küçük dosya boyutu verir, ama her yerde aynı destek yoktur.

Adım adım

Görselin şeffaflık gerektirip gerektirmediğine bakın.
Fotoğraf ise JPG, logo/ikon ise PNG düşünün.
Web sitesi hızını önemsiyorsanız WebP'yi deneyin.
Dönüştürdükten sonra dosya boyutunu karşılaştırın.

Neden önemli?

Yanlış format seçimi iki şekilde kendini gösterir. Ya dosya gereğinden büyük olur ve sayfa yavaş açılır, ya da görüntü bozulur: yazıların etrafında lekeler, logonun arkasında beyaz bir kutu, gökyüzünde basamaklı renk geçişleri. Doğru format çoğu zaman ek bir ayar yapmadan iki sorunu birden çözer. Sıkıştırma ve boyutlandırma ise bu seçimden sonra gelen adımlardır.

Görsel türüne göre hızlı eşleştirme

Ekran görüntüsü, tablo, arayüz: PNG. Keskin kenarlı yazılar JPG'de bulanıklaşır.
Fotoğraf: JPG ya da WebP. PNG'ye çevrilmiş bir fotoğraf, kaliteyi artırmadan dosyayı büyütür.
Logo ve ikon: mümkünse SVG, olmuyorsa şeffaf arka planlı PNG.
Basit hareketli görsel: GIF yerine kısa bir video ya da hareketli WebP genelde çok daha küçüktür.
Baskıya gidecek dosya: matbaanın istediği format; çoğu zaman yüksek çözünürlüklü PDF veya TIFF.

Sık yapılan hatalar

Bir JPG'yi düzenleyip tekrar tekrar JPG olarak kaydetmek. Her kayıtta biraz daha kalite kaybedilir; düzenleme sürerken kayıpsız bir kopya üzerinde çalışın.
Şeffaf PNG'yi JPG'ye çevirip arka planın neden beyaz ya da siyah olduğunu sormak. JPG şeffaflık tutmaz.
WebP dosyasını, bu formatı kabul etmeyen bir form veya eski bir programa yüklemeye çalışmak. Böyle durumlarda JPG veya PNG yedeği hazır olsun.
Sadece formatı değiştirip çözünürlüğe dokunmamak. 4000 piksellik bir fotoğraf, WebP olsa bile 800 piksellik bir alan için fazla büyüktür.

Örnek bir senaryo

Küçük bir online mağaza sahibi, ürün sayfası için üç tür görsel hazırlıyor. Ürün fotoğraflarını WebP olarak sitesine koyuyor, ama pazaryerine yüklerken JPG kullanıyor çünkü orada hangi formatların kabul edildiğinden emin değil. Mağaza logosunu şeffaf PNG olarak tutuyor, böylece hem açık hem koyu arka planda düzgün görünüyor. Beden tablosunu ise fotoğraf gibi JPG yapmak yerine PNG olarak kaydediyor; küçük rakamlar net kalıyor. Her biri için ayrı bir karar vermek, tek formatla her şeyi çözmeye çalışmaktan daha iyi sonuç veriyor.

Karar veremiyorsanız

Aynı görseli iki formatta kaydedip dosya boyutlarına ve görüntüye yan yana bakın. Gözle fark göremiyorsanız küçük olanı seçin. Fark görüyorsanız, boyuttan önce görüntü kalitesine öncelik verin.