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

23. listopadu 1999

Již v předchozím článku jsme psali o různých druzích formátů pro obrázky, které můžeme používat na www stránkach. Teď bychom se chtěli ještě jednou zmínit o nejnovějším a také nejvíce opomíjeném formátu nazývaném PNG, které si jistě zaslouží více pozornosti.

PNG formát byl speciálně vytvořen k nahrazení staršího a méně komplexního GIF formátu. PNG nám nabízí hned několik nezanedbatelných výhod proti formátu GIF:

  • povoluje gama opravy, má schopnost ovládat jas napříč platformou
  • měnitelná průsvitnost přes Alfa kanály
  • nedochází zde k volné komprimaci, což způsobuje velkou realističnost barev
  • není omezen 256 barvami jako GIF

    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:

  • vložit nové druhy prostředků (identifikovaných u jejich MIME typu) bez jakékoliv potřeby nových elementů jako IMG nebo APPLET
  • v zdokonalení přes EMBED, což je OBJECT se závěrečným tagem a může obsahovat alternativní obsah pro prohlížeče, jenž nepodporují formát PNG a předloží mu místo obrázku ve formátu PNG obrázek ve formátu GIF (popřípadě v jiném definovaném formátu), který se takto může nastavit jako alternativní.

    <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:

  • OBJECT s vnořeným alternativním obrázkem
    Důvod pro: Přípustný pro všechy prohlížeče kromě MSIE 3.0.
    Důvod proti: Menší problémy při zobrazování v prohlížečích Internet Exploreru 4.0 a 5.0, v IE 3.0 se nezobrazí nic.
  • Mnohonásobný zdroj v <IMG> tagu
    Důvod pro: Správné zobrazení u všech prohlížečů podporující PNG a současně u většiny těch, které PNG nepodporují.
    Důvod proti: špatné HTML, nepříliš správné zobrazení v Netscape Havigatoru 2.0 a 3.0, spousty zbytečných obrázkových dat.
  • Java applet s alternativním vkládáním
    Důvod pro: Důkladně interpretuje nebo si nevšímá PNG formátu u všech nynějších browserů.
    Důvody proti: Dělá chyby v případě příliš krátkých JVM třídících knihoven.
  • Nahrazení obrázku přes JavaScript
    Důvod pro: Používá se jednoduchý IMG tag, důkladně interpretuje nebo prostě ignoruje PNG téměř ve všech dostupných prohlížečích.
    Důvod proti: dodatečné načítání obrázků, vynechána Opera

    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.

  • Štítky: Články

    Mohlo by vás také zajímat

    Nejnovější

    Napsat komentář

    Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *