Obrázky

Tag Význam Párový
img obrázek ne

Obrázky se v HTML dělají tagem img.

Dříve byly součástí této stránky tagy map a area, které jsem ale přesunul na stránku o klikacích mapách. Tag picture popisuji u multimédií.

Img

Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z obrázkového souboru. Tag <img> má kromě obecných atributů spoustu dalších:

Atributy tagu <img>
Atribut Význam Hodnoty Nahraďte CSS stylem
src umístění souboru s obrázkem URL  
alt alternativní popis libovolný text  
width šířka délka nebo procento width
height výška délka nebo procento height
srcset různé adresy obrázků pro různou šířku prohlížeče URL číslow [, URL číslow]  
sizes šířka podle rozměrů prohlížeče media-query rozměr [,media-query šířka], rozměr @media pravidla
border tloušťka rámečku délka border
vspace vertikální okraj délka margin
hspace horizontální okraj délka
align zarovnání obrázku left, right, top, texttop,
middle, absmiddle,
baseline, bottom, absbottom
float (left, right)
vertical-align (ostatní hodnoty)
usemap použití klikací mapy "#" + jméno mapy, nebo URL  
ismap přidání souřadnic kliknutí bez hodnoty  
longdesc dlouhý popisek text nebo URL  

Src

Zdoj obrázku, prostě cesta k tomu souboru (angl. source = zdroj). Cesta k obrázku se udává jako klasické URL absolutně nebo relativně.

Příklad vložení obrázku strom.gif, který se nachází ve stejném adresáři (relativní cesta):

<img src="strom.gif" alt="strom">

Příklad vložení obrázku absolutní cestou:

<img src="https://www.jakpsatweb.cz/images/jakpw.gif" alt="Jak psát web">

Pokud soubor obrázku nebude nalezen (typicky protože je adresa zadaná špatně), zobrazí se ve stránce zástupný symbol nenalezeného obrázku (nejčastěji červený křížek) se zástupným textem. (Jak řešit nefunkční obrázky.)

Přípustné jsou soubory typu *.gif, *.jpg a *.png. (Navíc funguje i *.bmp, který je ale datově neúsporný.) Jiné typy souborů nemusejí fungovat ve všech prohlížečích (např. *.webp nefunguje v Exploreru a Edge), takže se musejí vkládat jako objekty nebo tagem picture s fallbackem.

Obrázek lze zapsat také přímo do HTML nebo CSS souboru pomocí schématu data:. Já sám to nepoužívám -- zajímá-li vás to, hledejte "data URI".

Alt

Zástupný text (alternative text). Zobrazuje se ve stránce v oblasti nenačteného obrázku.

Spousta lidí prochází web s vypnutými obrázky (třeba já kvůli slabému připojení), mnoho uživatelů webu je slabozrakých, slepci si nechávají stránky předčítat čtečkami nebo převádět do braila. Pro všechny tyto uživatele jsou obrázky neviditelné. Oni vědí, že na stránce je obrázek, ale nevědí, co na něm je. A proto (a nejen proto) se tam píše alt.

Příklad zástupného textu "strom":

<img src="strom.gif" alt="strom">

Kdysi dávno platilo, že se atribut alt zobrazoval ve žluté bublině při přejetí myší. (Tak zvaný tooltip.) Chcete-li udělat takovou žlutou bublinu, nepoužívejte na to alt (jak dodnes stojí v některých návodech), ale atribut title.

Width, height

Šířka (width) a výška (height) obrázku. Udává se v pixelech (normální číslo) nebo procentech. Pokud rozměry nejsou uvedeny, zobrazí se obrázek ve své normální velikosti. V praxi se doporučuje výšku a šířku u obrázku zadávat i v případě, že obrázek bude přirozeně veliký. To kvůli rychlejšímu a lepšímu načítání stránky.

