PNG, JPEG ve WebP: hangi görsel formatını kullanmalısınız?

Görsel formatı kararlarının çoğu iki soruya dayanır. Görselde şeffaf alanlar gerekiyor mu? Ve biraz kalite kaybı fark edilir mi? Bu iki soruyu yanıtlayın, format neredeyse kendiliğinden belli olur. Üçüncü soru, yani dosyanın nereye gideceği, yeni formatların kullanılıp kullanılamayacağını belirler; çünkü pazar yerleri ve birçok uygulama hâlâ yalnızca JPEG ve PNG kabul ediyor.

Bu rehber, webde fotoğraf ve grafikler için en sık karşılaşacağınız dört formatı karşılaştırır: JPEG, PNG, WebP ve AVIF. Sonunda insanların genellikle ihtiyaç duyduğu işler için hızlı bir seçim listesi var: logolar, ürün fotoğrafları, sıradan fotoğraflar ve şeffaf arka planlı kesimler.

Karşılaştırma tablosu

Format ayrıntıları MDN'in görsel dosya türleri rehberinden alınmıştır. Destek satırı tarayıcılar açısından eskisi kadar önemli değil: tüm güncel büyük tarayıcılar WebP gösterir ve AVIF hepsinin son sürümlerinde desteklenir. Hâlâ önemli olduğu yer geri kalan her şeydir: yükleme formları, pazar yerleri, e-posta istemcileri ve eski masaüstü yazılımları.

Kayıplı ve kayıpsız, sade bir dille

Kayıpsız sıkıştırma, tek bir pikseli değiştirmeden dosyayı küçültür. Bir PNG'yi açtığınızda kaydedilenin birebir aynısını geri alırsınız. Bu da onu metin, logo, çizim, kullanıcı arayüzü ve ekran görüntüsü gibi keskin kenarlı ve düz renkli her şey için ideal yapar; bunlarda en ufak bulanıklık veya renk saçağı kolayca görülür.

Kayıplı sıkıştırma, gözün fark etmesi zor ayrıntıları atar. Fotoğraflar gürültü ve yumuşak ton geçişleriyle dolu olduğu için buna iyi dayanır. JPEG bu şekilde çalışır ve makul kalite ayarlarında bir fotoğraf, gözle görülür bir fark olmadan PNG boyutunun küçük bir kısmına inebilir.

Buradan iki pratik kural çıkar:

• Her kayıplı kayıt biraz daha kayıp demektir. Kayıpsız bir ana dosya saklayın (kameradan gelen orijinal, bir PNG veya düzenleyicinizin kendi dosyası) ve aynı JPEG'i düzenleyip tekrar kaydetmek yerine kayıplı kopyaları bu dosyadan dışa aktarın.
• Kayıplı sıkıştırma en kötü sonucu keskin kenarlarda verir. JPEG olarak kaydedilen bir logonun harflerinin etrafında lekeli "sivrisinek gürültüsü" oluşur, ekran görüntüsündeki metin de bulanıklaşır.

Şeffaflık: kesimler için belirleyici özellik

JPEG'de alfa kanalı yoktur. Bir JPEG'de "bu piksel saydam" bilgisini saklamanın yolu yoktur; bu yüzden arka plan kaldırma sonrası JPEG olarak kaydettiğinizde boş alan düz bir renkle, genellikle beyaz veya siyahla doldurulur. Kesimin başka içeriklerin üzerinde durmasını istiyorsanız PNG, WebP veya AVIF gerekir.

PNG tam bir alfa kanalı saklar: her piksel tamamen opaktan tamamen şeffafa kadar herhangi bir değerde olabilir; saç, tüy ve gölge gibi yumuşak kenarların doğal görünmesini sağlayan budur. Ayrıca tek bir palet renginin şeffaf olarak işaretlendiği daha basit bir modu da vardır; bu düz grafikler için yeterlidir ama fotoğraflarda tırtıklı kenarlar verir. Ayrıntılar için alfa kanalının ne olduğunu okuyun.

WebP hem kayıpsız hem kayıplı modunda şeffaflığı destekler. Google'ın WebP belgelerine göre kayıpsız WebP şeffaflığı yaklaşık %22 daha fazla bayt karşılığında ekler ve şeffaflık içeren kayıplı WebP, eşdeğer bir PNG'den genellikle yaklaşık 3 kat daha küçüktür. Bu da kayıplı WebP'yi şeffaf arka planlı bir ürün fotoğrafını kendi web sitenizde sunmanın en verimli yolu yapar.

Dosya boyutu

Aynı görsel için büyükten küçüğe kabaca sıra PNG, JPEG, WebP, AVIF şeklindedir, ancak önemli bir şartla: PNG yalnızca fotoğraflarda "büyük"tür. Az renkli düz grafiklerde PNG çoğu zaman JPEG'den küçüktür ve her zaman daha keskindir.

Google'ın WebP için yayımladığı rakamlar faydalı bir ölçüttür:

• Kayıpsız WebP dosyaları PNG'lerden %26 daha küçüktür.
• Kayıplı WebP dosyaları, aynı SSIM kalite puanında benzer JPEG'lerden %25 ile %34 arasında daha küçüktür.

