PNG ve JPG: hangisi ne zaman kullanılır

Özet. Kayıpsız olduğu ve alfa kanalını desteklediği için ekran görüntüleri, logolar ve keskin kenarlı ya da saydam içerikler için PNG kullanın. Kayıplı DCT sıkıştırması algılanabilir kalite kaybı olmadan 5-10 kat daha küçük dosyalar ürettiği için fotoğraflar için JPG kullanın.

İki resim formatı, her ikisi de 30+ yıllık, her ikisi de hâlâ yaygın ve her ikisi de farklı durumlarda doğru seçim. Temel kural basittir: ekran görüntüleri, logolar ve keskin kenar veya saydamlık içeren her şey için PNG; fotoğraflar için JPG. Bu kuralın altındaki mantık, kuralın kendisinden daha ilginçtir.

Temel farklar

Fotoğraflarda kayıplı sıkıştırmanın neden kazandığı

JPG’nin sıkıştırma algoritması — ayrık kosinüs dönüşümü (DCT), ardından kroma alt örnekleme ve Huffman kodlaması — insan görsel sistemi etrafında tasarlanmıştır. Algoritma, gözün kolayca göremediği bilgileri atar:

• Kroma alt örnekleme. İnsan görüşü renge (kroma) kıyasla parlaklığa (luma) çok daha duyarlıdır. JPG rengi parlaklığın yarısı çözünürlüğünde depolar — normal izlemede görünmez.
• Frekans alanı niceleme. Fotoğraflarda çok fazla yüksek frekanslı gürültü bulunur (ince degradeler, doku, sensör tanesi). DCT görüntüyü frekans bantlarına ayırır; JPG yüksek frekanslı bantları agresif biçimde niceler. Zaten bilinçli olarak görmediğiniz ayrıntıları kaybedersiniz.

4K fotoğraf için 85 kaliteli JPG, dosya boyutunun onda birinde çoğu izleyiciye kayıpsız orijinalden ayırt edilemez görünür. Bu oran eşsizdir.

Ekran görüntüsü ve loglarda kayıplı sıkıştırmanın neden başarısız olduğu

Düz bölgeler ve keskin kenarlar, JPG’nin frekans alanı matematiği için tam olarak yanlış içerik türüdür. Algoritma sert kenarların çevresinde halkalama artefaktları oluşturur (metin yakınında soluk haleler olarak görünür) ve fotoğrafta güzelce gizlenen kroma alt örnekleme, doymuş bir marka rengi yanında belirgin renk kaymaları olarak ortaya çıkar.

PNG’nin DEFLATE sıkıştırması ise tam tersidir. 24 bit renk tam olarak 24 bit renk olarak saklanır. Düz bölgeler güzelce sıkıştırılır çünkü uzunluk kodlaması tekrarı fark eder; keskin kenarlar keskin kalır. Tipik bir arayüz ekran görüntüsü PNG olarak, aynı ekran görüntüsünün JPG olarak kaydedilmesinden daha küçük olabilir.

Saydamlık sorusu

JPG’nin alfa kanalı yoktur. “Saydam JPG” diye bir şey yoktur; format fiziksel olarak bunu saklayamaz. Dikdörtgen olmayan bir arka plan üzerine oturacak bir şeye — logolar, simgeler, çıkartma tarzı kesimler, katmanlı her şey — ihtiyaç duyuyorsanız, ikisinden yalnızca PNG çalışır.

Bazen denenen geçici çözüm, JPG arka planını hedef arka plan rengiyle eşleştirmektir. Bu yalnızca tek bir hedef için işe yarar ve varlık yeniden kullanıldığında bozulur. Bunu yapmayın. PNG kullanın veya daha iyisi SVG gibi vektör formatı kullanın.

Ne PNG ne de JPG doğru yanıt olmadığında

Üç durum:

