Obrázky na webu v HTML

V HTML se obrázky vkládají nepárovým tagem IMG, který má jeden povinný a mnoho nepovinných parametrů. Tím povinným je SRC, totiž umístění obrázku. Například
<img src="nejaky_obrazek.gif">
do stránky vloží obrázek, který se jmenuje se nejaky_obrazek.gif a je v témže adresáři jako ona stránka. Pokud bude v jiném adresáři, přidá se cesta. Dá se použít i absolutní adresa, třeba src="www.seznam.cz/logo.gif" .

Zadávání rozměrů

Zásadně se doporučuje zadávat rozměry obrázků jako parametry tagu img. Například

<img src="nejaky_obrazek.gif" width="60"
height="100">

je lepší než

<img src="nejaky_obrazek.gif">

Po natažení oba příklady vypadají stejně, rozdíl je při natahování. Pokud se totiž u obrázku uvedou rozměry, prohlížeč pro obrázek vyhradí místo, přestože obrázek zatím není stažený. Pokud se rozměry neuvedou, místo se nevyhradí a po natažení obrázku text jakoby "poskočí", což může způsobit zmatek ve čtenářově orientaci, ale hlavně to vypadá hnusně. Největší problémy tak vznikají, pokud je obrázek v tabulce.

Zmenšování a zvětšování obrázků

Zpravidla se u obrázků zadávají skutečné rozměry v pixelech (pixel je jeden obrazovkový bod). Pokud se ale uvedou rozměry jiné, obrázek změní zobrazení. Takto se dají obrázky zmenšovat, zvětšovat a deformovat (dělá to až prohlížeč). Přesto se nic z toho v praxi příliš nepoužívá:

Pokud je třeba vložit obrázek jiné velikosti, doporučuji změnit rozměry natvrdo v nějakém grafickém programu.

Zadávání procent

Lze zadat šířku a výšku obrázku jako procenta ze šířky nebo výšky stránky (šířka většinou závisí na šířce okna prohlížeče). Místo počtu pixelů se prostě zadávají procenta. Při zadání obou parametrů se obrázek zdeformuje, a tak je dobré zadávat jen jeden. Pozor, umístíte-li obrázek do buňky tabulky, procenta se počítají ze šířky a výšky této buňky! (Na závěr musím dodat, že zadávání procent u obrázku mám vyzkoušené pouze v IE 4.)

Popis obrázku (alt)

Když se v prohlížeči přejede obrázek myší, obvykle se zobrazí světle žlutá bublina s textem. Stejný text se na místě obrázku zobrazí, dokud není obrázek natažený (nebo když má někdo vypnuté zobrazování obrázků). Tento text se dá zadat jako atribut tagu IMG, například:
<img src="runa.gif" alt="Yuhůova runa">

Někdo zadávání altu ignoruje. Potom se tam nezobrazí nic, nebo popis, který zadal automaticky editor. Takový automatický popis bývá pěkný paskvil: například ve FrontPage 98: alt="runa.gif (357 bytes)". Už jsem se setkal s lidmi, kteří si mysleli, že když se ten text změní, tak že to potom nebude fungovat. Funguje to, klidně to měňte.

Obtékání a umístění

Atribut align tagu IMG umožňuje nastavit buďto obtékání obrázku textem, nebo jeho umístění na řádku. Je to poněkud nekoncepční, ale jednoduché: hodnoty left a right nastavují obtékání, všechno ostatní je umístění na řádku.

Příklad:

<img src="runa.gif" align="left"> vloží do dokumentu obrázek, jehož horní okraj zarovná s dolním okrajem aktuálního řádku, levý okraj bude na levém okraji stránky a text bude obtékat.

Hodnoty pro umístění na řádku jsou top, textop, middle, absmiddle, baseline, bottom, absbottom, center. Jejich význam si vyzkoušejte, já tomu sám moc nerozumím, protože to považuji za nepoužitelné.

Rámeček

Atribut border vykreslí kolem obrázku rámeček. Zadává se šířka rámečku v pixelech.

Rámeček bývá černý (barva písma), ale je-li obrázek v odkazu, tak modrý (barva odkazu).

Je-li obrázek v odkazu, některé prohlížeče jej obalují barevným rámečkem. Chcete-li se tomu vyhnout, zadejte border=0.

Zmenšeniny

Kdo vystavuje více obrázků (například kolekci fotografií), měl by použít klikací zmenšeniny, aby se to nestahovalo roky. Od každého obrázku je potřeba vytvořit si menší kopii (velikostně i datově), která se umístí třeba do stejné složky a vloží do stránky. Velký originál obrázku se do stránky nevkládá, ale nechá se na něj mířit odkaz:

<a href="obrazek1.jpg"><img "obrazek1_zmensenina.jpg"
width="80" height="50" alt="popis obrázku"></a>

Je dobrým zvykem dělat všechny zmenšeniny na stránce stejně vysoké nebo široké a umístit je do tabulky, aby zařezávaly. Dost často se obrázky nechávají zobrazovat v novém okně (<a target="_blank" ..>).