JPG mi, PNG mi, WebP mi, AVIF mi? Dört formatın sıkıştırma davranışını, saydamlık desteğini ve dosya boyutu farkını karşılaştırıp elinizdeki dosya için net bir karar akışı çıkarıyoruz.
Bir sayfanın indirilen ağırlığının büyük bölümünü metin değil resimler oluşturur. Doğru görsel formatı seçmek, aynı görüntüyü üçte bir dosya boyutuyla sunmak demektir; yanlış seçim ise hem yavaş açılan bir sayfa hem de tırtıklı kenarlar, kaybolmuş saydamlık ya da bozulmuş renk geçişleri anlamına gelir. Bu yazıda dört yaygın raster biçimini teknik davranışlarıyla ele alıyor, sonunda elinizdeki dosyayı hangi biçime çevirmeniz gerektiğini söyleyen kısa bir karar akışı bırakıyoruz.
Pratik tarafı hemen halletmek isterseniz dönüşümleri tarayıcıdan yapabilirsiniz: JPG'den WebP'ye dönüştürücü, PNG'den WebP'ye dönüştürücü, WebP'den AVIF'e dönüştürücü ve tersine dönüş için AVIF'ten PNG'ye dönüştürücü aynı yükleme akışını paylaşır. Boyutu kırpmak yerine kaliteyi düşürerek küçültmek istiyorsanız görsel sıkıştırıcı daha doğru araçtır.
Biçim tartışması genellikle “hangisi daha küçük” sorusuna indirgeniyor, oysa üç ayrı eksende karar veriyorsunuz: sıkıştırmanın kayıplı mı kayıpsız mı olduğu, saydamlığı taşıyıp taşımadığı ve dosyanın nerede açılacağı. Bu üç eksen birbirini keser. Kayıpsız bir biçim seçtiğinizde ekran görüntülerindeki keskin yazılar korunur ama fotoğrafta dosya birkaç kat büyür. Kayıplı bir biçim seçtiğinizde fotoğraf küçülür, fakat aynı dosyayı defalarca yeniden kaydederseniz bozulma birikir.
Kayıplı sıkıştırma, insan gözünün fark etmekte zorlandığı ayrıntıları atarak yer kazanır. Renk geçişlerinin yumuşak olduğu fotoğraflarda bu son derece verimlidir; %80 civarı bir kalite değerinde çoğu fotoğraf, orijinalinin beşte biri kadar yer kaplar. Kayıpsız sıkıştırma ise hiçbir pikseli atmaz, yalnızca tekrar eden desenleri kısaltarak kodlar. Düz zeminler, logolar, arayüz ekran görüntüleri ve grafikler bu yöntemde çok iyi sıkışır; fotoğraf ise neredeyse hiç küçülmez.
Buradan çıkan kural basittir: içerikte gürültü ve doğal doku varsa kayıplı, keskin kenar ve düz renk alanı varsa kayıpsız tarafa geçin. Aradaki farkı gözle ölçmek için aynı dosyanın iki çıktısını yan yana koyup metin kenarlarına ve gökyüzü gibi geniş düz alanlara bakmak yeterlidir.
Saydamlık, dosyada ayrı bir alfa kanalı olarak saklanır. PNG, WebP ve AVIF bu kanalı taşır; JPG taşımaz. Saydam bir logoyu JPG'ye çevirdiğinizde boş alanlar beyaza ya da siyaha düşer ve bu geri alınamaz. Bu yüzden şeffaf zeminli bir dosyayı küçültmek istediğinizde önce PNG'yi WebP'ye almak, JPG'ye geçmekten çok daha güvenlidir. Zemin zaten düz beyazsa ve saydamlığa ihtiyacınız yoksa PNG'den JPG'ye dönüştürücü ile ciddi yer kazanırsınız.
JPG 1990'lardan beri her yerde açılıyor ve hâlâ fotoğraf için makul bir seçim. Sekiz bit renk derinliği, alfa kanalı yok, sıkıştırma yalnızca kayıplı. En büyük zayıflığı düz zemin üzerindeki keskin kenarlarda görünen halka biçimli bozulmalar; ekran görüntüsü ve yazı içeren grafikler için uygun değil. En büyük gücü ise uyumluluk: e-posta istemcilerinden eski panolara kadar her yerde sorunsuz açılıyor.
PNG kayıpsızdır ve alfa kanalını tam olarak taşır. Arayüz ekran görüntüleri, logolar, ikonlar, çizgi grafikler ve içinde yazı bulunan her türlü görsel için doğru tercih. Fotoğrafta ise dezavantajlı: aynı fotoğrafın PNG hâli, kaliteli bir JPG'nin üç ila sekiz katı yer kaplayabilir. PNG'yi fotoğraf arşivi olarak kullanmak, sayfa hızını en hızlı bozan alışkanlıklardan biridir.
WebP hem kayıplı hem kayıpsız modda çalışır, alfa kanalını her iki modda da taşır ve animasyon destekler. Pratikte aynı görsel kalitede JPG'den yaklaşık dörtte bir, PNG'den ise çoğu grafikte üçte bir daha küçük dosya üretir. Tarayıcı desteği artık sorun değil; masaüstü ve mobilde yaygın biçimde açılıyor. Bugün üretilen bir web sitesinde varsayılan olarak WebP'yi seçmek, çoğu durumda en az riskli karardır.
AVIF, AV1 video kodeğinin durağan görüntü hâlidir. Aynı algılanan kalitede WebP'den de belirgin biçimde küçük dosya üretir, on bit renk derinliğini ve geniş renk gamını destekler, alfa kanalını taşır. Bedeli kodlama süresidir: aynı dosya AVIF'e çevrilirken JPG'ye göre kat kat daha uzun sürer. Bu yüzden AVIF, tek tek üretilen kapak görselleri ve ürün fotoğrafları için mükemmel, saniyede yüzlerce dosya üreten bir işlem hattı için tartışmalıdır.
| Özellik | JPG | PNG | WebP | AVIF |
|---|---|---|---|---|
| Sıkıştırma | Kayıplı | Kayıpsız | Kayıplı + kayıpsız | Kayıplı + kayıpsız |
| Alfa kanalı | Yok | Var | Var | Var |
| Animasyon | Yok | Yok (APNG hariç) | Var | Var |
| Renk derinliği | 8 bit | 8 / 16 bit | 8 bit | 8 / 10 / 12 bit |
| Tipik fotoğraf boyutu | Referans | %300 – %800 | %60 – %75 | %40 – %55 |
| Kodlama hızı | Çok hızlı | Hızlı | Orta | Yavaş |
| En uygun içerik | Fotoğraf | Logo, ekran görüntüsü | Genel amaçlı web | Kapak, hero görseli |
Tablodaki boyut oranları aynı kaynak dosyanın farklı biçimlerde, gözle ayırt edilemeyecek kalitede kaydedilmesiyle elde edilen tipik değerlerdir. Kendi görselinizde sayıların bir miktar kayması normaldir; kritik olan sıralamanın değişmemesidir. Bir görsel formatı karşılaştırmasında en çok yanıltan şey, tek bir örnek dosyaya bakıp genelleme yapmaktır: portre fotoğrafı, ekran görüntüsü ve düz renkli bir illüstrasyon aynı ayarlarda birbirinden çok farklı davranır.
Bu akış çoğu durumu tek adımda çözer. Kalan gri alan, aynı görselin hem web'de hem baskıda kullanılacağı durumdur; orada kaynağı kayıpsız saklayıp yayın kopyalarını ayrı üretmek en sağlıklısıdır.
Bir sayfanın tamamını tek bir biçime bağlamak zorunda değilsiniz, hatta bağlamamalısınız. Tipik bir ürün sayfasında kapak fotoğrafı AVIF, galeri küçük resimleri WebP, marka logosu ve ikonlar ise saydamlığı korumak için PNG olabilir. Ziyaretçi bunu fark etmez; yalnızca sayfanın hızlı açıldığını görür. Karışık kullanımın tek şartı düzendir: hangi klasördeki dosyanın hangi biçimde tutulacağını baştan yazın, aksi hâlde altı ay sonra aynı görselin dört kopyası dört ayrı biçimde dolaşmaya başlar. Dosya adlarına biçim bilgisi eklemek yerine klasör düzeyinde ayırmak, yayın sırasında yanlış dosyayı seçme riskini azaltır.
Tarayıcı üzerinden çalışan dönüştürücülerde de bazı somut sınırlar var; işi planlarken bunları bilmek zaman kazandırır.
Bir başka pratik uyarı: kayıplı bir dosyayı açıp yeniden kayıplı kaydetmek her turda kalite kaybeder. JPG'den WebP'ye, oradan AVIF'e zincirleme dönüşüm yapmak yerine, elinizdeki en kaliteli kaynaktan her hedef biçime ayrı ayrı çıkış almak daha doğrudur.
Güncel masaüstü ve mobil tarayıcıların tamamına yakınında açılıyor. Riskli olan senaryo tarayıcı değil, dosyayı tarayıcı dışında açan yazılımlar: bazı eski görsel düzenleyiciler ve kurumsal panolar hâlâ WebP kabul etmiyor. Böyle bir hedefe dosya göndereceğinizde JPG veya PNG kopyası üretin.
Görselleri elle hazırlıyorsanız evet, çünkü dosya boyutu kazancı gerçek. Otomatik bir işlem hattı kuruyorsanız kodlama süresini ölçün: yüzlerce görselin AVIF'e çevrilmesi, aynı işin WebP hâlinden kat kat uzun sürer ve sunucu yükünü hissedilir biçimde artırır.
Arşiv kopyası olarak zararı yok, hatta ileride yeniden düzenleyecekseniz faydalı. Zarar, aynı PNG'yi doğrudan sayfada yayınlamaktan doğar: aynı görüntü için ziyaretçiye gereksiz yere birkaç megabayt indirtirsiniz.
Çıktıyı orijinaliyle aynı ekranda, %100 yakınlaştırmada karşılaştırın ve üç bölgeye bakın: yazı kenarları, geniş düz renk alanları ve koyu tonlardaki geçişler. Bozulma önce bu üç yerde görünür. Kabul edilebilir sonucu veren en düşük kalite değerini not edip aynı türden görsellerde tekrar kullanın.
Konunun devamı için sıkıştırmanın hız üzerindeki etkisini ölçtüğümüz görsel sıkıştırma ve web performansı yazısına, vektör tarafını ayrı ele aldığımız SVG dosyası rehberine ve dosya adından alt metne kadar yayın öncesi kontrol listesini topladığımız SEO için görsel optimizasyonu yazısına bakabilirsiniz.
