Obrázky

Jiří Kosek ml.

Nikoho snad neurazíme, když řekneme, že World-Wide Web pozdvihl Internet z prostředí znakových terminálů do grafických okenních systémů. Nepřekvapí nás proto, že pomocí jazyka HTML lze do webovských dokumentů vkládat i obrázky.

Abychom mohli na stránku obrázek vložit, musí být obrázek uložen ve vhodném formátu. Všechny prohlížeče dnes akceptují obrázky ve formátech GIF a JPEG a ty novější ve formátu PNG (Portable Network Graphics), který byl speciálně navržen pro potřeby Webu. O tom, který formát je výhodnější použít pro daný obrázek, si povíme ke konci dnešního dílu.

Přejdeme k věci. Ke vložení obrázku do dokumentu slouží nepárový element IMG za současného použití atributu SRC, který musí obsahovat URL obrázku. Soubor s obrázkem je však většinou uložen ve stejném adresáři jako dokument, takže můžeme použít relativní URL -- stačí tedy uvést samotné jméno obrázku. Naše první stránka s obrázkem tedy může vypadat zhruba takto:

 ...
<H1>Stránka s obrázkem</H1>
<IMG SRC="lvicek.gif">
 ...

Výsledné zobrazení v prohlížeči nám přiblíží obrázek 1.

Obr.1: Zařazení obrázku na stránce

I přesto, že je dnes k Webu přistupováno pomocí grafických prohlížečů jako Navigator a Explorer, existuje početná skupina uživatelů, kteří používají prohlížeče pracující v textovém režimu -- např. Lynx. Zobrazit obrázek na textovém terminálu není dost dobře možné, a proto by bylo celkem užitečné, kdyby na textových terminálech mohl být místo obrázku zobrazen alespoň krátký vysvětlující text. Autoři HMTL na tuto vlastnost pomysleli, a tak lze u elementu IMG použít i atribut ALT, který slouží k zadání textu, jenž bude alternativou obrázku. Naše první ukázka by se pak trošku změnila:

 ...
<H1>Stránka s obrázkem</H1>
<IMG SRC="lvicek.gif" ALT="Obrázek lvíčka">
 ...

TIP: Používání atributu ALT u obrázků svědčí o profesionalitě a rozhledu autora stránky -- není to žádný ignorant, který uznává pouze grafická uživatelská prostředí.

Za použití alternativního textu nám mnohdy poděkují i "grafičtí" surfaři -- zvláště ti s pomalejším připojením k Internetu totiž často nestahují se stránkou obrázky rovnou, ale vyžádají si jejich přenesení pouze pokud podle alternativního popisu očekávají nějaký opravdu zajímavý obrázek. Popisky obrázků by proto měly být co nejvýstižnější, aby mohl dát čtenář stránky snadno přednost obrázku pružného dívčího těla před obrázkem svraštělého dědy.

Dalším velice užitečným atributem pro obrázky je ALIGN. Ten ovlivňuje způsob umístění obrázku vzhledem k okolnímu textu. Atribut může nabývat jedné z pěti hodnot: TOP, MIDDLE, BOTTOM, LEFT, RIGHT. První tři hodnoty určují způsob vertikálního zarovnání obrázku s okolním textem. Význam jednotlivých možností ilustruje obrázek 2.
Obr. 2: Význam atributu ALIGN poprvé

Použití hodnot LEFT resp. RIGHT způsobí, že text bude obtékat obrázek, který bude umístěn u levého resp. pravého okraje stránky. Následující zápis v HTML demonstruje použití obtékání textu (výsledek viz obr. 3):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Význam atributu ALIGN -- 2.</TITLE>
</HEAD>
<BODY>
<H1>Praha -- Matka měst</H1>

<IMG SRC="praha.gif" ALT="Znak Prahy" ALIGN=LEFT>
Praha je hlavní a největší město České republiky. Rozkládá
se na obou
březích Pražské kotliny v Pražské plošině na ploše o výměře 496
km<SUP>2</SUP>.
 ...

Obr. 3: Obtékání textu použitím atributu `ALIGN=LEFT`

