Jak nám responzivní web rozbil obrázky (cs)

A presentation at Devel.cz ‘14 in June 2014 in Prague, Czechia by Robin Pokorny

Slide 1

Slide 1

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

Slide 2

Slide 2

<body> ! <img src=“charmander.jpg”/> ! </body> d1m22.deviantart.com

Slide 3

Slide 3

Rob Gill

Slide 4

Slide 4

Slide 5

Slide 5

edge

Slide 6

Slide 6

responsiveimages.org

Slide 7

Slide 7

Výběr dle rozlišení zařízení

Slide 8

Slide 8

Slide 9

Slide 9

Výběr dle velikosti viewportu

Slide 10

Slide 10

Slide 11

Slide 11

25% 50% 100% 200% 400%

Slide 12

Slide 12

Výběr dle fyzický pixel CSS pixel

Slide 13

Slide 13

Slide 14

Slide 14

Art direction

Slide 15

Slide 15

<picture> v2

Slide 16

Slide 16

<picture> !

<source media=”(min-width: 40em)” srcset=”big.jpg 1x, big-hd.jpg 2x”> ! <img ! </picture> src=“small.jpg” alt=”Charmander” srcset=“small-hd.jpg 1024w, small.jpg 320w” sizes=”(min-width: 20em) 33.3vw, 100vw” />

Slide 17

Slide 17

<picture> v2

<source sizes=… srcset=… >

Slide 18

Slide 18

“<picture> je dnes vhodný k produkčnímu nasazení.” Tab Atkins @ #10

Slide 19

Slide 19

many usecases much ready wow very production so clever such code

Slide 20

Slide 20

Používej <picture> již dnes! http://m.Feedbando.com/rozbil shadehikari.deviantart.com