1. Vektör grafikler. Logolar, simgeler ve çizimler mümkünse SVG olarak gönderilmelidir. Vektörler her çözünürlüğe ölçeklenir, her ekranda keskin kalır ve genellikle birkaç yüz bayta sıkıştırılır. PNG sizi tek çözünürlüğe kilitler.
2. Modern web fotoğrafları. WebPkullanın (desteklendiğinde AVIF). Her iki format da eşdeğer görsel kalitede JPG’den %25-50 daha küçük dosyalar üretir ve her ikisi de alfa kanalını destekler. JPG’den WebP’ye dönüştürücümüz ve PNG’den WebP’ye dönüştürücümüz dönüşümü tarayıcıda yapar. WebP desteklemeyen küçük istemci payı için <picture>ile JPG’ye geri dönün.
3. Satır içi arayüz görselleri. Bazen doğru yanıt ayrı bir dosyayı tamamen atlamaktır. Görsel-Base64 aracımız herhangi bir görseli doğrudan HTML, CSS veya JSON’a yapıştırabileceğiniz bir veri URI’si olarak kodlar. Görsel küçükse (<~10 KB) ve ayrı bir HTTP isteği kritik işleme yolunu yavaşlatacaksa kullanışlıdır.

Karar ağacı

1. Saydamlık gerekiyor mu? → PNG (veya vektörse SVG).
2. Fotoğraf veya fotoğraf benzeri mi? → JPG veya web için WebP.
3. Ekran görüntüsü, arayüz kaydı veya düz renkli grafik mi? → PNG.
4. 10 KB’ın altında ve bir kez kullanılıyor mu? → Base64 satır içi.
5. Logo veya simge mi? → SVG. Yedek olarak PNG.

Bu, vakaların yaklaşık %95’ini kapsar. %5’i genellikle her iki formatı da deneyip dosya boyutlarını karşılaştırarak çözülür — hiçbir algoritma sihirli değildir ve doğru yanıt belirli içeriğe bağlıdır.

Sayısal gerçekler

• Maksimum boyutlar: PNG 2³¹−1 × 2³¹−1 px’e kadar (teorik); JPG 65.535 × 65.535 px ile sınırlıdır (16 bitlik alan).
• Bit derinliği: PNG kanal başına 1/2/4/8/16 bit + alfa destekler; JPG kanal başına 8 bit sabit, 3 kanal (alfa yok). 12 bit JPG var ama tarayıcılarda nadiren destekleniyor.
• Renk derinliği avantajı: 16 bit PNG = 281 trilyon renk ile JPG’nin 16,7 milyonu — yalnızca HDR kaynaklar ve degrade bantlanma çalışmaları için anlamlı.
• Tipik dosya boyutu oranı (85 kaliteli 4K fotoğraf): PNG ~12 MB’ye karşı JPG ~1,5 MB — yaklaşık 8 kat.
• Tipik dosya boyutu oranı (arayüz ekran görüntüsü, düz renk): PNG ~80 KB’ye karşı JPG ~180 KB — PNG yaklaşık 2 kat daha küçük.
• JPG kalitesi ve algısal: q=95 çoğu içerikte görsel olarak kayıpsızdır; q=80 web için en iyi nokta; q=60 yüzlerde ve degradelerde artefaktlar göstermeye başlar.
• Kroma alt örnekleme 4:2:0: kroma’yı çeyrek çözünürlükte depolar, fotoğraflarda minimal algısal etkiyle ~%50 dosya boyutu tasarrufu sağlar ancak metin üzerinde görünür halkalama oluşturur.
• PNG sıkıştırma seviyeleri: libpng’de 0-9; seviye 9, seviye 6’dan ~%5-15 daha küçük dosyalar üretir ama ~3-5 kat daha uzun sürer. oxipng ve zopflipng ek %10-20 tasarruf sağlayabilir.
• Nesil kaybı: 85 kalitede 10 kez yeniden kaydedilen JPG, orijinale kıyasla ~3 dB PSNR düşer; PNG kayıpsız olduğundan nesil kaybı = 0.
• APNG ile GIF dosya boyutu: eşdeğer GIF’e kıyasla tipik olarak %50-70 daha küçük, daha yüksek renk derinliğiyle.

Karar matrisi

Kaynaklar

• W3C / ISO 15948 — Portable Network Graphics (PNG) Specification, Third Edition — w3.org/TR/png.
• ITU-T T.81 (ISO/IEC 10918-1) — Information technology – Digital compression and coding of continuous-tone still images (JPEG temel spesifikasyonu) — itu.int.
• Wallace, G.K. — The JPEG Still Picture Compression Standard, Communications of the ACM, Nisan 1991 — orijinal hakemli JPEG makalesi.