Tech Life

Ilustrační obrázek

Třikrát (a dost) o PNG

22. 02. 2010 11:00    kategorie: Tech Life    autor: DSv    komentářů: 10

Rozhodl jsem se konečně sepsat několik svých rádoby užitečných poznatků okolo tohoto stále populárnějšího formátu; nepochybuji o tom, že mnozí z vás již některé věcí vědí, přesto čtěte dále, třeba se ještě něco zajímavého dozvíte. :-)
 

Slovo úvodem

Zaprvé, PNG je skvělý formát umožňující ukládat obrázky bez viditelné ztráty kvality do rozumně velkých souborů, ale nehodí se na klasické obrázky (fotky apod.), tedy pokud vyloženě nechcete dosáhnout nejvyšší možné kvality bez ohledu na objem dat. Je však naprosto ideální pro webovou grafiku - loga, tlačítka, backgroundy atd. Ztrátové JPG pro tohle snad už nikdo nepoužívá (přesto jsem jej v jednom našem nedávném projektu zaznamenal…), GIF se už hodí pouze buďto pro “ostře” transparentní prvky (vertikální čára uprostřed) anebo k případným kompromisům pro Internet Explorer 6. Zastávám názor, že uživatelé moderních browserů by měli mít vždy nejvyšší kvalitu a nebýt penalizováni za to, že IE6 transparentní PNG neumí, tj. pro IE7+ a spol. vždy PNG, pro IE6 řešit průhledné prvky hackem a užitím obrázků v GIFu (teď mám na mysli obrázky plně transparentní, tj. plochy s určitou mírou průhlednosti, které budou v IE6 zastoupeny “zubatými” gify). Dobře optimalizované PNG s drobnějším grafickým motivem je v 70% případů vždy menší (nebo zanedbatelně větší) než GIF a k tomu samozřejmě nemá (tak) limitovaný počet barev v paletě. Čímž se dostávám k bodu dva…

PNGOUT/PNGGauntlet

…a tím jest optimalizace PNG. Jak třeba Photoshop, tak freeware Paint.NET s pluginem OptiPNG nabízejí vcelku slušnou optimalizaci PNG souborů pro použití na webu (tj. odseknutí nějakých metadat atd.), která má ovšem jeden problém - neopraví gammu. Internet Explorer má známý nedostatek, že dáte-li vedle sebe třeba jednobarevný GIF, PNG a html blok (div) s tou samou barvou (třeba #c0c0c0; mimo čistě bílé a černé, samozřejmě), PNG bude mít trochu jiný odstín. V praxi to má samozřejmě za následek, že nelze vedle sebe umístit nějaký prvek používající třeba jako background PNG a druhý GIF (třeba právě kvůli hacku s náhradou průhledného PNG za GIF v IE6) neb zkrátka nesplynou.

Podotýkám, že se tak děje bez ohledu na verzi IE; vývojáři se dušují, že nejde o chybu. Přesné detaily neznám, takže se musíte spokojit s vysvětlením, že “Different browsers and operating systems handle PNG gamma differently. Generally, your best bet is to strip the Gamma channel.”

A právě tohle umí utilita PNGOUT (volná i pro komerční užití, používá se v příkazovém řádku, je třeba zahrnuta i v IrfanView, ovšem pozor, ten komerční použití zdarma nedovoluje, pokud by to někoho zajímalo) a její nadstavba PNGGauntlet, která tohle spolehlivě řeší (.NET framework, freeware, text zakazující komerční použití se mi najít nepodařilo, takže asi tak…).

Vřele tak doporučuji ukládat např. ve Photoshopu PNG vždy bez jakékoli optimalizace (a určitě neprokládané - akorát zbytečně zvětší velikost, někdy až o třetinu), pak všechna PNG přetáhnout do okna Gauntletu, kliknout na zaklínadlo “Optimize!” (nastavení ponechte výchozí) a máte hotovo; PNG soubory budou mít snad nejmenší možnou velikost (u opravdu drobných věcí to může být i ze 2 kB na 200 bajtů) a především - rozdílná gamma bude pryč (moc teď nevím, jak přesně česky vyjádřit ono “strip gamma channel”). Zázrak? Možná ano…

APNG

Na závěr už jen zajímavost - PNG má už i svou animovanou variantu a dokonce ne jednu. Existují dvě specifikace; MNG přímo od tvůrců původního PNG a APNG (oficiální stránky s ukázkami). Ta první však má přinejmenším jeden zásadní nedostatek, není zpětně kompatibilní (používá i jinou koncovku .mng), čímž vzrůstá podporá druhé varianty (která tedy používá koncovku stejnou co obyčejné PNG a v případě nepodpory formátu zobrazí alespoň první snímek). Zatím však moc nelze mluvit o nějak zvlášť velké podpoře; z prohlížečů jej umí jen poslední verze Firefoxu a Opery a co se editorů týče, tam je situace ještě horší - existuje pouze speciální tool ve vývojovém stádiu. (Osobně si myslím, že vzhledem k rozšířenému Flashi a rozmáhajícímu se Silverlightu se animované PNG coby prvek pro webovou grafiku nijak zvlášť nerozšíří, už jen kvůli své omezenosti oproti zmíněným, ale tak kdoví…).

Sdílet odkaz:
tisk

Diskuze k článku

Kloban, 2.6.2013 14:30

Věta "PNG je skvělý formát umožňující ukládat obrázky bez viditelné ztráty kvality" je docela zavádějící. PNG ukládá BEZ ztráty kvality. A to absolutně bez žádné ztráty (ne jen té "viditelné").

Anonym, 20.4.2010 18:22

Zdravím, jak spojím více obrázků v PNG do jednoho vekého.dík za odpověď Didi

Messa, 24.2.2010 09:09

Jestli to nebude spíš tak, že Internet Explorer jako jediný pracuje s PNG s informací o gammě správně, to jen ostatní prohlížeče na ni kašlou...

karf, 23.2.2010 16:09

@dsv: samozřejmě pomocí Uložit pro web. PNG je bezztrátový formát, artefakty tedy mohou vznikat nejspíš jen při ditheringu (redukci barev), což je jiná kapitola a s ukládáním to v podstatě moc nesouvisí.

BTW: ta captcha tady je fakt děsná, abych si na to snad vzal kalkulačku…

dsv, 23.2.2010 11:01

karf: počítám, že máš na mysli volbu "Uložit pro web a zařízení". To jsem zkoušel, optimalizuje to dobře a velikost je třeba ještě o něco menší, jen se chová poněkud nepřátelsky k barevné paletě (alespoň mně se nepodařilo najít vhodné nastavení; objevují se drobné artefakty, jestli se to tak dá nazvat), PNGOUT je přeci jen šetrnější, pročež zůstávám u něj.

Možná jen na tom ale CS4 lépe, pročež apeluji na vedení k nákupu nových fotošopů, ať to můžeme vyzkoušet :-).

