PNG Nedir, Ne İşe Yarar?

PNG (Portable Network Graphics/Taşınabilir Ağ Grafikleri), bitmapler için patent dışı kayıpsız sıkıştırma algoritmasına dayalı bir grafik dosya formatıdır.

PNG Nedir?

PNG Dosya Formatı Nedir?

PNG dosyası, büyük ölçüde GIF formatının eksikliklerinin üstesinden gelmek için geliştirilmiştir.

Ayrıca görüntüleri daha derin bir kontrast ve diğer önemli verilerle birlikte saklamaya izin verir ve bir görüntü dosyası .png uzantısını kullanır.

PNG Formatı Tarihi

PNG, Unisys şirketinin GIF tarafından kullanılan LZW veri sıkıştırma algoritması için yazılım patentini uygulayacağını duyurmasının ardından 1995 yılında oluşturuldu.

GIF formatıyla ilgili başka sorunlar da vardı. Örneğin, bilgisayarlar zaten binlerce veya milyonlarca rengi desteklediğinde, bunu maksimum 256 renkten oluşan 8 bitlik paletlerle sınırlandırmak zorundaydı.

Başlangıçta, PNG’nin GIF olmadığı anlamına gelen yinelemeli bir kısaltma olarak adlandırılmaktaydı.

GIF, animasyonu desteklese de, bu dosya türü statik bir görüntü formatı olarak geliştirildi ve MNG formatı animasyonlu varyantı olarak oluşturuldu.

PNG, Ağustos 1999’da Unisys ücretsiz veya ticari olmayan yazılım geliştiricileri için telifsiz patent lisansları politikasını sona erdirdiğinde daha fazla kullanılan bir dosya türü oldu.

PNG Sürüm 1.0 spesifikasyonu 1 Temmuz 1996’da yayınlandı ve daha sonra RFC 2083 olarak çıktı. 1 Ekim 1996’da çok kısa bir sürede W3C tarafından önerilir duruma geldi.

31 Aralık 1998’de bazı küçük değişiklikler içeren 3 yeni uzantı veya chunks/yığın içeren sürüm 1.1 yayınlandı. Sürüm 1.2 sürümü 11 Ağustos 1999’da yayınlandı. PNG uluslararası bir standart olduğu için 10 Kasım 2003’te W3C tarafından herkese tavsiye edildi.

Dosya Segmentleri Özelliği

Her bir görüntü hakkında belirli bilgileri saklayan bir dizi bölüm vardır. Segmentler, yardımcı bir segmentle karşılaşan ve onu anlamayan bir programın güvenli bir şekilde görmezden gelebilmesi için kendilerini kritik veya yardımcı ilan ederler.

Segment tabanlı yapı, eski sürümlerle uyumluluğu korurken PNG formatını genişletmek için tasarlanmıştır.

Bölümlerin her biri, boyutunu ve türünü belirten bir başlığa ve ayrıca verilerin sağlama toplamına sahiptir. Bölümlerin büyük/küçük harf duyarlı 4 harfli bir adı vardır.

Bu isimde büyük veya küçük harf kullanımı, kod çözücülere tanınmayan bölümler hakkında bilgi sağlar. İlk harf büyükse bu bölümün gerekli olduğunu gösterir, aksi takdirde yardımcı olur.

Dosyayı okumak için bölümler gereklidir, kod çözücü tanımadığı önemli bir bölüm bulursa okumayı iptal etmelidir.

İkinci harfin büyük harfle yazılması durumunda, bu, bölümün özel amaçlı bölümlerin şartnamesi veya kaydında kamuya açık veya özel olduğu anlamına gelir.

Bu büyük ve küçük harf kullanımı, genel ve özel bölümler arasında hiçbir zaman çatışma olmamasını sağlar. PNG özelliklerini karşılamak için üçüncü harf büyük harfle yazılmalıdır ve bu gelecekteki genişletme için ayrılmıştır.

Dördüncü harf, tanınmaması durumunda bölümün kopyalanmasının güvenli olup olmadığını belirtir.

Küçük harf ise, dosyanın geçirdiği değişiklik miktarına bakılmaksızın bölümü kopyalamak güvenlidir, büyük harf ise yalnızca değişikliklere uğramış kritik bölümler yoksa kopyalanabilir.

Meta Veri Bölümlerini Anlama

PNG görüntüsünde kaydedilebilecek diğer öznitelikler gama değerleri, arka plan rengi ve metin bilgileridir. Ayrıca sRGB gibi renk yönetimi sistemleri tarafından kullanılan renk düzeltmesini de kullanır ve Adobe şirketinin Photoshop gibi bazı programları da bu sisteme sahiptir.

bKGD

Görüntü görüntüleyicide olduğu gibi görüntülenebilecek en iyi renk olmadığında ancak bir web tarayıcısında olmadığında kullanılan varsayılan arka plan rengini içerir.

