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

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

  • 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!

    Be the first to comment

    Login to see the comments

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

Views

Total views

4,492

On Slideshare

0

From embeds

0

Number of embeds

2,891

Actions

Downloads

4

Shares

0

Comments

0

Likes

0

×