Responzivní obrázek
Nejjednoduší cesta je dát obrázku rozměr v procentech
<img src="./html/021/001.svg" alt="picture" style="width:100%;" >
Můžeme použít max-width
<img src="./html/021/001.svg" alt="picture" style="max-width:100%;height:auto;" >
Zobrazování obrázků dle šířky prohlížeče
K tomuto využijeme tag <picture >
<picture>
<source srcset="./html/021/001_1500.svg" media="(max-width: 1500px)">
<source srcset="./html/021/001_600.svg" media="(max-width: 600px)">
<source srcset="./html/021/001.svg">
<img src="./html/021/001.svg" alt="pictures" style="width:auto;">
</picture>
Změň velikost okna, aby se projevilo zmenšení obrázku
Tento postup je vhodný u malého počtu obrázků
Při použití rutiny PHP nebo obsluhy JavaScriptem lze dosadit proměnou.
Lepší postup je pak čisté HTML a CSS s optimalizací obrázků pro web
Rozhodně neni vhodné používat rovnou neupravené fotky z dnešních fotoaparátů!
Velikost fotky je jen a jen na uvážení k čemu slouží.
First-mobile upřednostňuje čistý text s minimem fotek a grafiky
Rychlost je nadřazena efektům
srcset
Další možností je použití atributu srcset
V tomto případě je nutné použít i atribut width nebo max-width
Prohlížeč si sám vybere obrázek dle šířky okna
Obrázky musí být optimalizovány na web