shadcn.io— binlerce hazır shadcn/ui bloğu
İçeriğe geç

PNG mi JPG mi? Karar vermek için kullandığım on yıllık kural

PNG ve JPG, «bu görseli kaydet» sorusunun yirmi yıldan uzun süredir iki varsayılan cevabı oldu ve çoğu insan ikisi arasında kazara seçim yapıyor — dışa aktarma penceresi hangisini varsaydıysa o. Bu, birine 9 MB'lık bir ekran görüntüsü e-postaladığınız ya da çevresinde çirkin gri bir hâle olan bir logo yayına aldığınız güne kadar işe yarar; işte o an seçim önem kazanır.

Mesele şu: karar gerçekten basit. Yaklaşık on yıldır sorduğum tek bir soruya iner ve beni bir kez bile yüzüstü bırakmadı.

Tek soru

Bu görsel kenarlardan mı yapılmış, yoksa ışıktan mı?

Hepsi bu. Metin, logolar, simgeler, ekran görüntüleri, şemalar, çizgi işleri, sert sınırları ve düz renk bölgeleri olan her şey — bunlar kenarlardır. Fotoğraflar, degradeler, pürüzsüz sürekli tonu ve binlerce ince renk kayması olan her şey — bunlar ışıktır.

Kenarlar PNG ister. Işık JPG ister. Neredeyse her şey bundan çıkar.

Kenarlar neden PNG ister

PNG kayıpsızdır. Kaydettiğiniz her piksel, kaç kez yeniden açarsanız açın, sonsuza dek tam olarak geri gelir. Aynı rengin dizilerini bularak sıkıştırır, ki kenar temelli görseller tam da bununla doludur — düz bir düğme, beyaz bir arka plan, siyah bir çizgi. PNG bunu silip süpürür ve jilet gibi keskin kalır.

Bir de alfa kanalı vardır, yani gerçekten saydam olabilir. Renkli bir arka plana bırakmak istediğiniz her logonun PNG olması gerekmesinin nedeni budur. JPG'de saydamlık hiç yoktur — o alanları beyazla doldurur, çirkin hâle de oradan gelir.

Hata durumu fotoğraflardır. Bir fotoğrafı PNG kaydedin, her sensör gürültüsünü ve her mikro degradeyi tam sadakatle uslu uslu kaydeder ve dosya şişer. PNG savurgan olduğu için kötü değildir. Gözünüzün seve seve affedeceği ayrıntı konusunda dürüst olduğu için savurgandır.

Işık neden JPG ister

JPG kayıplıdır. Gözünüzün fark etmekte kötü olduğu bilgiyi atar — ince renk çeşitlemesi, yüksek frekanslı ayrıntı — ve bunu fotoğraflarda dikkat çekici biçimde iyi yapar. Bir fotoğrafın bol bol harcayabileceği şey tam da budur. Sonuç, boyutun küçük bir kesri kadar bir dosyadır ve neyin eksildiğini göremezsiniz.

Ama JPG'yi kenarlara yöneltin, dağılır. Sert sınırların çevresine — özellikle metnin çevresine — bulanık bozulmalar bulaştırır, çünkü keskin kenarlar tam da atmak için tasarlandığı yüksek frekanslı ayrıntıdır. Kodun bir JPG ekran görüntüsü, her harfin çevresinde hafif kirli görünür. Bu monitörünüz değil. Bu, yanlış girdide tasarlandığı gibi çalışan biçimdir.

Meseleyi çözen boyut tablosu

Aynı iki kaynak görsel, makul ayarlarla her iki şekilde de kaydedildi:

GörselPNG olarakJPG olarak
Bir fotoğraf — 12 MP~14 MB~3 MB
Metinli bir arayüz ekran görüntüsü~600 KB~900 KB
Düz iki renkli bir logo~20 KB~85 KB

Her iki yönde de okuyun. Fotoğraf JPG olarak neredeyse 5 kat daha küçük, üstelik görünür bir kayıp yok. Ama ekran görüntüsü ve logo JPG olarak daha büyük — ve hâle ve bulanıklıkla daha kötü de görünürlerdi. Hangisinin daha küçük olduğu, resmin içindekine göre tamamen tersine döner. Bütün ders üç satırda bu.

Uç durumlar (bilmeye değer yalnızca iki tane var)

Saydamlık PNG'yi zorunlu kılar. Görselin herhangi bir kısmının şeffaf olması gerekiyorsa, içeriği ne olursa olsun JPG masadan kalkar, çünkü fiziksel olarak bir alfa kanalı saklayamaz. Saydam arka planda kesilmiş bir fotoğraf bile PNG (ya da WebP) olmak zorundadır.

Fotoğraf-üstü-metin bir muhakeme meselesidir. İçine altyazı gömülmüş bir fotoğraf kısmen ışık, kısmen kenardır. Çoğunlukla fotoğrafsa JPG'ye giderim ve biraz yumuşak metni kabul ederim; ya da metnin keskin kalması gerekiyorsa ve boyutu göze alabiliyorsam PNG. Temiz bir kazanan yok; hangi kusuru tercih ettiğinizi seçersiniz.

Zaten yanlış olan elinizdeyken

Çoğu zaman dışa aktarırken seçim yapmıyorsunuz — birinin zaten yanlış kaydettiği bir dosyaya mahkûmsunuz. Bir fotoğrafçı size 14 MB'lık PNG'ler verdi. Bir tasarımcı, hâleli bir JPG olarak logo gönderdi. İşte bu düpedüz bir dönüşümdür.

Akıllı yöne gitmek — çok ağır kaydedilmiş bir fotoğraf için PNG'den JPG'ye — apaçık bir kazançtır ve tam burada tarayıcınızda çalışır, yani dosya cihazınızdan hiç çıkmaz. Öbür yöne gitmek — JPG'den PNG'ye — dürüst ama sınırlıdır: dosyayı bundan sonrası için kayıpsız yapar, ki düzenlemeden önce istediğiniz budur, ama JPG'nin zaten pişirdiği bozulmaları geri alamaz. Kayıplı tek yönlü bir kapıdır. PNG'ye çevirmek sizi geri yürütmez; yalnızca daha fazla şey kaybetmenizi durdurur.

Tek soruyu sorun — kenar mı ışık mı — ve neredeyse her seferinde haklı çıkarsınız. Ben hâlâ her dışa aktarmada soruyorum. Yarım saniye sürüyor ve beni bir sürü gri hâleden kurtardı.

İlgili yazılar


Tüm yazılar