Má Ostravská přednáška na {Frontendisti.cz}

1. {
{Frontendisti.cz} @robinpokorny

2. foto.jpg 3264 × 2448

3. <img src="foto.jpg" />

4. <img src="foto.jpg" width="1024" />

5. 1024
foto-1024.jpg 1024 × 768

6. <img src=“foto-1024.jpg" />

8. <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” />

9. img { width: 100% };
!
.on-lg { display: none; }
!
…
!
@media (min-width: 1400px) {
.on-lg { display: block; }
}

11. Velikost obrazovky
Velikost obrázku na stránce
Jemnost displeje
Fyzické rozměry obrázku
vývojář

12. Velikost obrazovky
Velikost obrázku na stránce
Jemnost displeje
Fyzické rozměry obrázku
sizes
srcset

13. <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” />

14. ericportis.com

15. srcset=“( [url] [integer]w, )+"
fyzická šířka v pixelech

16. ( srcset=“( [url] [float]x, )+"
)
pixel density (0.25x, 0.5x, 1x, 2x, 4x) Pozor! Odlišný význam od starší specifikace.

17. sizes=“( [media query] [length], )* [length]"
první vyhovující, nebo

18. sizes=“( [media query] [length], )* [length]"
px
em
vw
rem
in
calc(50vw - 2em)

19. <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” />

20. <picture> ?

22. <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, …”>

23. <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>

24. <picture>
<source media="(min-width: 1200px)"
musí být poslední
srcset=“charizard-hd.jpg 1920w, …”>
!
<source media="(min-width: 40em)"
a jiné
srcset=“charmeleon-hd.jpg 1680w, …”>
!
<img src=“charmander.jpg"
srcset=“charmander-hd.jpg 800w, …”>
</picture>
epický fallback
může mít sizes
(i v source)
class zde

26. @robinpokorny
robinpokorny.com

27. @robinpokorny
robinpokorny.com
Trenér Mega Charizarda X
Nabízí Charmandera za Bulbasaura
pokebal.png 300w