Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pokročilé responzivní obrázky

3,889 views

Published on

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/).

Published in: Technology
  • Be the first to comment

Pokročilé responzivní obrázky

  1. 1. Pokročilé responzivní obrázky You are challenged by prof. @robinpokorny
  2. 2. Breakthrough Internet Device
  3. 3. http://httparchive.org/interesting.php?a=All&l=Nov%201%202014
  4. 4. http://usecases.responsiveimages.org/ (zdroje následujících obrázků)
  5. 5. http://usecases.responsiveimages.org/ (zdroje následujících obrázků)
  6. 6. Resolution-based selection
  7. 7. Viewport-based selection
  8. 8. Device-pixel-ratio-based selection
  9. 9. Art direction
  10. 10. Design breakpoints
  11. 11. Matching media features and media types
  12. 12. Relative units Image formats User control over sources
  13. 13. Obraz je jakékoli konečné grafické vyjádření ve dvou rozměrech.
  14. 14. 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.
  15. 15. Vektor stavu popisuje všechny vlastnosti zobrazovacího zařízení včetně prostředí. Display, okno, prohlížeč, síť…
  16. 16. 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).
  17. 17. Ú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.
  18. 18. fi: (s, Zi, αi) ↦ zεZi že αi(z, s) = 1 , Úloha responzivních obrázků:
  19. 19. Vektor stavu Zdroje a jejich rozměry Autorská představa
  20. 20. http://www.zdrojak.cz/clanky/adaptivni-obrazky-vyresena-otazka-s-novym-otaznikem/
  21. 21. https://html.spec.whatwg.org/multipage/embedded-content.html
  22. 22. <img src=“foto-320.jpg" />
  23. 23. <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” />
  24. 24. ericportis.com
  25. 25. srcset=“( [url] [integer]w, )+" fyzická šířka v pixelech
  26. 26. srcset=“( [url] [float]x, )+" pixel density (0.25x, 0.5x, 1x, 2x, 4x) Pozor! Odlišný význam od starší specifikace.
  27. 27. sizes=“( [media query] [length], )* [length]" první vyhovující, nebo
  28. 28. sizes=“( [media query] [length], )* [length]" px em vw rem in calc(50vw - 2em)
  29. 29. <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” />
  30. 30. Art direction
  31. 31. <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, …”>
  32. 32. <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>
  33. 33. <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
  34. 34. Výňatek z algoritmu “select an image source” In a user agent-specific manner, choose one image source from source set.
  35. 35. fi: (s, Zi, αi) ↦ zεZi že αi(z, s) = 1 , Úloha responzivních obrázků:
  36. 36. fi, : (s, Zi, αi) ↦ zεZi že αi(z, s) = 1 , Úloha responzivních obrázků:
  37. 37. <img srcset=“foto-3000.jpg 3000w, foto-1000.jpg 1000w” sizes=“1100px”/>
  38. 38. 1000 1100 3000 foto-1000.jpg foto-3000.jpg
  39. 39. 1000 1100 3000 foto-900.jpg foto-3000.jpg 1732 √(1000 * 3000) 2000 1000 + 3000 2
  40. 40. "You must really like your <picture> and always keep it by your side!" @robinpokorny

×