<picture> ... </picture> značka pro vložení obrázku s rychlým načítáním

Proč stahovat při načítání webové stránky obrázek o délce např. 1920 px, když obrázek stahujete do telefonu, který má jen stovky px. Značka <img> vám možnost volby nedává, ale <picture> ano. Více se dočtete v tomto článku.

Ukázka HTML značky v praxi

<picture>
    <source srcset="/adresar/nazev-obrazku-velky.jpg" media="(min-width: 1900px)">
    <source srcset="/adresar/nazev-obrazku-maly.jpg" media="(min-width: 1000px)">
    <img src="/adresar/nazev-obrazku-velky.jpg" alt="Nějaký výstižný popis">
</picture>

Vysvětlení

HTML značka <picture> jen obaluje značky <source>, které nabízejí konkrétní URL adresy (srcset="…") k určeným obrázkům. Do atributu media="…" je možné zadat podmínku, kdy daný <source> bude použit. V našem případě je použita vlastnost min-width:, která je ve většině případů zcela logická.

Na konci je použita ještě standardní HTML značka <img> pro případ, že by starší webový prohlížeč nepodporoval značku <picture>. Starší prohlížeč by ignoroval značky, kterým nerozumí a použil by tu, kterou zná. 

Kam dál

Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla