Obrázky v HTML

Tag IMG - Zadávání rozměrů - Popis obrázku (alt) - Odložení načítání - Obtékání a umístění - Rámeček - Zmenšeniny, galerie

Máte-li připravený obrázek, můžete ho umístit do stránky.

Názor kocoura Ajčiho

Tag IMG

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 zápis

do stránky vloží obrázek, který se jmenuje nejaky_obrazek.gif a je v témže adresáři jako ona stránka. Pokud bude v jiném adresáři (složce), přidá se adresářová cesta. Například

Dá se použít i absolutní adresa, třeba

<img src="http://www.seznam.cz/logo.gif"> .

Kromě src se zadávají další atributy obrázku. Např. koťátko kód

vloží do stránky obrázek kotěte zarovnaný doprava s popiskem "koťátko". O jednotlivých atributech pojednává další text.

Poznámka: pokud už teď vůbec netušíte, která bije, přečtěte si základy HTML.

Zadávání rozměrů

Doporučuji zadávat rozměry obrázků jako parametry tagu img. Například zápis

je lepší než zápis

Proč: 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á divně.

Zjištění velikosti obrázku

Pokud nevíte, jak je přesně obrázek velký, dejte ho do stránky napřed bez rozměrů. Pak si stránku zobrazte v prohlížeči, naklikněte pravým tlačítkem vlastnosti obrázku a přečtěte si rozměry. Ty potom zadejte do kódu.

Ta čísla, kterými se udávají rozměry obrázků, je počet pixelů. Pixel je jeden obrazovkový bod.

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

Obrázkům ve stránkách se obvykle zadávají jejich skutečné rozměry. Pokud se 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á:

Deformace (změna proporcí) je nevhodná z estetických důvodů.
Zmenšování se nepoužívá, protože se obrázek nemusí vykreslit správně, ale hlavně se při tom zbytečně přenáší celý velký obrázek, z něhož se pak zobrazí jenom některé pixely.
Zvětšování se nepoužívá z toho důvodu, že výslednou grafiku to rozkreslí do hrubých čtverečků.

Pokud je třeba vložit obrázek jiné velikosti, doporučuji změnit rozměry natvrdo v nějakém grafickém programu. (Viz příprava obrázků.)

Zadávání procent

Šířku a výšku obrázku lze kromě pixelů zadat také jako procenta. Jako sto procent se bere šířka stránky a výška okna (šířka často také závisí na šířce okna prohlížeče). Při zadání obou parametrů se obrázek zdeformuje, a tak je dobré v případě procent zadávat rozměr jen jeden. Umístíte-li obrázek do buňky tabulky nebo do něčeho, co má vlastní rozměr (typicky <div>), procenta se počítají ze šířky a výšky tohoto objektu, nikoliv z rozměrů okna.

Rozměry v CSS

Rozměry obrázku se dají zadávat též pomocí kaskádových stylů vlastnostmi width a height, je to rovnocenné.

Pomocí

Popis obrázku alt

Každý obrázek by měl v kódu obsahovat informaci o tom, co je na obrázku vidět. Tento text se dá zadat jako atribut tagu <img>, například:

Tento text se na místě obrázku zobrazí, dokud není obrázek natažený (nebo když má někdo vypnuté zobrazování obrázků). V Exploreru se nad obrázkem, když se obrázek přejede myší, zobrazí světle žlutá bublina s textem (tuto funkčnost je možno přebít prázdným atributem title).

Zásadní význam má alt pro lidi s vypnutými obrázky a pro alternativní média -- například textové prohlížeče, indexovací roboty, zrakově postižené, hlasové výstupy. Takovým klientům poskytují alty zástupnou informaci o obrázku.

Někdo zadávání altu ignoruje. V příručkách se tvrdí, že se to nesmí a že je to moc špatně, ale já si myslím, že když nenapíšete alt, tak je to sice škoda, ale svět se nezboří.

Efektu žluté bubliny lze lépe dosáhnout pomocí atributu title, ten také zobrazuje bublinu. Pak jde dělat bublinu i u textu. Title má přednost, takže když má obrázek alt i title, bude v bublině title.

Odložení načítání

Obrázku se má říct, že se ještě nemá načítat, pokud je na stránce příliš nízko a uživatel ho ještě dlouho nevidí. Dělá se to atributem loading="lazy".

Když je takový obrázek na stránce viditelný, normálně se hned načte. Načte se i tehdy, když sice hned vidět není, ale je šance, že na něj uživatel rychle doroluje.

Loading="lazy" je rozumné používat zejména na dlouhých stránkách, které obsahují hodně obrázků. Hodně obrázků znamená hodně dat, takže je lepší, když se stahují jenom takové obrázky, které uživatel fakt uvidí. Funguje to tak většině uživatelů od léta 2019. Dříve se podobné chování muselo dělat skriptem. Přečtěte si další informace o odloženém načítání obrázků.

Obtékání

Atribut style u tagu IMG umožňuje nastavit spoustu vlastností. Například se naučíme obtékání. To se dělá vlastnosti float a hodnotami left a right.

hodnota float: left nastaví pozici vlevo (obtékání textem zprava)
hodnota float: right nastaví pozici vpravo (obtékání textem zleva)

Příklad: <img src="runa.gif" style="float: 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.

Dříve jsem zde měl příklad uvedený pomocí zastaralého atributu align. Pokud by vás zajímaly detaily CSS obtékání, koukněte se na vlastnost float.

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).

Pokud border nezadáte, některé prohlížeče rámeček vykreslí, jiné ne.

Aktualizováno 2004: atribut border se považuje za zastaralý (třebaže funguje) a doporučuje se nahradit jej CSS vlastností border.

Zrušení rámečku

Je-li obrázek v odkazu, prohlížeče jej obalují barevným (většinou modrým) rámečkem. Chcete-li se tomu vyhnout, zadejte border="0".

Zmenšeniny, galerie

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:

Co tento kód dělá: obsahuje odkaz (tag <a>) a uvnitř odkazu je malý obrázek. Malý obrázek je vidět, velký obrázek se zobrazí po kliknutí na odkaz.

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" ..>).

Existují programy, které umějí takovou galerii udělat automaticky. Např. na každém cédéčku k foťáku se dodává nějaký takový software. Já na tvorbu galerií nejraději používám Irfan View. FrontPage a podobné editory umějí také galerii udělat, ale dá to trochu více práce.

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně