|
== 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í([[GNU General Public License|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.
== Technické detaily ==
=== Hlavička souboru ===
Hlavička souboru PNG má délku 8 [[Byte|bytů]] a je v každém souboru stejná. [[Šestnáctková soustava|Hexadecimální]] vyjádření: 89 50 4E 47 0D 0A 1A 0A
Č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átová komprese|bezeztrátovou kompresi]]:
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 ===
[[File:Průhlednost v IE6.png|thumb|Š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'); }
[[Kaskádové styly|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 ==
| 