PNG vs JPG: hangisini gerçekten kaydetmelisiniz?

Kayıpsız ve kayıplı, JPG'nin sahip olmadığı alfa kanalı ve metni bulanıklaştıran krom alt örnekleme ile her iki formatın ölçülen dosya boyutları.

August 9, 2026

PNG ve JPG bir soruda farklılık gösterir: dosya her pikseli tam olarak hatırlıyor mu? PNG hatırlar. JPG, insan gözünün zayıf olduğu detayları atar ve karşılığında çok daha küçük hale gelir. Bu tek ayrım, karşılaşacağınız hemen hemen her durumu belirler ve bir plaj fotoğrafı için bir yönde, bir elektronik tablo ekran görüntüsü için diğer yönde sonuçlanır.

Aşağıdaki her sayı, LeanImg'in kendi araçlarından, iki test dosyasında bir tarayıcı sekmesinde elde edilmiştir: texture.jpg 3840x2160 ve 538.6 KB, artı alpha.png 900x606 ve 942.4 KB şeffaf bir arka plana sahip. Bu araçları API yolları ve sunucu işlemleri olmadan geliştirdik, bu nedenle dosya asla makinenizden çıkmaz. Bu kategorideki çoğu site, görüntünüzü bir sunucuya yükler ve ardından bir saat sonra silme sözü verir. Burada silinecek bir şey yok, bu yüzden gizlilik sayfamız kısadır.

Hangisini seçmeliyim, PNG mi yoksa JPG mı?

Fotoğraflar JPG'ye gider. Ekran görüntüleri, logolar, grafikler, çizgi sanatı ve şeffaflık gerektiren her şey PNG'ye gider. MDN'nin format kılavuzu aynı ayrımı çizer. Akıllı modda sıkıştırıcımız, texture.jpg'yi 538.6 KB'den 286.1 KB'ye MozJPEG ile kalite 80'de, %47 kesimle aldı. Kaydırıcıyı 60'a çektiğinizde aynı fotoğraf 212.4 KB'ye düşer. 30'da ise 131 KB, %76 azalma.

Bu ayrım, her formatın sıkıştırma şeklinin bir sonucudur. JPG'nin tasarımı, komşu piksellerin birbirine karıştığını varsayar, bu da gradyanlar ve film grenleri için uygundur. Bir ekran görüntüsü, her metin kenarında bu varsayımı bozar. PNG, her pikseli komşularından tahmin eder ve ardından farkı azaltır, bu nedenle kullanıcı arayüzünün oluşturduğu aynı renklerin düz alanlarında en iyi işini yapar.

Kayıpsız sıkıştırma dosya boyutuna ne yapar?

Kayıpsız, çözülmüş piksellerin bit bit aynı geri geldiği anlamına gelir, bu da PNG spesifikasyonu tarafından gereklidir. Bu, dosyanın küçülmeyeceği anlamına gelmez. Sıkıştırıcımızın PNG modu, oxipng'yi seviye 3'te çalıştırır ve alpha.png'yi 942.4 KB'den 383.9 KB'ye düşürdü. Bu, her piksel değeri korunarak %59'luk bir azalma.

"Daha küçük dosya boyutu" PNG seçeneği farklı bir hayvandır. Bu, PNG yazılmadan önce resmi bir renk paletine indirger ve alpha.png 98.3 KB olarak çıktı. Bu %90'lık bir azalma. Bu, .png uzantısının neyi ima ettiğinden bağımsız olarak kayıplı bir sonuçtur, bu yüzden o görüntü bir ana kopyaysa orijinalini saklayın.

Neden JPG renkli metni ve ince çizgileri bulanıklaştırıyor?

Çünkü JPG, renkleri parlaklıktan daha düşük bir çözünürlükte saklar. Format, luma'yı iki krom kanaldan ayrı tutar, bu da ITU-T T.81 tarafından belirtilmiştir ve kodlayıcılar genellikle kromayı örnekleme oranını 2x2 piksel blokunu kapsayacak şekilde düşürür. 3840x2160 boyutundaki bir fotoğrafta texture.jpg bunu fark etmeyeceksiniz. Beyaz üzerine bir piksel kırmızı çizgide, o çizginin rengi, herhangi bir kalite ayarı uygulanmadan önce üç beyaz komşuyla ortalaması alınır ve hiçbir kaydırıcı pozisyonu bunu geri getiremez.

Ekran görüntüleri burada sorun yaratır. WebP'ye geçmek bunu atlatmaz, çünkü WebP'nin kayıplı modu 4:2:0 kromaya kilitlenmiştir ve aynı ortalamayı uygular. PNG, her pikselin tam RGB değerini korur, bu yüzden UI yakalamaları, QR kodları ve metin üst katmanları burada yer alır. Eğer PNG hala çok ağırsa, kuantize edin ve formatı koruyun.

JPG olarak kaydettiğimde şeffaflığa ne olur?

Doldurulur. JPEG, hiçbir modda alfa kanalı taşımaz, bu yüzden şeffaf piksellerinizin arkasında ne olacağını belirlemesi gereken bir şey vardır. PNG'den JPG'ye dönüştürücümüz, kodlamadan önce bunları beyaz üzerine birleştirir ve sıkıştırıcı, hedef formatın alfa kanalı olmadığında aynı şeyi yapar. O adım olmadan siyah çıkarlar, çünkü tamamen şeffaf bir piksel genellikle altında RGB 0,0,0 taşır.

O gidiş dönüşü tersine çeviremezsiniz. JPG'den PNG'ye geri dönmek, şeffaflığın olduğu yerde beyaz bir dikdörtgen ile size bir PNG verir, ayrıca ilk geçişte eklenen JPG artefaktları da gelir. Sıkıştırma ayrıca her türlü meta veriyi siler: EXIF, GPS, ICC profili ve gömülü küçük resim hepsi gider, ancak yönlendirme korunur. PNG ana kopyasını saklayın; buna ihtiyacınız olacak. Bir fotoğraftan bir nesneyi kesiyorsanız, arka plan kaldırıcı her zaman bu nedenle alfa ile PNG yazar, bu da bir kesitin neden yüklediğiniz JPG'den daha ağır geldiği ile ilgilidir ve ikon oluşturucu varsayılan arka plan rengini #ffffff olarak ayarlar, bu nedenle şeffaf bir logo beyaz bir kare üzerinde yer alır, ta ki o alanı değiştirmediğiniz sürece.

Neden PNG'm JPG'den çok daha büyük?

Fotoğrafik gürültü, PNG'nin tahmincisine çalışacak hiçbir şey vermez. Her satır, üstteki satırdan tahmin edilir ve geri kalan fark azaltılır, bu da düz bir düğme üzerinde harika ve grenli bir görüntüde neredeyse işe yaramaz. İki test dosyasına bakın. alpha.png 900x606 ve 942.4 KB geldi, oysa texture.jpg 3840x2160, piksel sayısının on beş katından fazla ve 538.6 KB geldi. Palet kuantizasyonu, bu farkı kapatan kaldıraçtır ve alpha.png'yi 98.3 KB'ye düşürdü.

WebP veya AVIF mi kaydetmeliyim ve soruyu atlayabilir miyim?

Bazen, ancak ölçmeye değer. texture.jpg'yi üç format için aynı kaydırıcı pozisyonu olan 80'de sıkıştırıcıdan geçirdik, sonra tekrar 63'te.

Kaydırıcı 80'de en büyük dosyayı üreten AVIF geriye dönük görünüyor ve sebep, kendi kodumuzda yatıyor. JPEG kaynağı için sıkıştırıcı, kaydırıcınızı kaynağın kuantizasyon tablolarından okuduğu kalite ile çarpar, bu nedenle 80 kaydırıcıda 60 olarak tahmin edilen bir kaynak aslında 48 olarak kodlanır. WebP ve AVIF 80'i yüzeysel olarak alır. 63'te, AVIF için akıllı mod varsayılanı, sıralama tersine döner: AVIF 186.9 KB ve WebP 200.6 KB olarak 538.6 KB kaynağına karşıdır. AVIF ayrıca JPEG ve WebP anında tamamlandığı için her kodlama başına 10 ila 11 saniye alır ve taahhütte bulunmadan önce tarayıcı desteğini kontrol etmekte fayda var. Bu karşılaştırmayı WebP'nin gerçekten JPG'yi yenip yenmeyeceği üzerine yazıda uzun bir şekilde ele aldık.

Karşımda bulunan dosyayla ne yapmalıyım?

Sıkıştırıcıyı açın. Dosyanızı iki kez çalıştırın. Eğer bir fotoğrafsa, önce akıllı modu seçin, ardından kaydırıcıyı 60'a itin ve iki çıktıyı tam yakınlaştırmada karşılaştırın. Eğer metin veya şeffaflık varsa, PNG'de kalın ve her iki PNG modunu deneyin: kayıpsız alpha.png'yi 383.9 KB'ye ve palet modunu 98.3 KB'ye getirdi. Görüntü 800px sütununa gidecekse, önce yeniden boyutlandırın, çünkü yeniden boyutlandırıcı PNG'yi kayıpsız yazar ve diğer her şeyi varsayılan olarak kalite 90 ile yeniden kodlar. Ve eğer hedef bir belgeyse, bir JPG, kalite 92 ile yeniden kodlanmış bir PDF sayfasına düşer, bu da planlamanız gereken bir ekstra nesil demektir.