Obrázky

Displej mobilních zařízení je obvykle poměrně malý i pro zobrazování textu, a tak nás může překvapit, že WML nabízí i prostředky pro zobrazování obrázků. Tuto vlastnost dnes většina stránek využívá pouze k zobrazování firemních log a reklamních bannerů. Existují však i smysluplnější aplikace – zobrazování plánků měst, grafy vývoje cen finančních aktiv nebo třeba předpověď počasí s názornými ikonkami.

Pro potřeby WAPu byl vytvořen nový formát WBMP. Ten umožňuje ukládání pouze dvoubarevných obrázků. V budoucnu se pro WAP počítá i s novým formátem, který bude podporovat barevné a animované obrázky.

Pro konverzi stávajících obrázků do formátu WBMP existuje mnoho nástrojů. K většině grafických editorů lze doinstalovat plug-in s podporou pro WBMP. Pro první pokusy můžeme použít i program WAP Pictus, který umí nejběžnější formáty převádět do WBMP.

Při přípravě obrázků musíme mít na mysli dvě velká omezení – velikost displeje a malý počet barev. Většina telefonů je schopná zobrazit obrázky, jejichž šířka nepřesahuje 96 pixelů. Výška displeje se nejčastěji pohybuje mezi 40 a 60 pixely. Naše obrázky by proto neměly přesáhnout rozměry 96×50 pixelů. V opačném případě neuvidí uživatelé obrázek celý najednou.

S konverzí obrázku si musíme chvíli hrát. V barevném obrázku se totiž některé barvy převedou na bílou a některé na černou. Algoritmus použitý při převodu výrazně ovlivní výsledný vzhled obrázku. Lepší je vždy vyzkoušet několik algoritmů, které konverzní programy nabízejí, a vybrat si ten nejlepší výsledek.

Dalším problémem je tvar pixelů na displejích. Některé mobilní telefony mají pixely čtvercové, některé zase obdélníkové. Problém je v tom, že obdélníkové pixely zkreslí proporce obrázku. Z kružnice se na takovém displeji rázem stane elipsa. Na to vše musíme při návrhu grafiky pro WAP stránky myslet.

Když už máme obrázky uloženy ve formátu WBMP, můžeme je vložit do wapové stránky. Slouží k tomu element img. U něj musíme povinně uvést dva atributy – src a alt. První z nich obsahuje URL adresu souboru s obrázkem. Většinou však stačí uvést samotné jméno souboru, protože je ve stejném adresáři jako stránka. Do atributu alt je pak slušné napsat textový popis obrázku. Ten se zobrazí v případě, že se obrázek nepodaří načíst.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
              "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
  <card title="Stranka s obrazkem">
    <p align="center">
      <img src="foto.wbmp" alt="Autorova fotografie"/>
    </p>
  </card>
</wml>

Obrázek 4. Tak takhle úžasně dopadne moje fotografie na displeji mobilního telefonu

U obrázku je dobré ještě přímo určit jeho výšku a šířku. Díky tomu mikroprohlížeč může hned při načtení stránky vynechat pro obrázek dostatečný prostor. Když tyto údaje nenastavíme, může stránka nepříjemně „poskočit“ v okamžiku, kdy se načte i obrázek a prohlížeč zjistí jeho skutečnou velikost.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
              "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
  <card title="Stranka s obrazkem">
    <p align="center">
      <img alt="Autorova fotografie" src="foto.wbmp" 
           height="50" width="37"/>
    </p>
  </card>
</wml>

Začlenění obrázku do okolního textu lze řídit i dalšími atributy, ale jejich využití není příliš obvyklé. Displeje jsou totiž tak malé, že obrázek je většinou stejně zobrazován na samostatné řádce a není obklopen žádným textem.

© Jiří Kosek 2000-2001