Mediální element

<picture>

Responzivní obrázek. Jiný výřez nebo jiný formát podle toho, kde se stránka zobrazuje.

V náhledu vidíte, kam se dostaneme. Přepněte náhled na Mobil a sledujte, co se stane s obrázkem.

Zápis

Nabídka a obrázek

picture obaluje jeden nebo víc prvků source a na konci obyčejný img. Prohlížeč projde nabídku shora a použije první source, který sedí. Když nesedí žádný, zobrazí img.

media má stejný zápis jako @media v CSS. Čtverec má jiný poměr stran, proto mu rozměry napíšeme zvlášť.

Pozor

Bez img to nejde

Obrázek na stránce je vždycky ten img. source mu jen podstrčí jiný soubor. Proto alt, width, height i styly patří k img.

Starý prohlížeč, který picture nezná, ho přeskočí a ukáže rovnou img. Nic se nerozbije.

Formáty

Nejlepší formát, který prohlížeč umí

Druhé použití: formáty avif a webp jsou menší než jpg. Atributem type je nabídneme a prohlížeč si vezme první, kterému rozumí.

Pořadí je důležité: nejúspornější formát první, nejjistější (jpg) na konec.

Styl

Stylujeme img

picture je jen wrapper, vzhled dáváme obrázku uvnitř. Stejné tři řádky jako u každého obrázku a k tomu zaoblené rohy.

Responzivita

Jiný výřez pro telefon

Náhled je teď široký jako telefon a prohlížeč vybral čtvercový výřez. Široká krajina by na úzkém displeji byla nudle, ve které se slunce ztratí. Čtverec ho ukáže zblízka.

Nepřidali jsme ani řádek CSS. O výměně souboru rozhoduje HTML: atribut media u source.

Kdy

picture, nebo srcset?

Když jde jen o stejný obrázek v různých velikostech, stačí img se srcset. picture použijte, když chcete jiný výřez nebo jiný formát.

Shrnutí

Jak používat picture

Ano

img vždy na konci, s alt
media pro jiný výřez na telefonu
type pro úspornější formáty
styly dávat na img, ne na picture

Ne

picture jen kvůli velikostem: na to stačí srcset
alt u source, kde nic neudělá

Další: <video> →