Portable Network Graphics

<div class="thumbinner" style=" width:px">

{{{obrázek1}}}{{{obrázek2}}}

PNG (Portable Network Graphics – anglicky přenosná síťová grafika; oficiální výslovnost zkratky je „ping“) je grafický formát určený pro bezeztrátovou kompresi rastrové grafiky. Byl vyvinut jako zdokonalení a náhrada formátu GIF, který byl patentově chráněný (LZW84 algoritmus), dnes jsou patenty prošlé. PNG nabízí podporu 24 bitové barevné hloubky, nemá tedy jako GIF omezení na maximální počet 256 barev současně. PNG tedy do jisté míry nahrazuje GIF, nabízí více barev a lepší kompresi (algoritmus Deflate + filtry). Navíc obsahuje osmibitovou průhlednost (tzv. alfa kanál), to znamená, že obrázek může být v různých částech různě průhledný (tzv. RGBA barevný model). Nevýhodou PNG oproti GIF je praktická nedostupnost jednoduché animace, pro kterou sice existují 2 návrhy APNG a MNG, které se ale zatím neprosadily. PNG se stejně jako formáty GIF a JPEG používá na Internetu.

Formát PNG nepodporuje systém kladení barev CMYK.

Podle MIME má PNG přidělen typ image/png.

Historie a vývoj

Impuls pro vytvoření formátu PNG přišel v roce 1994 kdy po dohodě firem Unisys a CompuServe došlo k licenčnímu zpoplatnění za použití formátu GIF. Po následných úpravách licence, se začala vztahovat nejen na velké firmy, ale i na programátory vyvíjející freeware, shareware a také programy šířené pod volnou licencí(GPL). Tato politika vyvolala velkou vlnu odporu, která vyvrcholila akcí „Burn All GIFs“, které se zúčastnily jak velké softwarové firmy, tak samotní programátoři na svých soukromých stránkách.

16.1.1995 firma CompuServe zahájila vývoj nového grafického formátu GIF, který měl nahradit stávající GIF formát. Nový formát pod názvem GIF24 neměl být zatížený patenty (změna komprimačního algoritmu), maximální počet barev měl být zvýšen z 256 na 16 milionů.

Současně s vývojem GIF24, ale ne u žádně softwarové firmy, se začal vyvíjet naprosto nový formát, který neměl být vázán žádným patentem ani vztahem k žádné firmě a předčil by tehdejší grafické formáty (především GIF, JPEG). Původní název zněl PBF (Portable Bitmap Format), ale posléze byl změněn na PNG (Portable Network Graphics).

• 1. října 1996 – byla uvolněna verze 1.0 se standardem RFC a W3C.
• 31. prosince 1998 – verze 1.1, s malým počtem změn a přidáním třech nových chunků.
• 11. srpna 1999 – verze 1.2, přidání jednoho extra chunku.
• 10. listopadu 2003 – Z PNG se stává mezinárodní norma (ISO/IEC 15948:2003). Tato verze PNG je mírně odlišná od verze 1.2, ale není zde žádný nový chunk.
• 3. března 2004 – ISO/IEC 15948:2004.

Technické detaily

Hlavička souboru

Hlavička souboru PNG má délku 8 bytů a je v každém souboru stejná. Hexadecimální vyjádření: 89 50 4E 47 0D 0A 1A 0A

Byte	Význam bytu
89	Jedná se o byte s nejvýše nastaveným bitem.Detekce podpory 8 bitového přenosu dat.
50 4E 47	Řetězec „PNG“ kódovaný v ASCII; slouží k identifikaci souborového formátu.
0D 0A	(CR LF) Konec řádky v DOSu kódovaný v ASCII. Detekce náhrady za jinou sekvenci.
1A	Byte zastavující výpis souboru v DOSu.
0A	V UNIXu detekce konce přenosu (LF).

Chunk uvnitř souboru

Po hlavičce přichází série chunků, z nichž každý zprostředkovává jistou informaci o obrazu. Chunky deklarují sebe jako „rozhodující“ nebo „pomocné“. Pokud se program setká s pomocným chunkem, kterému nerozumí, může ho bezpečně ignorovat. Struktura tohoto chunku je založena tak, aby dovolovala slučitelnost PNG formátů se staršími verzemi.

Každý chunk má hlavičku specifické velikosti a typu. Pak ihned následují vlastní data, posléze probíhá kontrolní součet dat. Chunky jsou dány čtyřmi znaky v ASCII s vlastností case sensitive. Rozdílnost znaků (pátý bit je číselná hodnota) poskytuje možnost dešifrovat informaci o povaze chunku v případě jeho nerozeznatelnosti.

První znak signalizuje, zda je chunk rozhodující nebo ne. Pokud je první znak velké písmeno, chunk je rozhodující; pokud ne, jedná se o pomocný chunk. Rozhodující chunk obsahuje informaci, která je nezbytná ke čtení souboru. Pokud dekodér nerozezná rozhodující chunk, čtení souboru se buď přeruší, nebo je uživatel informován vhodným varováním.

Druhý znak informuje, zda je chunk „veřejný“ (jedná se o jednoúčelový chunk) nebo „privátní“ (není standardizován). Velké písmeno značí veřejný a malé privátní chunk. To zajistí, že veřejný a privátní znak chunku se nemohou nikdy vzájemně střetnout.

Třetí znak musí být velké písmeno přizpůsobené podle PNG specifikace. Rezervovaný pro budoucí expanzi. V případě malého písmene na pozici třetího znaku by měl dekodér jednat s tímto chukem jako s jakýmkoliv jiným neznámým.

Čtvrtý znak signalizuje jestli je chunk bezpečný ke kopírování pomocí editorů, které ho nerozeznají. Je-li čtvrtý znak malé písmeno, chunk může být bezpečně kopírován bez ohledu na rozsah modifikací souboru. Je-li čtvrtý znak velké písmeno, může být kopírován jen pokud se modifikace nedotýkají žádných kritických chunků.

Komprese

PNG používá dvoustupňovou bezeztrátovou kompresi:

1. Před samotnou kompresí se snaží objevit běžné vzory (např. barevné pruhy, gradienty). Tento krok se nazývá filtering.
2. Komprese - PNG ke kompresi používá metodu DEFLATE, tu využívá i zlib - knihovna pro kompresi souborů. DEFLATE kombinuje slovníkový algoritmus LZ77 a Huffmanovo kódování.

Porovnání s JPEG

Porovnání JPEG a PNG: všimněte si roztřepených okrajů v JPEG oproti čistým okrajům PNG.

JPEG může vytvářet menší soubory než PNG pro fotografie a fotorealistické vizualizace, protože JPEG používá ztrátovou kompresi speciálně navrženou pro fotografii. PNG má ve stejné kvalitě až 5-10x větší soubory.

PNG je naopak lepší než JPEG pro obrázky obsahující text, čárovou grafiku, čisté barevné plochy a ostré rozhraní barev. JPEG nepodporuje průsvitnost (indexové barvy, alfa-kanál). Tam, kde se vyskytují jak fotografické, tak grafické prvky, se musíte rozhodnout mezi čistým zobrazováním bezeztrátového PNG, nebo malým souborem ztrátového JPEG.

JPEG je také špatným rozhodnutím pro archivování obrázků pro další zpracování a fotomontáž. To dělá PNG vhodnějším pro ukládání dočasných fotografií vyžadujících fotomontáž. Teprve finální fotografie určená k distribuci může být uložena jako JPEG ze ztrátou detailů pouze pro jednu generaci. PNG může obsahovat metadata, avšak nejsou nijak striktně definována, jako u JPEGu formát Exif obsahující informace o digitální kameře, čase, expozici, atd. které jsou potřebné pro profesionální fotografy (jak umožňuje např. TIFF).

JPEG je historicky předurčený formát pro distribuci velkých fotografií na internetu, pro které je lepší, než předtím používaný GIF. GIF je ovšem postupně vytlačován formátem PNG, protože má volnou licenci, umožňuje 24bit barvu a 8bit průsvitnost (alfa-kanál).

Problémy a řešení zobrazování obrázků PNG v IE 6 a 7

Průhlednost

Špatná interpretace průhlednosti PNG obrázků v IE6

IE 6, na rozdíl od většiny ostatních majoritních prohlížečů, nepodporoval u PNG průhlednost; průhledné plochy vykreslil šedě. Tento nedostatek způsoboval (a dodnes způsobuje) četné problémy s kódováním a laděním vzhledu webových stránek. Verze 7 už tímto handicapem netrpěla.

Možností, jak zprůhlednit PNG v IE6, je několik: pomocí kaskádových stylů (CSS), různými HTC skripty nebo speciálně navrženými javascriptovými kódy. Problém je v tom, že řešení nebyla stoprocentní, některá řešila průhlednost obrázku v HTML kódu (tag img), ale nepodporovala průhledný obrázek na pozadí nějakého elementu, jiná metoda nepodporovala částečnou průhlednost a tak dále.

Obrázky na pozadí lze zprůhlednit pomocí filtrů, kterými disponuje pouze IE, nejspíš jako záplata za nedokonalou implementaci podpory PNG, konkrétně filtr AlphaImageLoader. Ukázka v CSS:

#obrazek { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='obrazek.png',sizingMethod='scale'); }

CSS selektoru #obrazek rozumí tak, že najde HTML element s atributem id=“obrazek“, a tomu nastaví na pozadí obrazek.png, který bude díky filtru průhledný pro všechny verze IE. Nevýhoda tohoto způsobu použití je, že obrázku na pozadí už nemůžeme nastavovat další parametry jako například pozici nebo opakování.

Další možný způsob opravy průhlednosti je nějakým HTC či PHP souborem, například iepngfix.htc ze stránek http://www.twinhelix.com/css/iepngfix/. Ten funguje tak, že v CSS nastavíme elementu, ve kterém máme průhledný PNG vlastnost behavior s odkazem na uvedený soubor (ať už htc, nebo PHP). Tato cesta se vždy udává od kořenové složky webu. Příklad:

img  { behavior: url(iepngfix.htc); }

Tento selektor najde všechny elementy img (všechny obrázky) a nastaví jim chování (behavior) podle daného skriptu. Výsledný PNG se bude zobrazovat průhledně. Tato možnost funguje skvěle, ale už se neaplikuje na průhledné obrázky na pozadí a navíc je nutné načíst navíc tento skript a provést ho.

Řešení pomocí Javascriptu je na internetu celá řada; zde je ukázka DD_belatedPNG programátora Drewa Dillera.

<!--[if IE 6]>
  <script src="DD_belatedPNG.js"></script>
  <script>
     DD_belatedPNG.fix('.png_bg');
  </script>
<![endif]-->

<!--[if IE 6]> je takzvaný podmíněný komentář a říká prohlížeči, aby se podíval, jestli to náhodou není Internet Explorer 6, pokud ano, vloží se skript DD_belatedPNG.js a provede se příkaz DD_belatedPNG.fix('.png_bg'); kde je mezi závorkami opět CSS selektor, tento vybere elementy s atributem class=“png_bg“ a na ně aplikuje PNG průhlednost. Toto řešení nemá žádné z předchozích omezení, funguje jak pro elementy img, tak pro obrázky na pozadí, včetně opakování a pozicování. Je ale potřeba, aby měl návštěvník povolený Javascript.

Další systém, který nepodporuje bez ošetření průhlednost PNG, je PHP. Pokud chcete v PHP zobrazit průhledný PNG, použijte tento kód:

<?
  header("Content-type: image/png"); 
     //stránka bude jen obrázek
 $image = imagecreatefrompng($filepath); 
     //"$filepath" je proměnná s adresou URL, kde je umístěn obrázek;
     //do "$image" se vloží obrázek z "$filepath", se kterým se bude pracovat
 imagealphablending($image, false);
 $color = imagecolorallocatealpha($image, 0, 0, 0, 127);
 imagefill($image, 0, 0, $color);
 imagesavealpha($image, true);
 imagepng($image); 
     //nyní se obrázek zobrazí
 imagedestroy($image); 
 ?>

Gamma

Druhým problémem byla špatná interpretace gamma hodnot. Ta způsobovala, že obrázky se na každé platformě vykreslovaly s lehce odlišnými odstíny, někde světlejší, jinde tmavší. Tento problém se projevil zvláště v případě, kdy měl obrázek tvořit součást většího celku. Špatnou interpretací gamma hodnot trpí jak IE 6, tak 7.

Řešení pro správnou interpretaci gamma hodnot je překvapivě jednoduché. Existují programy, které umí zpracovat PNG obrázek tak, že mu výsledně rozumí a správně interpretuje i Internet Explorer. Jedním z takových programů je například PNGcrush , program, který je ke stažení i pod Windows, nemusí se instalovat a spouští se z příkazové řádky. Nejrychlejší postup je nahrát si PNGcrush do složky s PNG obrázky a v příkazové řádce zapsat:

pngcrush -rem alla -d out *.png

Výsledek jsou obrázky s kompatibilním zobrazením ve všech verzích IE na jakékoliv platformě.

Externí odkazy

• Porovnání formátů PNG a GIF článek na Root.cz
• Anatomie grafického formátu PNG článek na Root.cz
• PNGOUT Malý freeware program pro maximální kompresi PNG

Portály: Fotografie