Občas nastane situace, kdy chceme, aby určitý text ještě obtékal některé obrázky, ale bezprostředně následující text již ne. Stane se to např. v situaci, kdy vložíme do textu obrázek a kousek za ním začíná nadpis -- ten by však měl být výrazný a proto chceme, aby byl u kraje a ne, aby obtékal obrázek. K dosažení tohoto efektu lze použít s výhodou element BR v kombinaci s atributem CLEAR. Pokud do dokumentu vložíme tag <BR CLEAR=ALL> vynechá se tolik místa, aby následující text začínal až pod všemi obrázky. Kromě hodnoty ALL lze využít i hodnot LEFT a RIGHT. Posledně uvedené varianty způsobí, že se vynechá tolik místa, aby následující text neobtékal obrázky vlevo resp. vpravo.

TIP: Pokud do dokumentu zařazujeme obrázky obtékané textem, je z estetického hlediska vhodné před začátkem větších nadpisů použít tag <BR CLEAR=ALL>.

Obrázek může být samozřejmě i odkazem -- když na něj klikneme dostaneme se na jinou stránku. K dosažení tohoto efektu stačí tag IMG obklopit tagem A. Celé to může vypadat zhruba takto:

<A HREF="http://www.firma.cz">
<IMG SRC="logo.gif" ALT="Logo firmy Firma">
</A>

En-ten-tý-ky...

Rozpočítávání je na místě, protože při zařazování každého obrázku na stránku se musíme rozhodnout v jakém bude formátu. Než se pustíme do rozboru vlastností jednotlivých formátů, povíme si něco o obrázcích a Webu obecně.

Internet spojuje počítače z celého světa. Spojení mezi některými počítači jsou rychlejší a mezi některými zase pomalejší. Zvláště pokud jsme připojeni komutovanou linkou, je spojení spíše pomalejší. Jedna WWW stránka má většinou velikost maximálně okolo 10 KB. Vložené obrázky však mohou bez problémů zabrat stovky KB nebo dokonce megabyty. Prohlížení stránky s tak velkými obrázky se pak pro uživatele může stát peklem. Zařazujeme-li tedy na naší stránku obrázky, měli bychom se postarat o to, aby měly co nejmenší velikost.

Jak se dá velikost takového obrázku zmenšit? Cesty jsou v podstatě dvě: snížení rozlišení a zmenšení počtu barev.

Při práci s počítačem se dnes nejčastěji používají rozlišení obrazovky 640 x 480, 800 x 600 a 1 024 x 768. Umisťovat na stránku obrázek, který má šířku větší než je šířka obrazovky, nemá většinou příliš smysl, protože obrázek není vidět celý najednou. To je potřeba mít namysli zejména tehdy, když na stránku umisťujeme naskenované obrázky -- u nich snadno získáme poměrně velké rozlišení.

Počet barev rovněž ovlivňuje velikost obrázku. Jestliže máme nějaký 256barevný obrázek, pak jeho HiColor verze (65 tisíc barev) bude dvakrát větší a TrueColor (16 mil. barev) bude dokonce třikrát větší. Zredukováním počtu barev můžeme výrazně uspořit místo. Nejlepší je asi postupně snižovat počet barev, dokud je kvalita obrázku ještě únosná, a použít poslední dobře vypadající variantu.

Pro snižování rozlišení a počtu barev obrázků lze použít mnoho programů -- od profesionálního PhotoShopu až po sharewarové PaintShop Pro.

Při zařazování obrázku na stránku stojíme ještě před jednou volbou -- před výběrem vhodného grafického formátu. Dnes můžeme volit mezi GIFem a JPEGem (v blízké budoucnosti bude široce podporován i PNG, který patrně nahradí GIF). Vlastnosti všech tří formátů shrneme do připojené tabulky.

GIF JPEG PNG
Počet barev 1 až 256 24bitový TrueColor 1 až 48bitový TrueColor
Vhodné pro ikony, obrázky nakreslené na počítači, pérovky naskenované fotografie jako GIF + obrázky vzniklé ray-tracingem a počítačovou vizualizací vůbec

	GIF	JPEG	PNG
Počet barev	1 až 256	24bitový TrueColor	1 až 48bitový TrueColor
Vhodné pro	ikony, obrázky nakreslené na počítači, pérovky	naskenované fotografie	jako GIF + obrázky vzniklé ray-tracingem a počítačovou vizualizací vůbec

Při umisťování každého obrázku bychom tedy měli nejprve rozhodnout o použitém formátu a pak se snažit snížením rozlišení a zmenšením počtu barev snížit velikost obrázku na minimum.