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.

Jak nám responzivní web rozbil obrázky

4,240 views

Published on

Ignite přednáška na Devel.cz Konferenci '14 (http://devel.cz/konference/2014)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Jak nám responzivní web rozbil obrázky

  1. 1. web rozbil obrázky @robinpokorny Jak nám responzivní
  2. 2. d1m22.deviantart.com <body> ! <img src=“charmander.jpg"/> ! </body>
  3. 3. Rob Gill
  4. 4. edge
  5. 5. responsiveimages.org
  6. 6. Výběr dle rozlišení zařízení
  7. 7. Výběr dle velikosti viewportu
  8. 8. 50% 100% 200% 400%25%
  9. 9. Výběr dle fyzický pixel CSS pixel
  10. 10. Art direction
  11. 11. <picture> v2
  12. 12. <picture> ! <source media="(min-width: 40em)"
 srcset="big.jpg 1x, big-hd.jpg 2x”> ! <img src=“small.jpg" alt="Charmander" srcset=“small-hd.jpg 1024w, small.jpg 320w" sizes="(min-width: 20em) 33.3vw, 100vw” /> ! </picture>
  13. 13. <source sizes=… srcset=… > <picture> v2
  14. 14. “<picture> je dnes vhodný k produkčnímu nasazení.” #10Tab Atkins @
  15. 15. much readywow such code very production so clever many usecases
  16. 16. http://m.Feedbando.com/rozbil shadehikari.deviantart.com <picture> Používej již dnes!

×