Obrázky
| Tag | Význam | Párový |
|---|---|---|
| img | obrázek | nepárový |
| picture | složitější obrázek | párový |
Obrázky se v HTML dělají tagem img. Ve složitějších případech je lepší použít tag picture.
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.
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:
| 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 | |
| loading | kdy se má stahovat | auto| lazy | eager | |
| fetchpriority | priorita stahování | high | low | auto |
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. Nově se dá použít vektorový obrázek ve formátu svg. (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 Safari), 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 png 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).
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:
- umí říct deskriptoru ze srcset, že nemá se nemá porovnávat se šířkou okna, ale s hodnotou zadanou v sizes
- 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í.
Poznámka: Kdybyste chtěli podobnou funkci pro obrázkové pozadí, tedy nastavování různého obrázku pozadí třeba podle toho, jak široký je prohlížeč, můžete u vlastnosti background-image použít buďto klasické CSS media queries, nebo hodnotu image-set.
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.
| 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).
Loading="lazy"
Příklad obrázku, který se stáhne až těsně před tím, než na něj uživatel naroluje:
<img loading="lazy" src="kocicka.jpg" alt="obrázek líné kočičky">
Atribut loading s hodnotou lazy řídí, kdy se má obrázek stahovat, na základě toho, jak je obrázek na stránce vysoko.
- Když je někde dole a uživatel na něj ani zdaleka nedoroloval, tak se obrázek s loading="lazy" zatím nestahuje.
- Když je obrázek na stránce nahoře nebo těsně pod spodním okrajem prohlížeče, stáhne se hned.
K čemu je loading="lazy"? Je to dobré na to, aby se přenášelo méně dat. Proč stahovat obrázky, které uživatel stejně neuvidí?
Před rokem 2019 se muselo podobné chování naprogramovat v javascriptu. Od srpna 2019 už tento lazy loading podporuje prohlížeč Chrome (od verze 76 a další prohlížeče založené na Chromium). Protože je prohlížeč Chrome nejrozšířejnější prohlížeč, soudím, že se používání loading="lazy" už vyplatí. Předpokládám, že další důležité prohlížeče se s implementací připojí.
(Proč se mi nikdy nelíbil lazy loading programovaný v javascriptu? Protože se obrázek pak nesměl do stránky zadávat HTML tagem <img> s atributem src, ale nějakou zpotvořeninou. Odnepaměti totiž platí, že jakmile prohlížeč vidí tag <img src="adresa">, tak ho začne stahovat z adresy uvedené v src. Kdo chtěl stahování odložit, musel napřed obrázek ze stránky vlastně odstranit (tím, že neuvedl src), aby ho tam milostivě vrátil javascriptem. Podobně hloupě se chová AMP. Možná ty zpotvořeniny fungovaly v prohlížečích, ale měly s tím trable všechny mně známé editory.)
K čemu jsou další hodnoty. Loading="auto" je hodnota, která je stejná, jako kdyby ten atribut nebyl přítomný. Hodnota loading="eager" je zajímavější. Říká, že se obrázek má stáhnout s vysokou prioritou. Už dnes prohlížeče obrázky a různé objekty stahují s různou prioritou, zejména podle toho, jak vysoko jsou na stránce. Obrázky mají obvykle prioritu střední (ty, které jsou vidět) nebo nízkou (ty, které nejsou vidět). Hodnota loading="eager" říká, že nějaký obrázek má mít prioritu vysokou.
| loading= | Význam |
|---|---|
| lazy | Obrázek je stažen, až když je vidět, nebo těsně předtím. |
| eager | Obrázek je stažen s nejvyšší prioritou. |
| auto | Obrázek se stáhne, ale o prioritě obrázku si rozhodne prohlížeč. Je to totéž, jako kdyby obrázek atribut loading neměl. |
Pro Internet Explorer 11 a Edge 18 se namísto loading="lazy" dá použít starší atribut lazyload (bez hodnoty nebo s libovolnou hodnotou). Vzhledem k nízkému rozšíření těchto prohlížečů už mi to nepřijde zajímavé.
O lazy loadingu jsem napsal celý článek.
Fetchpriority
Priorita stahování obrázku na úrovni http protokolu. Když prohlížeč uvidí v HTML kódu obrázek s vysokou prioritou (fetchpriority="high"), pokusí se požadavek na něj předřadit jiným stahovaným objektům, takže takhle prioritní obrázek může dorazit do prohlížeče dříve.
<img src="obrazek-zbytecny.png" fetchpriority="low">
<img src="obrazek-normalni.png">
<img src="obrazek-dulezity.png" fetchpriority="high">
Opačně funguje fetchpriority="low", což by měla být nízká priorita stahování. Fetchpriority="auto" je stejné jako to neuvádět, priorita střední.
Důležité je poznamenat, že atribut fetchpriority pro prohlížeč funguje jenom jako doporučení (neumím lépe přeložit anglické slovo hint). Prohlížeč se tím nemusí (a v některých situacích ani nemůže) řídit. Prioritu stahování si prohlížeče určují normálně automaticky a podle mě není nutné to příliš řešit. Automaticky upřednostňují prvky, které blokují vykreslování (styly, skripty) a nižší prioritu automaticky dávají obrázkům a iframům. Tohle je způsob, jak prohlížeči říct, že nějaký obrázek je důležitější než jiné.
Atribut fetchpriority je na podzim 2022 podporován v prohlížečích Chrome a Edge. Nepodpora v jiných prohlížečích nevadí, tam se bude prostě obrázek stahovat s automatickou prioritou. Krom obrázků by mělo jít fetchpriority použít i pro tagy link, iframe, picture, style a script.
Nestandardní atributy tagu <img>
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>.
Téměř všechno, co umí picture, jde udělat tagem <img>, zejména ve spojení se srcset. Výjimkou jsou ale nepodporované obrázkové formáty, na ty je <picture> potřeba. Picture totiž umí zadané source procházet od začátku a když nějaký neumí, pokusí se zobrazit další. Jakmile nějaký source v prohlížeči funguje, tak se zobrazí a další tagy source nebo obsah tagu se ignoruje. Pokud naopak žádný source nezabere, prohlížeč zobrazí alternativní obsah - tedy obsah tagu <picture>.
Budete-li tedy <picture> používat, vždy do něj vložte na konec i tag <img>, třeba i bez atributů. Podle mých pokusů totiž picture bez vloženého <img> nefunguje.
Příklad:
<picture>
<source srcset="obrazek.jpg" type="image/jpg">
<img src="nahradni-img.gif">
</picture>
Když prohlížeč podporuje typ obrázku image/jpg, tak zobrazí obrazek.jpg a vnořený tag <img> ignoruje. Naopak pokud by typ image/jpg neznal nebo nezná tag <picture> (staré prohlížeče včetně IE 11, roboti), zobrazí se záložní obrázek nahradni-img.gif. V případě jpg obrázků je taková konstrukce zbytečná, protože jpg umí všechny prohlížeče. Jiná situace ale nastává s obrázky ve formátu svg a zejména webp. Potom je následující zápis užitečný:
<picture>
<source srcset="obrazek.webp" type="image/webp">
<img src="nahradni-img.jpg">
</picture>
Tak picture nemá žádné atributy kromě obecných (class apod.).
V tagu source se dají používat atributy srcset a sizes stejně jako u obrázku img. Kromě toho source akceptuje atrubut media, např. media="(max-width: 480px)", takže to bude brát v úvahu jen prohlížeč užší než 480px. Tag <source> podrobněji popisuji na stránce o audiu a videu.
Reklama