Pokud se zadají jiné rozměry, než má obrázek ve skutečnosti, pak se ve výsledku obrázek zvětší, zmenší nebo zdeformuje. (Deformaci může zabránit CSS vlastnost object-fit). V případě, že je uveden jenom jeden rozměr (šířka nebo výška) nebo je druhý rozměr nastaven na hodnotu auto, upraví se druhý rozměr tak, aby obrázek zachovával proporce (takže může být jinak velký, ale nebude deformovaný).

Pozor na častou chybu přehazování písmenek t a h. Widht je špatně, správně je width. Heigth je špatně, správně je height.

Příklad: mám obrázek strom.gif o šířce 50 a výšce 100 pixelů. Nejlépe je zadat jej takto:

<img src="strom.gif" width="50" height="100" alt="strom">

V případě, že rozměry nezadám, obrázek se nakonec načte stejně velký. Jenomže při načítání si nevyhradí místo a způsobí, že dokument po načtení obrázku poskočí:

<img  src="strom.gif" alt="strom">

Zadají-li se jiné rozměry, obrázek bude deformován, ale rozměry v dokumentu dodrží:

<img src="strom.gif" width="70" height="70" alt="deformovaný strom">

Když zadáte jenom jeden rozměr, prohlížeč ho dodrží a nezadaný rozměr dopočítá tak, aby obrázek nebyl deformovaný. (Podobně jako nezadaný rozměr funguje v CSS u vlastností width a height hodnota auto - to se hodí hlavně u responsivního designu, když potřebujete, aby se obrázky zvětšovaly, ale nedeformovaly.)

<img src="strom.gif" width="300" alt="zvětšený, ale nedeformovaný strom">

V případě, že zadáte do width nebo height nulové hodnoty, Internet Explorer stejně vykreslí 1px velký obrázek. Chcete-li obrázek nulové velikosti, zadejte mu rozměry pomocí CSS stylů width a height.

SrcSet

SrcSet znamená něco jako "sada zdrojů". Je to novinka z HTML 5. Umožňuje prohlížeči stáhnout a zobrazit jiný obrázek, než je udáno v atributu src. Který obrázek to bude, záleží na porovnání šířky okna prohlížeče s šířkovými deskriptory, které následují za URL obrázku. Deskriptory jsou čísla následovaná znakem w (malé dvojité v). Do srcset se zadává zpravidla více URL obrázků, oddělují se čárkou.

<img src="vychozi.png" srcset=" maly.png 600w,  stredni.png 900w, velky.png 1200w" >

Příklad obsahuje čtyři obrázky. První vychozi.png se použije jen v případě, že prohlížeč atribut srcset nepodporuje (Internet Explorer 11), ale podporuje atribut src, takže ho použije. Obrázek maly.png se použije, pokud je šířka prohlížeče menší než 600 pixelů. Obrázek stredni.png se zobrazí v šířkách prohlížeče od 600 do 900 pixelů. Nad šířku 900px se zobrazí obrázek velky.png.

Obecná syntaxe atributu srcset je tedy

srcset="URL1 šířka1w, URL2 šířka2w, ..."

přičemž na pořadí URL a šířek nezáleží. Prohlížeč si je seřadí podle šířek (čísel s w) a zobrazí obrázek uvedený u největší šířky, kterou šířka okna ještě nedosáhla. Jinak řečeno: vezmou se všechny šířky uvedené v deskriptorech, které jsou menší než šířka prohlížeče. Z nich se vybere ta největší a její obrázek se stáhne a zobrazí. Pokud jsou všechny šířky v deskriptorech větší než šířka okna, vezme se obrázek příslušející nejmenší šířce (nebo případně to největší, co už je stažené). Srcset nebere ohled na skutečné šířky obrázků. Je-li srcset v tagu img přítomno, nebere už prohlížeč ohled na obsah tagu src. Je ovšem dobrý nápad jako jeden z obrázků v srcset použít ten, který je i v src pro starší prohlížeče.

Srcset je užitečný atribut zejména pro mobilní zobrazení. Pro menší displaye telefonů totiž není vždy potřeba dodávat obrázky v plném rozlišení. Srcset je podporovaný ve všech mobilních prohlížečích (2017).

Příklad na srcset

Různé prohlížeče různě reagují na změny šířky okna. Některé prohlížeče uživateli ukazují obrázek určený pro větší šířky než je aktuální okno, pokud takový "lepší" obrázek už mají v paměti (Chrome, Edge). Chrome dokonce ani pokyn pro aktualizaci stránky nebere jako důvod, proč vždy přesně respektovat srcset. Při testování v Chrome je potřeba vždy otevřít novou kartu prohlížeče.

Kromě jednotky deskriptoru pro šířku w existuje jednotka deskriptoru x pro počet pixelů na virtuální pixel. To je důležitá veličina hlavně u mobilů, které mají velmi jemné displaye, zatím jsem to ale nepoužil.

Sizes

Další zesložitění šířky obrázků přináší atribut sizes, který je bytostně napojen na srcset. Sizes dokáže dvě věci:

  1. umí říct deskriptoru ze srcset, že nemá se nemá porovnávat se šířkou okna, ale s hodnotou zadanou v sizes
  2. a může nastavit šířku obrázku závisle na šířce okna podobně, jako to umí udělat procenta u width, ale složitěji.

Zatímco ten první důvod (ovlivnění deskriptoru srcset) mi přijde v některých situacích jako rozumný, doporučuji nepoužívat nikdy tu druhou schopnost - nastavení šířky obrázku. Naštěstí jak atribut width, tak šířka nastavená přes CSS má před sizes přednost, takže pokud je šířka zadána, sizes na na nastavení šířky nepoužije. (Výška obrázku, pokud není zadaná přes height nebo CSS, se stanoví sama, aby se zachoval poměr stran, takže celou dobu zde bude řeč jen o šířce.)

Atribut sizes něco dělá jenom v případě, že se u obrázku použije srcset (src nestačí). Sizes je proto často chápáno pouze jako rozšířením atributu srcset.

Nejjednodušší smysluplný příklad:

<img src="vychozi.png" srcset=" maly.png 414w,  stredni.png 600w, velky.png 1200w" sizes="(max-width: 900px) 90vw, 50vw">

Příklad říká toto: v případě, že šířka okna je maximálně 900 pixelů (tedy 900 nebo méně), použije se při porovnání deskriptoru nikoli šířka prohlížeče, ale  hodnota 90vw, což je 90 % ze šířky prohlížeče (jednotka vw znamená procento šířky prohlížeče). Pokud podmínka neplatí (viewport je širší), použije se pro porovnání hodnota 50vw, tedy polovina šířky prohlížeče. Například při šířce okna 800px první podmínka platí, a tak se porovnává 0,9*800px = 720px s deskriptory ze srcset. Menší jsou 414w a 600w, a tak se podle pravidel srcset vybere ten větší, tedy stredni.png.

Pozor, záleží na pořadí: použije se první hodnota, která splňuje podmínku. Podmínek může být i více a zadávají se pomocí klasických CSS media queries. (V textu o media queries můžete najít další obměny závorky (max-width: *).)

Pokud by někdo chtěl používat sizes i pro nastavování rozměrů, musí se připravit na trochu matiky.

Nejjednodušší příklad použití sizes pro stanovení šířky obrázku využívá jednotku vw:

<img srcset="kocicka.jpg 800w" sizes="50vw" alt="kočička na 3/4 šířky okna">

V příkladu je použit známý atribut srcset, který má nastaven deskriptor na šířku 800w. Hodnota atributu sizes je nastavena na 50vw, kde 1 vw je délková jednotka odpovídající jednomu procentu šířky okna prohlížeče. Obrázek kocicka.jpg má nějaké skutečné rozměry, dejme tomu šířku 1200 pixelů -- tento rozměr zjistí prohlížeč po stažení obrázku. Jak se vypočítá výsledná šířka obrázku?

výsledná šířka obrázku = (skutečná šířka / deskriptor w) * šířka okna * hodnota sizes / 100vw

po dosazení hodnot z příkladu:

výsledná šířka obrázku = (1200 / 800 ) * šířka okna * 50vw / 100vw =
= 0.75 * šířka okna

Jak vidíte, výsledná šířka závisí jak na šířce okna (což na mobilu skutečně často chceme), tak na původní šířce obrázku (což je poněkud nešťastné).  Tvůrci těchto zvorečku asi předpokládali, že bude platit, že skutečná šířka = deskriptor w, takže vyjde první závorka rovna jedné. To skutečně často platí, ale aby se vůbec dalo se sizes rozumě pracovat pro stanovování rozměrů, je potřeba dávat pozor, aby to tak opravdu bylo. Pak by totiž mohlo platit, že výsledná šířka = * šířka okna * hodnota sizes / 100vw.

Jiná situace nastává, pokud se do sizes napíše jednotka px, em nebo něco podobného. Příklad a vzoreček:

<img srcset="kocicka.jpg 800w" sizes="600px" alt="kočička na 3/4 šířky okna">

výsledná šířka obrázku = (skutečná šířka / deskriptor w) * hodnota sizes

po dosazení hodnot z příkladu:

výsledná šířka obrázku = (1200 / 800 ) * 600px = 900px

Takže výsledná šířka v případě použití px není závislá na šířce okna. Je ale stále závislá na skutečné šířce, kterou si prohlížeč musí zjistit ze souboru obrázku.

Pokud byste v sizes chtěli použít jako jednotky procenta, tak to nic nedělá.

Osobně nedoporučuji sizes pro nastavování rozměrů používat, protože ty výpočty jsou zrůdné a protože se před vypočtením rozměrů musí stáhnout obrázek. Budete-li si o tom chtít něco zjišťovat, dejte pozor. Autoři anglických návodů přesnou funkci sizes netestovali, píšou kraviny a ještě je od sebe opisují.

Border

Tloušťka rámečku. Lze zadat nula, pak nebude obrázek orámečkovaný. Různé prohlížeče se liší v tom, zda zobrazují rámeček u obrázku, u kterého border nebyl zadán. Proto komu záleží na přesném vzhledu, měl by border vždy zadávat. Poslední dobou se ale doporučuje rámeček spíše zadávat css stylem border.

Příklad nejčastějšího použití: je-li obrázek v odkazu, přirozeně se kolem něj tvoří barevný rámeček:

<a href="stranka.html"><img  src="strom.gif" alt="strom"></a>

Nejprostším řešením je zadat obrázku nulový okraj border="0":

<a href="stranka.html"><img  src="strom.gif" alt="strom" border="0"></a>

V moderní praxi se tento postup už doporučuje nahradit spíše globálním stylem:

<style>
a img {border-width: 0px;}
</style>

Další údaje o odkazech v HTML.

Vspace, hspace

Vertikální a horizontální okraje, prostě prázdné místo okolo. Zadává se v pixelech (tedy bez hodnoty a znamená to pixely), nebo v procentech. Procenta se počítají z rozměru obrázku. Zastaralé atributy. V praxi se vspace a hspace nahrazují CSS stylem margin, případně padding.

Align

Zarovnání obrázku s okolím.

Tag <img>, atribut align
  align= Význam Nahraďte CSS zápisem
Obtékání obrázku left Obrázek je umístěn k levému okraji a obtékán zprava. float: left;
right Obrázek je umístěn k pravému okraji a obtékán zleva. float: right;
Vertikální umístění obrázku na řádku top Vršek obrázku je zarovnán s nejvyšším bodem libovolného objektu řádku. vertical-align: top;
texttop Vršek obrázku je zarovnán s nejvyšším bodem textu (většinou je to totéž, co top). vertical-align: text-top
middle Střed obrázku je zarovnán s účařím písma řádku. -
absmiddle Střed obrázku je zarovnán se středem řádku. vertical-align: middle;
baseline Spodek obrázku je zarovnán na účaří. vertical-align: text-bottom;
bottom Spodek obrázku je zarovnán na spodek písma -
absbottom Spodek obrázku bude zarovnán na nejnižší místo řádku. vertical-align: bottom;

Osobně považuji sedm hodnot pro umístění na řádku za zbytečnost a nepoužívám je. Má to smysl pouze u malých obrázkových matematických vzorců. Velký obrázek se v praxi většinou nechává obtékat nebo umisťuje do samostatného odstavce.

Obtékané obrázky se vertikálně nacházejí pod řádkou, v níž jsou uvedeny (to je trochu nešikovné, ale logické). Jedinou výjimkou je, kdy obtékaným obrázkem řádka začíná - pak je vrchol obrázku v úrovni vrcholu řádky.

Atribut align se dá nahradit css stylem float (pro hodnoty obtékání right a left) a css stylem vertical-align (pro umístění na řádku).

Chcete-li obrázek umístit na střed, přes atribut align to nejde. Obalte obrázek nějakým blokovým prvkem (třeba tagem <div>) a zarovnání na střed zadejte tomuto obalovacímu prvku.

Style

Všechny atributy kromě src, alt a usemap se dají nahradit CSS deklarací pomocí obecného atributu style.

Příklad: Následující dva obrázky se zobrazí stejně:

<img src="strom.gif" alt="strom" width="88" height="31" border="2" hspace="10" align="right">

<img src="strom.gif" alt="strom" style="width: 88px; height: 31px; border: 2px solid; margin-left: 10px; margin-right: 10px; float: right">

Usemap

Přítomnost tohoto atributu dělá z obrázku klikací mapu. Hodnotou atributu je křížek # plus jméno mapy. Mapa je element vyznačený tagem <map> obsahující definici aktivních oblastí. Popis mapy je umístěn v tomtéž HTML dokumentu. Jméno mapy je určeno atributem name u tagu <map> . Příklad viz u popisu tagu <map>.

Ismap

Pokud je obrázek v odkazu, při kliknutí se za adresu připojí otazník a souřadnice kliknutí oddělené čárkou. Umějí to zpracovávat některé serverové skripty. Atribut ismap je považován za zastaralý a v praxi se nepoužívá.

Longdesc

Dlouhý popisek se používá málo, protože na to autoři stránek kašlou, a tak na to kašlou i prohlížeče. Do tagu <img> se dá dát kromě atrubutu alt, který má obsahovat popisek obrázku, také atribut longdesc, který odkazuje na jiné URL, na kterém je obrázek popsán. Dříve prý některé prohlížeče longdesc podporovaly, nyní nevím (zobrazovaly prý možnost přechodu na to jiné URL v kontextovém menu).

Nestandardní atributy

Lowsrc byl zástupný obrázek pro malé displeje. Nikdy jsem neviděl použití. V mnoha návodech se uvádí, že se tento obrázek načítá před načtením vlastního src. To ale platí pouze pro starý Netscape, který už nikdo nepoužívá. Osobně doporučuji lowsrc nepoužívat.

Přidá-li se od html tagu <img> atribut galleryimg s hodnotou false (tedy <img ... galleryimg="false"), prohlížeč Internet Explorer nebude po přejetí obrázku myší zobrazovat takové ty tři hnusné ikonky (uložit vytisknout a ještě něco). Na Firefox ani jiné prohlížeče to vliv nemá.

Dalším nestandardním atributem je dynsrc. Pokud se v tagu <img> místo atributu src uvede tag dynsrc, jde o video. Jde pravděpodobně o velmi nestandardní rozšíření Internet Exploreru, většinou nefunguje. Prohlížeče podporují takové video formáty, na které mají v operačním systému kodeky. Trochu lepší podporu videa lze dosáhnout pomocí objektů a zejména tagem video.

Picture

Picture je kontejner pro vložení obrázku. Zápisem je podobný tagům <audio> a <video>, protože se také používá tag <source>.

Všechno, co umí picture, jde uvělat tagem <img>, zejména ve spojení se srcset. Proto jsem se zatím jeho popisem nezabýval. Budete-li tag <picture> testovat, vždy do něj vložte na konec i tag <img>, třeba i bez atributů. Bez vloženého <img> picture nefunguje.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.