cHRM

Beyaz dengesini oluşturur.

gAMA

Gama değerini belirtir.

hIST

Görüntüdeki her rengin histogramını veya toplam miktarını kaydeder.

iCCP

ICC renk profilini içerir.

iTXt

Sıkıştırılmış veya sıkıştırılmamış metin (UTF-8) içerir.

pHYs

Beklenen piksel boyutunu ve görüntü oranını içerir.

sBIT

Görüntüdeki renklerin doğruluğunu gösterir.

sPLT

Tüm renk yelpazesinin mevcut olmaması durumunda kullanılacak bir palet önerir.

sRGB

sRBG renk alanı standardının kullanıldığını gösterir.

tEXt

ISO 8859-1’de her bölüm için bir ad = değer ile temsil edilebilen metni depolar.

tIME

Son değişikliğin tarihini kaydeder.

tRNS

Şeffaflık hakkında bilgi içerir ve dizine alınmış görüntüler için bir veya daha fazla palet için alfa kanalını, gerçek renkli ve gri tonlamalı görüntüler için ise tamamen şeffaf olarak kabul edilmesi gereken tek bir pikselin bilgilerini depolar.

zTXt

tEXt ile aynı sınırlara sahip sıkıştırılmış metin içerir.

Bu bölümlerdeki ilk küçük harf bunların PNG spesifikasyonunda gerekli olmadığını, son küçük harf ise söz konusu uygulama bunları anlamasa bile kopyalamanın güvenli olduğunu belirtir.

PNG Renk Derinliği Özelliği

PNG formatındaki görüntüler, dizinlenmiş palet görüntüleri olabilir ve daha fazla kanaldan oluşabilir. Birden fazla kanal varsa, tüm kanallar piksel başına aynı sayıda bite sahiptir.

Resmi PNG spesifikasyonu kanal başına bit derinliği normalde düzenleme programları yalnızca piksel başına toplam bit sayısını (renk derinliğini) adlandırır.

Kanal sayısı, görüntünün gri tonlamalı veya renkli olmasına ve bir alfa kanalına sahip olup olmadığına bağlıdır.

İndekslenmiş görüntüler maksimum 256 renkle sınırlandırılır. Bu renk paleti, 8 bitlik bir kanal derinliği ile saklanır. Palet, bit derinliği ile işaretlenenlerden daha fazla renge, yani 28 = 256 renge sahip olamaz.

Görüntüde Şeffaflık Oranı

PNG çok çeşitli saydamlık seçenekleri sunar ve gerçek renk veya gri tonlama ile tek bir piksel bile saydam olabilir veya bir alfa kanalı eklenebilir.

Paletleri kullanan görüntüler için, palet girişlerine bir alfa kanalı eklenebilir. Bu tür saklanan değerlerin sayısı, paletteki toplam giriş sayısından daha az olabilir ve girişlerin geri kalanı tamamen opak kabul edilecektir.

İkili saydamlığa sahip piksellerin aranması, bazı piksellerin yanlışlıkla saydamlaşmasını önlemek için herhangi bir renk azaltmadan önce yapılabilir.

Sıkıştırma Özelliği

Bu formatta kullanılan sıkıştırma yöntemi, deflasyon olarakta bilinir.

Filtreleme yöntemlerinde spesifikasyon 1.2, görüntünün her satırı için görüntünün rengini tahmin eden bir filtreleme yönteminin seçildiği sıkıştırmayı geliştirmek için çok yararlı olan 5 piksel değer tahmin modlarını içeren tek bir filtre türünü tanımlar.

Böylece her piksel önceki piksel renklerini temel alır ve tahmin edilen rengi geçerli piksel renginden çıkarır. Bu beş yöntem ise None (Yok), Sub (Alt), Up (Yukarı), Average (Ortalama) ve Paeth’dir.

Bu filtreler, giriş görüntüsüne büyük ölçüde son dosya boyutunu önemli ölçüde azaltabilir. Sıkıştırma algoritması, en büyük indirgemeyi sunan uygun yöntem seçimiyle ilgilenebilir.

MIME ortam türü image/png’dir ve 14 Ekim 1996’da onaylanmıştır.

Animasyon/Hareketli Görüntü Özelliği

APNG, animasyonu destekleyen PNG tabanlı bir formattır ve kod çözücünün bu biçimi anlamaması durumunda tek bir görüntünün görüntülenmesini destekler. Firefox ve Chrome gibi tarayıcılar tarafından kabul edilir ve dosya uzantısı .png’dir.

MNG, animasyonu destekleyen, fikirlere ve PNG’nin bazı bölümlerine dayanan bir görüntü formatıdır. Ancak karmaşık bir sistemdir ve GIF ve APNG’nin yapması durumunda tek bir görüntünün görüntülenmesine izin vermez.

Diğer Formatlarla Karşılaştırma

GIF ile PNG Karşılaştırma

Çoğu durumda, GIF’den daha iyi sıkıştırma sağlar, ancak bazı uygulamalar filtreleme yöntemlerinde yetersiz seçim yapar ve daha büyük dosya boyutlarına neden olur.

GIF gibi, 1 bitlik veya ikili saydamlıkla indekslenmiş görüntüleri destekler. Bu tür bir şeffaflık, ek bir kanal gerektirmez ve paletteki yalnızca bir rengin %100 şeffaf görünmesine izin verir.

Bu format, milyonlarca renk derinliğine sahip formatları ve GIF’den çok daha zengin ve daha doğru renk aralıkları sağlayan ve aralarında şeffaflık değerleri olan bir alfa kanalı özelliğini sunar.

GIF animasyonu desteklerken bu format bunu desteklemez.

JPEG ile PNG Karşılaştırma

PNG ve JPEG farklı amaçlar için tasarlanmış görüntü formatlarıdır ve bu nedenle yalnızca genel bir karşılaştırma yapılabilir.

JPEG, görüntü kalitesinin zararına büyük bir sıkıştırma oranına sahiptir ve büyük görüntüler ve fotoğraflar için ideal bir dosya formatıdır fakat şeffaflığı kabul etmez.

Mükemmel sıkıştırmaya sahip kayıpsız bir formattır ve geniş düz renkli alanlardan oluşan veya az renk varyasyonu olan görüntüler için idealdir.

Ek olarak, alfa kanalını ve gama düzeltmesi gibi bazı ekstra özellikleri destekler.

Avantajları

Popüler GIF grafik formatını kullanan LZW sıkıştırma algoritması, Unisys şirketine aittir.

GIF formatı patentli olmasına rağmen, bu, web sayfalarında kullanılmak için İnternet’te en yaygın kullanılan grafik formatı olmasını engellemez.

Bu durumun bireysel tasarımcıları ve hatta kurumsal web sitelerinin profesyonellerini ve yöneticilerini etkilemesi pek olası olmamasına rağmen bu formatın Web alanında daha fazla kullanımı kanıtlanmıştır.

Bu format, World Wide Web Konsorsiyumu tarafından resmi olarak Ekim 1996’da yayınlandı.

Bu uluslararası konsorsiyumun diğer görüntü formatlarında olduğu gibi görüntüleri kullanan, oluşturan veya düzenleyen uygulamalar için herhangi bir lisans gerektirmeyen, kullanımı ücretsiz bir dosya türüdür.

PNG formatı, yüksek boyutlu sıkıştırma oranına sahip bit eşlem görüntüleri oluşturmanıza olanak sağlar. GIF formatı gibi kalite kaybı oluşturmaz, ancak daha yüksek bir ortalama sıkıştırma özelliğine sahiptir.

GIF’e benzemesine rağmen görüntünün web sayfasının gerçek arka planıyla iyi bir entegrasyonuna izin veren şeffaf arka planları destekler.

PNG, 16,7 milyon renge kadar renk derinliğini desteklemesi açısından GIF’ten daha üstündür. GIF, aynı görüntüde yalnızca maksimum 256 farklı rengi destekler. PNG’nin ayrıca standart ve aşamalı olmak üzere iki sıkıştırma modu vardır.

PNG Formatı Hakkında Merak Edilen Noktalar

Gördüğüm kadarıyla PNG ve JPEG arasında neden dağlar kadar kalite farkı var?

Bu sorunun cevabı tamamen sıkıştırma matematiğinde gizli. JPEG, kıyıda köşede kalmış pikselleri atarak dosyayı küçültür. Buna kayıplı sıkıştırma diyoruz. Fotoğraf gibi karmaşık karelerde gözümüz bu eksiği fark etmez.

Logo veya yazı gibi keskin kenarlı görsellerde ise durum değişir. JPEG algoritması, düz mavi bir zeminde titrek gölgelenmeler yaratır. Kahve içerken ekrana yakından bakarsanız, yazının etrafında karıncalanma görürsünüz.

Taşınabilir ağ grafiği formatı ise kayıpsızdır. Her pikseli olduğu gibi saklar. Bir tasarımcı olarak şunu bilmelisiniz: düz renk blokları ve metin içeren her şey PNG’nin doğal av sahasıdır. Sonuç, bıçak gibi keskin bir görüntü olur.

Şeffaf arka plan deyince aklıma hep PNG geliyor. GIF de şeffaflığı destekliyorsa onu neden tamamen tarihe gömdük?

GIF’in şeffaflığı dijital bir düğme gibidir: ya açıktır ya kapalı. Bir piksel ya tamamen saydamdır ya da opak. Bu, eğimli bir gölgeyi web sayfasının arka planına yedirmeye çalıştığınızda felaket bir piksel çerçevesi oluşturur.

