20
web rozbil obrázky @robinpokorny Jak nám responzivní

Jak nám responzivní web rozbil obrázky

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Jak nám responzivní web rozbil obrázky

web rozbil obrázky@robinpokorny

Jak nám responzivní

Page 2: Jak nám responzivní web rozbil obrázky

d1m22.deviantart.com

<body> !

<img src=“charmander.jpg"/> !

</body>

Page 3: Jak nám responzivní web rozbil obrázky

Rob Gill

Page 4: Jak nám responzivní web rozbil obrázky
Page 5: Jak nám responzivní web rozbil obrázky

edge

Page 6: Jak nám responzivní web rozbil obrázky

responsiveimages.org

Page 7: Jak nám responzivní web rozbil obrázky

Výběr dlerozlišení zařízení

Page 8: Jak nám responzivní web rozbil obrázky
Page 9: Jak nám responzivní web rozbil obrázky

Výběr dlevelikosti viewportu

Page 10: Jak nám responzivní web rozbil obrázky
Page 11: Jak nám responzivní web rozbil obrázky

50% 100% 200% 400%25%

Page 12: Jak nám responzivní web rozbil obrázky

Výběr dlefyzický pixelCSS pixel

Page 13: Jak nám responzivní web rozbil obrázky
Page 14: Jak nám responzivní web rozbil obrázky

Art direction

Page 15: Jak nám responzivní web rozbil obrázky

<picture> v2

Page 16: Jak nám responzivní web rozbil obrázky

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

Page 17: Jak nám responzivní web rozbil obrázky

<source sizes=… srcset=… >

<picture> v2

Page 18: Jak nám responzivní web rozbil obrázky

“<picture> je dnes vhodný k

produkčnímu nasazení.”

#10Tab Atkins @

Page 19: Jak nám responzivní web rozbil obrázky

much readywow

such codevery production

so clever

many usecases

Page 20: Jak nám responzivní web rozbil obrázky

http://m.Feedbando.com/rozbil

shadehikari.deviantart.com

<picture>Používej

již dnes!