{ {Frontendisti.cz} @robinpokorny
Jun 14, 2015
{{Frontendisti.cz} @robinpokorny
foto.jpg 3264 × 2448
<img src="foto.jpg" />
<img src="foto.jpg" width="1024" />
foto-1024.jpg 1024 × 768
1024
<img src=“foto-1024.jpg" />
<img src=“foto-1920.jpg” class=“on-hd” /> <img src=“foto-1024.jpg” class=“on-lg” /> <img src=“foto-640.jpg” class=“on-sm” /> <img src=“foto-320.jpg” class=“on-xs” />
img { width: 100% }; !
.on-lg { display: none; } !
… !
@media (min-width: 1400px) { .on-lg { display: block; } }
Velikost obrazovky
Velikost obrázku na stránce
Jemnost displeje
Fyzické rozměry obrázku
vývojář
Velikost obrazovky
Velikost obrázku na stránce
Jemnost displeje
Fyzické rozměry obrázku
sizes
srcset
<img src=“foto-320.jpg” !
srcset=“foto-1920.jpg 1920w, foto-1024.jpg 1024w, foto-640.jpg 640w, foto-320.jpg 320w” !
sizes=“(min-width: 800px) 25vw, 100vw” />
ericportis.com
srcset=“( [url] [integer]w, )+"
fyzická šířka v pixelech
srcset=“( [url] [float]x, )+"
pixel density (0.25x, 0.5x, 1x, 2x, 4x)( )Pozor! Odlišný význam od starší specifikace.
sizes=“( [media query] [length], )* [length]"
první vyhovující, nebo
px em vw rem in calc(50vw - 2em)
sizes=“( [media query] [length], )* [length]"
<img src=“foto-320.jpg” !
srcset=“foto-1920.jpg 1920w, foto-1024.jpg 1024w, foto-640.jpg 640w, foto-320.jpg 320w” !
sizes=“(min-width: 800px) 25vw, 100vw” />
<picture> ?
<img class=“on-hd” srcset=“charizard-hd.jpg 1920w, …”> !
<img class=“on-lg” srcset=“charmeleon-hd.jpg 1680w, …”> !
<img class=“on-sm” srcset=“charmander-hd.jpg 800w, …”>
<source media="(min-width: 1200px)" srcset=“charizard-hd.jpg 1920w, …”> !
<source media="(min-width: 40em)" srcset=“charmeleon-hd.jpg 1680w, …”> !
<img src=“charmander.jpg" srcset=“charmander-hd.jpg 800w, …”>
<picture>
</picture>
<source media="(min-width: 1200px)" srcset=“charizard-hd.jpg 1920w, …”> !
<source media="(min-width: 40em)" srcset=“charmeleon-hd.jpg 1680w, …”> !
<img src=“charmander.jpg" srcset=“charmander-hd.jpg 800w, …”>
<picture>
</picture>
musí být poslední
epický fallback
může mít sizes (i v source)
class zde
a jiné
@robinpokornyrobinpokorny.com
@robinpokornyrobinpokorny.com
Trenér Mega Charizarda X
Nabízí Charmandera za Bulbasaura
pokebal.png 300w