Prvním předpokladem pro vložení obrázku do stránky je jeho
uložení ve vhodném formátu. Většina prohlížečů dnes podporuje tři
grafické formáty GIF, JPEG a PNG (čti ping). Obrázky
v počítačové podobě můžeme získat mnoha způsoby –
naskenováním z papírové předlohy, nakreslením v grafickém
editoru, z digitálního fotoaparátu či z nějaké galerie
obrázků. Ve všech případech musíme obrázek uložit v jednom
z formátů GIF, JPEG nebo PNG. Měli bychom tedy získat soubor
s příponou .gif, .jpg
nebo .png.
Dejme tomu, že máme obrázek mouchy v souboru
moucha.gif. Tento obrázek zkopírujeme do adresáře
se stránkou, do které chceme obrázek vložit. Ke vložení obrázku slouží
nepárový element img. Soubor s obrázkem specifikujeme
pomocí atributu src, který slouží
k zapsání URL obrázku. Vzhledem k tomu, že obrázek máme uložený ve
stejném adresáři jako soubor se stránkou, můžeme použít relativní URL
– to v tomto případě odpovídá samotnému jménu souboru. Díky tomu bude
naše první stránka s obrázkem opravdu jednoduchá:
<!DOCTYPE html> <html> <head> <title>Stránka s obrázkem</title> </head> <body> <h1>Stránka s obrázkem</h1> <p>Jen se na ní podívejte, jak mi baští večeři.</p> <p><img src="moucha.gif" alt="Moucha, která jí večeři"></p> <p>Co byste řekli vy, kdyby vám moucha snědla večeři?</p> </body> </html>
Všimněte si, že jsme obrázek vložili jako samostatný odstavec. Kdybychom to neudělali, byl by obrázek přilepen vpravo za textem prvního odstavce a celá stránka by nevypadala tak pěkně.
Jistě jste si všimli, že při vkládání obrázku jsme u elementu
img použili i atribut alt. Slouží pro přidání krátkého textového
popisu k obrázku. Ten se zobrazí místo obrázku v prohlížečích, které
nepracují v grafickém režimu (např. Lynx) nebo v prohlížečích, kde je
vypnuté zobrazování obrázků.
Tip
Mnoho autorů stránek neví, že atribut alt je povinný u většiny obrázků. Kromě podpory
textových prohlížečů, má atribut význam i pro daleko širší skupinu
uživatelů, než by se mohlo zdát. Při připojení pomalou linkou jsou
před definitivním přenesením obrázků zobrazeny alespoň vysvětlující
popisky. Někteří uživatelé dokonce stahují jen ty obrázky, o kterých
si myslí, že je potřebují. Náš stručný popis jim tak ušetří mnoho času
a zprostředkovaně i peněz (nejen čas, ale i telekomunikační poplatky
jsou peníze). Na obrázku 13 – „Když zapomenete u obrázků na jejich textový popis, mohou
se stránky stát pro některé uživatele nepoužitelné“ se
můžete podívat, jak dopadne stránka, která používá obrázky jako menu,
ale kde se zároveň jaksi pozapomnělo na „alty“. Tak by
rozhodně profi stránka neměla vypadat.
Navíc obsah tohoto atributu může využít hlasový syntetizátor při převodu HTML stránky do řeči. To je zcela v souladu s aktivitami konsorcia W3C při vývoji technologií, které mají umožnit využívání Webu lidem s postižením zraku.
Samozřejmě v případech, kdy je obrázek na stránce čistě dekorativní a nenese žádnou podstatnou informaci, není nutné atribut používat.
Obrázek 13. Když zapomenete u obrázků na jejich textový popis, mohou se stránky stát pro některé uživatele nepoužitelné
Dalšími atributy, které mají při vkládání obrázků své využití,
jsou atributy width
a height. Jejich hodnotou je
požadovaná šířka a výška obrázku v pixelech. Pokud je při
vkládání obrázku uvedeme, obrázek se zvětší či zmenší na požadovanou
velikost.
Používání těchto atributů ke změně velikosti obrázku není příliš vhodné. Pokud obrázek zvětšíme, dostaneme většinou místo pěkného obrázku ošklivou zubatici. Pokud obrázek zmenšíme, dosáhneme často horších výsledků, než když obrázek zmenšíme v nějakém specializovaném programu, který může při zmenšování použít různé grafické algoritmy.
Varování
Nikdy nepoužíváme atributy width
a height ke zmenšení obrázku. Výsledkem
je totiž malý a ne příliš kvalitní obrázek; přitom po síti se musel
obrázek stahovat v původním rozlišení a tedy poměrně dlouho.
I přesto však mají atributy width
a height uplatnění. Pokud jimi
specifikujeme skutečné rozměry obrázku, může pro něj prohlížeč
vyhradit místo již při načtení samotné stránky. Nemusíme tedy čekat na
přenesení obrázků. Stránka je pak hned napoprvé zobrazena se správným
layoutem a nemusí se několikrát zbytečně reformátovat a překreslovat.
Odstraní se tak nepříjemné chování mnohých stránek – ty nejdříve
chvíli jaksi poskakují, než se pevně usídlí v okně prohlížeče.
Profesionál by tak nejspíš obrázek mouchy vložil do stránky následujícím způsobem.
<img src="moucha.gif" alt="Moucha, která jí večeři" width="200" height="142">
Velikost obrázku přitom můžete zjistit v nějakém grafickém editoru nebo prohlížeči, umí to i některé HTML editory. V nouzi nejvyšší stačí na obrázek kliknout přímo v prohlížeči pravým tlačítkem myši a z lokální nabídky vybrat příkaz .
Velikost obrázku je možné kromě pixelů zadávat i jako
procento z šířky, resp výšky okna prohlížeče. Za číslo
v hodnotě atributu stačí připsat znak `%'.
Tato funkce však v praxi příliš uplatnění nenajde, protože při ní
právě dochází ke zkreslení obrázku v důsledku změny jeho
velikosti.
Obrázek může být i odkazem, tj. kliknutí na něj vyvolá načtení jiné stránky. K dosažení tohoto efektu stačí jako text odkazu uvést obrázek:
<a href=URL><img src="moucha.gif" alt="Obrázek mouchy"></a>
Naše poznatky o vkládání obrázků můžeme shrnout do obecného
tvaru elementu img:
<img src="URL" alt="popis" width="šířka" height="výška">
