Jak používat formát PNG pro www stránky?

PNG je obrázkový formát, který patří mezi tzv. volné patenty, což umožňuje jeho volné používání. Tento formát je k dispozici jako otevřený standard již od října 1996(!). I přes tyto všechny jeho přednosti není PNG stále vidět na webových stránkách. Příčina je velmi prostá – není možné jej používat na www stránkách, které jsou vytvořeny tak, aby byly koretně zobrazeny na všech nynějších prohlížečích současně. V tomto článku vám nabídneme několik možností jak používat formát PNG pro www stránky. Teoreticky by to mělo být velmi jednoduché, ale ve skutečnosti, především díky ubohé podpoře formátu PNG ve většině současných prohlížečů se všechno neskutečně komplikuje.

Dnešní prohlížeče, počínaje Netscapem Navigátorem 4.04, Microsoft Internet Explorerm 4.0, Operou 3.51, až po Mozillu 1.0 by měly podporovat formát PNG na webových stránkách – ovšem, ani tato podpora není stoprocentní. Každopádně, pokud oželíme několik chybiček (např. osmibitová průsvitnost) můžeme obrázek vložit do stránky klasickým tagem:

<IMG src=“obrazek.png“>

Ale co budeme dělat se zbývajícími prohlížeči (jedná se především o starší verze výše jmenovaných browserů), které nepodporují PNG nepodporují vůbec? Při použití uvedeného tagu se nám v těchto prohlížečích namísto dokonalého obrázku načte obrázek poškozený nebo jednoduše prázdný rámeček. Použijeme proto několik náhradních řešení:

OBJECT s vnořeným alternativním obrázkem

První možnost, jak to vyřešit, by měl být OBJECT, což je základní součást jazyka HTML. OBJECT nám může sloužit dvěma způsoby:

<OBJECT data=“obrazek.png“ type=“image/png“>
<IMG src=“obrazek.gif“>
</OBJECT>

Podívejme se na to v praxi:

Ze současných hlavních prohlížečů pouze Mozilla interpretuje PNG formát nezchybně, protože podporuje tento formát úplně správně a je schopen ho zobrazit jako kterýkoliv jiný obrázek. Horší už je to u prohlížečů Netscape Navigátor 4.0 a Internet Explorer 4.0 a 5.0, které sice interpretují PNG formát taky správně, ale jen za předpokladu, že mají k dispozici QuickTime plug-in. V případě, že plug-in k dispozici není, výše uvedené prohlížeče si PNG OBJECTu vůbec nevšímají a místo něj vloží pouze obrázek ve formátu GIF (popř. JPEG).

Avšak toto řešení problému se zobrazením PNG by mohlo vyvolat chybnou odezvu v IE 3.0 pro Windows 9x/NT, protože tento prohlížeč předpokládá, že žádný objekt nemůže být ActiveX control a nechce se smířit s vkládáním GIFu.

Od IE 3.0 se ignoruje cokoliv uvnitř OBJECTu, možná proto byste se měli raději rozhodnout „nechat dítěti jeho hračku“ a vložit obrázek jako ActiveX OBJECT vně PNG OBJECTU:

<OBJECT classid=“CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF“>
<PARAM NAME=“PicturePath“ VALUE=“obrazek.gif“>
<PARAM NAME=“BorderStyle“ VALUE=“0″>
<PARAM NAME=“Size“ VALUE=“2963;4445″>
<OBJECT data=“obrazek.png“ type=“image/png“>
<IMG src=“obrazek.gif“>
</OBJECT>
</OBJECT>

Toto je ve skutečnosti správné použití OBJECTu, s alternativním vkládáním objektů seřazeným za sebou tak, že prohlížeč použije pouze ten, který ležící nejvíce vně středu a který také podporuje. Avšak v současných verzích IE pro WINDOW 9x/NT, od 3.0 po 5.0 (které tvoří prokazatelně převládající část všech prohlížečů) bude odezva na tuto část nesprávná, protože namísto předvedení obrázku ležícího pouze nejvíc vně středu použitelného OBJECTu, tyto prohlížeče dávají všechny vkládané jednotky na stejnou úroveň a to může mít za následek úplné odmítnutí účelu OBJECTu a to nám s naším formátem PNG nepomůže.

Co tedy uděláme s IE 3.0? Zkuste jednu s následujících možností:

Mnohonásobný zdroj v <IMG> tagu

Tento jednoduchý trik pracuje na principu použití IMG tagu s PNG formátem, který použijeme jako src a jiný formát (náhradní) použijeme jako lowsrc:

IMG src=“obrazek.png“ lowsrc=“obrazek.gif“>

Většina prohlížečů, které nepodporují formát PNG na www stránkách bude vkládat obrázek definovaný v lowsrc, protože zjistí, že nemohou PNG formát zobrazit. Toto řešení bohužel stálé opomíjí IE 3.0 (jako obvykle), ale můžete doplnit do výše uvedeného tagu ještě jeden src atribut, který bude prohlížeč používat pokud zjistí, že nemůže otevřít ten první:

<IMG src=“obrazek.png“ lowsrc=“obrazek.gif“ src=“obrazek.gif“>

Podívejme se na to v praxi:

Podle shora uvedeného uspořádání obdrží návštěvník stránky obrázek buď ve formátu PNG nebo GIF. Avšak toto řešení má také svou stinnou stránku a tou je Netscape navigator 2.0 a 3.0, který bude zpočátku zobrazovat pouze obrázek definovaný v parametru lowsrc, ale může také nastat nepříjemná situace, že po načtení celé stránky se obrázek zobrazí poškozený.

Java applet s alternativním vkládáním

Další možností, jak používat formát PNG i pro prohlížeče, které jej nepodporují, je použít JavaAplety. Na rozdíl od OBJEKTu Internet Explorer nikdy nerozlišuje APPLET s ActiveX control, a navíc můžete do tohoto tagu ještě vložit nějaký alternativní GIF:

<APPLET archive=“pngthing.jar“ code=“PngThingS.class“ width=112 height=168>
<PARAM name=“png“ value=“obrazek.png“>
<IMG src=“obrazek.gif“ width=112 height=168>
</APPLET>

Podívejme se na to v praxi:

Tato metoda předpokládá běh všech „Java virtual Machine“ právě kvůli zobrazení obrázků a to vede applet k nebezpečí, že nějaký prohlížeč s nedostatečnými JVM třídícími knihovnami bude zkoušet neúspěšně spouštět applet než aby pouuži alternativní vložení obrázku.

Nahrazení obrázku přes JavaScript

Další možností je vytvořit skript. Prohlížeče, které podporují PNG formát , většinou také podporují scriptování obrázu po jeho načtení. A tak můžeme jednoduše zvolit používání jiných než PNG formátů pro grafiku obrázků, které pak můžeme nahradit příslušným obrázkem ve formátu PNG. Ovšem, při změnění obrázků během načítání stránky by mohlo dojít k špatnému vyobrazení grafických dat. Proto bychom měli přepínat obrázky z jednoho formátu do druhého až v případě, že je www stránka kompletně načtena. Příklad:

<IMG src=“obrazek.gif“ onLoad=“this.src=’obrazek.png'“>

Jak už jsem psal, změnou obrázků src před načtením www stránky vzniká riziko havárie prohlížeče. Proto raději nahrazujte obrázek až po načtení do dokumentu, pomůže vám následující příklad

<SCRIPT language=“JavaScript1.2″>
<!–
function loadPNGs() {
  for (i=0;i<document.images.length;i++) {
    with (document.images[i]) src=(src.replace(„\\.jpg|\\.gif“,“.png“));
  }
}
window.onload=loadPNGs;
//–>
</SCRIPT>

Podívejme se na to v praxi:

Ve většině případů prohlížeč podporuje JavaScript1.2 a také podporuje zobrazení formátu PNG jako obrázek na www stránce. Problém je ovšem s Operou, která sice podporuje PNG, ale která příliš nepodporuje Javascript. Záleží ovšem pouze na vašem rozhodnutí, zda-li budete brát ohled na tento prohlížeč.

Krátká rekapitulace:

Závěr:

Teď už víte, proč se formát PNG – i přes všechny jeho výhody – minimálně používá na www stránkách. Ve skutečnosti neexistuje ani jedna naprosto dokonalá cesta k bezchybnému zobrazení PNG obrázků na Internetu. Pokud však vytváříte stránky pro jeden konkrétní typ prohlížeče (např. IE 4.0 a vyšší), pak byste mohli zvolit takovou variantu, která by požadovanému prohlížeči nejvíce vyhovovala. V ostatních případech (kdy chcete tvořit stránky pro všechny dnešní prohlížeče) je jedinou možností vybrat si z výše uvedených voleb tu nejlepší, co vyhovovuje vašim představám anebo formát PNG prostě nepoužívat vůbec a zůstat u starého, dobrého formátu GIF či JPEG.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.