Motivace, definice, zadání a řešení úlohy responzivních obrázků pomocí <picture> elementu (především) c Google Chrome. Přednáška na pražském DevFest 2014 (http://devfest.cz/).

1. Pokročilé responzivní obrázky
You are challenged by prof. @robinpokorny

2. Breakthrough Internet Device

4. http://httparchive.org/interesting.php?a=All&l=Nov%201%202014

5. http://usecases.responsiveimages.org/
(zdroje následujících obrázků)

6. http://usecases.responsiveimages.org/
(zdroje následujících obrázků)

7. Resolution-based selection

8. Viewport-based selection

9. Device-pixel-ratio-based selection

10. Art direction

11. Design breakpoints

12. Matching media features and media types

13. Relative units
Image formats
User control over sources

15. Obraz je jakékoli konečné grafické
vyjádření ve dvou rozměrech.

16. Zdroj, také fyzický obrázek, je
libovolný prvek prostoru 2<ω
(konečné posloupnosti nul a jedniček),
který má přiřazen rozměr.
Zdroj reprezentuje obraz.

17. Vektor stavu popisuje všechny
vlastnosti zobrazovacího zařízení
včetně prostředí.
Display, okno, prohlížeč, síť…

18. Autorská představa o vyobrazení
obrazu je funkce, která je pro daný
zdroj obrazu a za daného stavu buď
uspokojena (1) nebo neuspokojena (0).

19. Úloha responzivních obrázků:
Buď i obraz a s vektor stavu.
Nechť Zi je množina zdrojů
reprezentujích i, dále nechť αi je
autorská představa o vyobrazení i.
Najděte zεZi, aby byla uspokojena
αi pro z a s.

20. fi: (s, Zi, αi) ↦ zεZi
že αi(z, s) = 1
,
Úloha responzivních obrázků:

21. Vektor stavu
Zdroje a jejich rozměry
Autorská představa

22. http://www.zdrojak.cz/clanky/adaptivni-obrazky-vyresena-otazka-s-novym-otaznikem/

24. https://html.spec.whatwg.org/multipage/embedded-content.html

25. <img src=“foto-320.jpg" />

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

27. ericportis.com

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

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

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

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

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

33. Art direction

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

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

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

38. Výňatek z algoritmu “select an image source”
In a user agent-specific manner, choose
one image source from source set.

39. fi: (s, Zi, αi) ↦ zεZi
že αi(z, s) = 1
,
Úloha responzivních obrázků:

40. fi, : (s, Zi, αi) ↦ zεZi
že αi(z, s) = 1
,
Úloha responzivních obrázků:

41. <img srcset=“foto-3000.jpg 3000w,
foto-1000.jpg 1000w”
sizes=“1100px”/>

42. 1000
1100
3000
foto-1000.jpg
foto-3000.jpg

43. 1000
1100
3000
foto-900.jpg
foto-3000.jpg
1732
√(1000 * 3000)
2000
1000 + 3000
2

45. "You must really like your <picture>
and always keep it by your side!"
@robinpokorny