Mediální element

<img>

Obrázek. Fotka, ilustrace nebo ikona vložená přímo do stránky.

V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.

Zápis

Cesta a popis

img je nepárový tag. src říká, kde obrázek leží, alt popisuje, co na něm je.

Obrázek je širší než okno a přetéká. Opravíme to za chvíli.

Atributy

Jak psát alt

alt obrázek nahrazuje: přečte ho screen reader a ukáže se, když se obrázek nenačte. Pište, co je na obrázku důležité, ne „obrázek“ nebo název souboru.

Prázdný alt="" je v pořádku u ozdob. Chybějící alt v pořádku není: screen reader pak přečte název souboru.

Atributy

Rozměry předem

width a height řeknou prohlížeči rozměry dřív, než se obrázek stáhne. Vyhradí mu místo a text pod ním při načítání neposkočí.

Píšou se v pixelech bez jednotky. Skutečnou velikost na stránce pak řídí CSS, prohlížeč z nich bere hlavně poměr stran.

Atributy

Načíst, až bude potřeba

Obrázky hluboko dole na stránce nemusí prohlížeč stahovat hned. loading="lazy" je načte, až se k nim čtenář přiblíží. Stránka se otevře rychleji.

Hlavní obrázek nahoře stránky nechte bez lazy: ten má být vidět co nejdřív.

Styl

Obrázek, který se vejde

Tři řádky, které patří na každý web. Obrázek nebude nikdy širší než jeho kontejner a zachová si poměr stran.

display: block odstraní malou mezeru pod obrázkem. Obrázek je jinak inline a sedí na účaří textu.

Styl

Stejný výřez pro všechny

V gridu karet mají obrázky různý tvar. aspect-ratio jim vnutí stejný poměr stran a object-fit: cover obrázek ořízne, místo aby ho zdeformoval.

object-position určí, kterou část obrázku při ořezu zachovat, třeba object-position: right.

Více velikostí

Menší soubor pro menší displej

Fotku 2000 pixelů širokou telefon nepotřebuje. V srcset nabídneme víc velikostí a v sizes řekneme, jak široký obrázek na stránce bude. Prohlížeč si vybere nejmenší, který stačí.

U SVG to potřeba není: vektorový obrázek je ostrý v každé velikosti. Proto v náhledu zůstáváme u jednoho souboru.

Responzivita

Na telefonu větší

Tři čtverečky vedle sebe by na telefonu byly jako známky. Karty dáme pod sebe a obrázkům vrátíme širší poměr, aby nezabraly celou obrazovku na výšku.

Shrnutí

Jak vkládat obrázky

Ano

alt u každého obrázku, u ozdoby prázdný
width a height, aby stránka neposkakovala
max-width: 100% a height: auto
object-fit: cover pro stejné výřezy

Ne

alt="obrázek" nebo žádný alt
loading="lazy" u hlavního obrázku nahoře

Další: <picture> →