MDN, webdeki raster görseller için genellikle PNG, JPEG ve GIF'ten daha iyi sıkıştıran WebP veya AVIF'i tercih etmeyi önerir. AVIF ayrıca 10 ve 12 bit rengi destekler, bu da yumuşak geçişlerde işe yarar. Zayıf noktası tarayıcılar dışındaki destektir: birçok uygulama ve yükleme formu onu hâlâ reddeder.

Dosya boyutu en çok, çok sayıda ziyaretçiye çok sayıda görsel sunduğunuzda önemlidir. Zaten her şeyi yeniden sıkıştıran bir pazar yerine tek bir yükleme için, kazandığınız baytlardan çok pazar yerinin kabul ettiği format önemlidir.

Hangi format nerede kabul ediliyor

Tarayıcılar işin kolay kısmı. Formatların reddedildiği yerler pazar yerleri ve uygulamalardır. Her platformun kendi belgelerine göre kabul edilen formatlar şunlardır (Ekim 2026'da kontrol edilmiştir):

İki şey göze çarpar. Birincisi, WebP ve AVIF Amazon, Walmart veya Meta katalogları tarafından kabul edilmez; bu yüzden pazar yeri yüklemeleri için JPEG veya PNG kullanın. İkincisi, Etsy şeffaf PNG'lerin desteklenmediğini ve şeffaf alanların siyah görünebileceğini söyler; bu yüzden oraya yüklemeden önce kesimleri bir renk üzerine düzleştirin. Platform başına tam piksel boyutları için ürün fotoğrafı boyutları rehberine bakın.

Yaygın işler için hangi format

Logolar

Vektör bir orijinaliniz varsa SVG kullanın; MDN logolar ve simgeler için bunu önerir. Raster bir dosya gerektiğinde şeffaf arka planlı PNG ya da kendi sitenizde kayıpsız WebP kullanın. Asla JPEG kullanmayın: kenarlarda bulanıklık oluşturur ve şeffaf olamaz.

Ürün fotoğrafları

Pazar yeri ana görselleri için saf beyaz arka plan üzerinde JPEG kullanın. Amazon'un satıcı blogu JPEG'i tercih edilen format olarak tanımlar ve yukarıdaki tablodaki tüm pazar yerleri bunu kabul eder. Kayıpsız bir ana dosyadan yüksek kalite ayarıyla (çoğu araçta 85 ile 92 civarı) dışa aktarın.

Kendi mağazanızda yüksek kaliteli bir JPEG veya PNG yükleyin ve dönüşümü platforma bırakın. Örneğin Shopify, görsel hizmetinin her ziyaretçiye tarayıcısının desteklediği en iyi formatı otomatik olarak sunduğunu söyler.

Sıradan fotoğraflar

Paylaşım ve yüklemeler için güvenli varsayılan JPEG'dir. Kontrol ettiğiniz bir web sitesinde, JPEG yedekli WebP veya AVIF aynı görünümü daha az baytla verir. Telefonunuz HEIC dosyaları kaydediyorsa, HEIC'i listelemeyen bir yere yüklemeden önce bunları JPEG'e dönüştürün.

Kesimler ve şeffaf görseller

Dosyanın her yerde çalışması gerektiğinde PNG kullanın: sunumlarda, belgelerde, tasarım araçlarında ve çoğu yükleme formunda. Görseli kendi web sayfanıza yerleştiriyor ve küçük olmasını istiyorsanız WebP kullanın. JPEG'i yalnızca arka planı bilerek düz bir renkle doldurduysanız kullanın, örneğin bir pazar yeri için beyazla.

Ekran görüntüleri ve diyagramlar

PNG veya kayıpsız WebP. Kayıplı formatlar metni bulanıklaştırır.

Modern formatları yedekli sunmak

Kendi sitenizi yönetiyorsanız tek bir format seçmek zorunda değilsiniz. HTML picture öğesi, tarayıcının anladığı ilk formatı seçmesini sağlar:

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

AVIF destekleyen tarayıcılar ilk kaynağı alır, diğerleri WebP'ye geçer, daha eski olanlar PNG'yi kullanır. Birçok barındırma platformu ve görsel CDN'i bu dönüşümü tarayıcının Accept başlığına göre sizin için yapar; bu da her formatı kendiniz üretmekten çoğu zaman daha basittir.

Formatlar arasında sürprizsiz dönüştürme

• PNG veya WebP'den JPEG'e: şeffaf alanlar düzleştirilir. Bazı araçlar varsayılan olarak siyah kullandığı için dolgu rengini araca bırakmak yerine kendiniz seçin (genellikle beyaz).
• JPEG'den PNG'ye: dosya büyür ama daha iyi olmaz. JPEG'de kaybedilen kalite geri gelmez.
• Herhangi bir formattan WebP veya AVIF'e: şeffaflığın korunduğunu ve renklerin doğru göründüğünü kontrol edin; görsel webde görüntülenecekse önce sRGB renk profiline dönüştürün.
• JPEG'leri yeniden kaydetmek: daha düşük kalitede yapılan her kayıt kaybı katlar. Ana dosyadan bir kez dışa aktarın.

Kesimler için daha hızlı bir seçenek

Toplu arka plan silme yapıyorsanız, removebackground.dev kesimi şeffaf PNG veya WebP olarak ya da herhangi bir düz renk üzerinde JPG olarak dışa aktarır; böylece aynı yüklemeden pazar yeri için beyaz üzerinde bir JPEG ve siteniz için şeffaf bir PNG üretebilirsiniz.