MENU

<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

Kurz základy HTML a CSS | Kurz tvorby webových stránek pomocí systému Joomla

Potřebujete pomoci? Žádný problém!

Nevíte si s něčím rady a potřebujete rychlou pomoc odborníka? Můžete se obrátit na nás a my vám dokážeme pomoci i přes internet.

Více o on-line pomoci přes internet se dozvíte zde:

On-line pomoc

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548