This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Obrázky na úzkých zařízeních: maximální šířka místo pevné
Obrázek nesmí být nikdy širší než jeho místo. Kontrolor měří pro každý profil zařízení, zda jednotlivé bloky přesahují přes zobrazovací oblast — obrázky s pevnou šířkou jsou přitom jedním z nejčastějších původců.
- Základním nastavením, které vyřeší téměř vše, je maximální šířka 100 procent při automatické výšce. Bez toho si fotka široká 1200 pixelů podrží svou šířku i na obrazovce o 390 pixelech.
- Odděleně od toho stojí otázka velikosti souboru: obrázek určený pro počítač je na telefonu nejen příliš široký, ale i zbytečně těžký. To se projeví na době načítání a je vidět v kontrolní oblasti Core Web Vitals.
- Obrázky bez uvedených rozměrů navíc způsobují posuny rozvržení při načítání — stejná chyba se tak projeví ve dvou kontrolních oblastech.
FAQ
Stačí max-width: 100%?
Pro problém s přetečením zpravidla ano. Pro dobu načítání ne — na to jsou navíc potřeba přiměřeně velké soubory podle velikosti obrazovky.
Máme přesto uvádět šířku a výšku?
Ano. Zabraňují poskakování rozvržení při načítání. Spolu s maximální šířkou v CSS z toho vzniká stabilní zobrazení.