karf, 23.2.2010 09:00

Novější verze Photoshopu (CS4, u CS3 si nejsem jistý) už ukládají PNG bez gamy a celkem slušně optimalizované.

VfB, 23.2.2010 07:11

--> anonym
toto ale podle mne není bez problémů, bez problémů si představuji tak, že obrázek vložím do stránky (nebo jako css pozadí) a funguje (bez hacků, souborů navíc, javascriptu) ale možná jsem moc zmlsaný používáním non mS prohlížečů a sw že mám trošku posunuté vnímání xD

Anonym, 22.2.2010 23:53

IE6 ale přece PNG alfa kanál bez problémů zvládá (DXImageTransform.Microsoft.AlphaImageLoader).

centi, 22.2.2010 11:39

Aby som bol úplný, Smush.it je ešte súčasťou veľmi dobrého doplnku pre Firebug - YSlow (https://addons.mozilla.org/en-US/firefox/addon/5369). Takže optimalizované obrázky sú len "one click away" :)

centi, 22.2.2010 11:38

Pekne zhrnuté info. Len doplním ešte jeden nástroj na optimalizáciu obrázkov - http://smush.it/

Dá sa použiť buď online, alebo ako Firefox extension alebo bookmarklet.

Výhodou Firefox extension je to, že si Smush.it sám nájde všetky obrázky použité na danej stránke a zoptimalizuje ich. Nie je teda nutné obrázky ručne pridávať.

Inak Smush.it pravdepodobne používa rovnaké (alebo aspoň veľmi podobné) postupy, viď. posledné FAQ: http://smush.it/faq.php

Přidat příspěvek

 

Kontakt pro média


Máte zájem o další informace, odborný článek či přednášku na konferenci? Kontaktujte nás prosím na pr@etnetera.cz.

RSS - Tech life


RSS kanál Tech Life Blogu

Offlineblog

Offlineblog

Ljama


Komix z prostředí imaginární firmy.

ljama

Ještě jste ho nečetli? Tak tudy ...

 
Doporučujeme: Nabídka práce, volná pracovní místa - pracovní portál SPRÁVNÝKROK.CZ