PNG ise alfa kanalı denen bir olay getirir. Bu sayede yüzde 50 saydamlık veya yüzde 10 flu bir kenar elde edebilirsiniz. Modern arayüzlerdeki pürüzsüz cam efekti bu ara tonlar sayesinde mümkün.

Buna ek olarak GIF paleti 256 renkle sınırlıdır. Şeffaflığı kullansanız bile renkler soluk ve özensiz durur. Bu dosya türü milyonlarca rengi şeffaflıkla birleştirerek GIF’in bıraktığı boşluğu şahlandırır.

Dosyayı kaydederken 'Interlaced' diye bir seçenek çıkıyor. Bu özelliği açmak hızı yavaşlatır mı?

Bu, Adam7 algoritmasıyla çalışan aşamalı bir yükleme yöntemidir. 90’ların çevirmeli ağ hızlarını hatırlayanlarınız olacaktır. Sitenin önce bulanık bir ön izlemesi gelirdi ve veri aktıkça netleşirdi. İşte interlaced bunu yapar.

Bugün fiber bağlantılarda bu özellik dosya boyutunu bir nebze şişirebilir. Fakat büyük ve yüksek çözünürlüklü bir portfolyo görseli yüklüyorsanız hâlâ kritik rol oynar. Ziyaretçiye boş bir kutu yerine anında bir fikir verir.

Kullanıcı deneyimi takıntılı biri olarak benim kuralım şudur: Eğer görsel 300KB’tan büyükse ve sayfanın üst kısmındaysa interlaced açıyorum. Minik ikonlarla uğraşmaya değmez, doğrudan statik olarak optimize edip geçin.

Ekran görüntüsü alırken hep PNG kullanıyorum ama dosya boyutu bazen neden JPEG'i bile solluyor?

Harika bir noktaya parmak bastınız. PNG’nin hüneri, fotoğraf sıkıştırmak değildir. Kayıpsız algoritma, gürültülü fotoğraf karelerinde devasa dosyalar üretir. Ekran görüntülerinde ise durum farklıdır.

Modern arayüzler düz yüzeyler, gölgeler ve tipografiden oluşur. Bu, deflate sıkıştırma algoritmasının iştahını kabartan bir veri setidir. Yani aynı işletim sistemi penceresini JPEG yaparsanız bulanık olur, PNG yaparsanız hem keskin hem de şaşırtıcı derecede küçük olur.

Fotoğraf kalitesinde bir manzara kaydediyorsanız elbette bu format JPEG veya WebP karşısında dosya boyutunda ezilir. Burada sihirli bir kural yok. Düz renkli arayüz yakalıyorsanız PNG, karmaşık ve renk geçişli bir sahne yakalıyorsanız JPEG tercihidir.

Tarayıcımda çıktı alırken logomun renkleri ekrandakinden farklı duruyor. Suçlu gerçekten PNG mi?

Kesinlikle evet ve bu durum çoğu tasarımcının gözden kaçırdığı bir detaydır. PNG dosyası, gAMA adlı bir meta veri yığını taşıyabilir. Bu parça, görüntünün hangi parlaklık seviyesinde yaratıldığını sisteme söyler.

Sorun şu ki, her ekran bu talimatı dinlemez. macOS bu veriyi harfiyen uygularken, Windows geçmişte bunu görmezden gelirdi. sRGB renk profili gömülü değilse, renkler bir bilgisayarda sönük, diğerinde patlamış görünebilir.

Size tavsiyem, dosyayı web için dışa aktarırken gama parçasını silmek veya sRGB profiline dönüştürmek olacaktır. Bu şekilde kontrolü ele alırsınız. Görseli tarayıcının insafına bırakmazsınız ve baskı öncesi tutarlılık sağlarsınız.

Hareketli simgeler için GIF yerine APNG kullanmak mantıklı mı?

APNG, animasyonu destekleyen PNG tabanlı bir biçimdir ve GIF’in titrek tahtına göz dikmiştir. GIF yalnızca 256 renkle dans ederken, APNG 24-bit renk ve alfa saydamlıkla sahnede fırtına gibi eser.

Tarayıcı uyumu artık neredeyse kusursuz. Firefox ve Chrome uzun süredir destekliyor. Performans tarafında ise dikkatli olmak gerekir. Karmaşık animasyonlu bir APNG, aynısının GIF halinden daha şişman olabilir.

Benim stratejim basit. Birkaç karelik mikro etkileşimler ve yükleme animasyonları için APNG biçilmiş kaftan. Ancak uzun video benzeri döngüler için yine de sıkıştırılmış bir HTML5 videosu daha akıllıcadır. Elinizdeki işe göre karar verin.