Responsible Responsive Images

Transcript

3. alistapart.com/articles/responsive-web-design
4. A FLEXIBLE GRID • MEDIA QUERIES • FLEXIBLE IMAGES AND MEDIA •
5. A FLEXIBLE GRID • MEDIA QUERIES • FLEXIBLE IMAGES AND MEDIA • HUGE FREAKIN’ WEBSITES •
6. This website is best viewed at 800x600 in Internet Explorer version 5.3 or above.
7. This website is best viewed on WebKit. This website is best viewed on either a $500 phone/tablet or a $3,000 laptop with an ultra high-resolution display. Let’s see, you’re on… what, 3G? Ugh, okay, fine. That’ll probably be enough. Don’t go into any tunnels or anything, though. What data plan do you have? …Seriously? You’ll need to upgrade—I’m gonna use like a quarter of that on the homepage alone. C’mon, this isn’t 2011; get with the program.
8. Best viewed in the First World.
9. httparchive.org/interesting.php?a=All&l=May%201%202013 133kb 36kb 57kb 91kb 219kb 872kb Images JavaScript Flash HTML CSS Other
10. httparchive.org/interesting.php?a=All&l=May%201%202013 February 2013 March 2013 April 2013 May 2013 0 220 440 660 880
11. Holler if you guys need any more help with your headlines. twitter.com/beep/statuses/180746121998635008 THE RETINA RECKONING RETINOCALYPSE RETINAGEDDON RETINARÖK ETHAN MARCOTTE “
12. @1x 250x291 64.13KB @2x 500x582 210KB
13. “ EVERYONE HERE …You’re not really going to talk about images for an entire hour, are you?
14. 85.3 MB transferred 453 requests
15. https://dl.dropboxusercontent.com/u/70090/ shakespeare.tar.gz 5.3 MB
16. ~50 MB
17. 1.1MB
18. 1.5MB
20. “ EVERYONE HERE, AGAIN …So, you’re really gonna talk about images for an entire hour.
22. 72% guypo.com/?p=3374 Of responsive websites send roughly the same data to both mobile and desktop users
23. “ EVERY CARPENTER Measure twice, cut once.
24. <img src="/img/cat.gif" height="100" width="200">
25. “ EVERYONE THAT HASN’T LEFT YET …
26. img { max-width: 100%; } <img src="/img/cat.gif">
27. img, video, canvas, object { max-width: 100%; }
28. <video> <source src="bigger.xxx" media="(min-width: 600px)"> <source src="small.xxx"> </video>
29. <img src="mobile.jpg" data-fullsrc="fullsize.jpg" />
30. alistapart.com/articles/responsive-images-how-they-almost-worked- and-what-we-need/
31. etherpad.mozilla.org/responsive-assets
32. <picture> <source src="fullsize.jpg" media="(min-width: 60em)" /> <source src="medium.jpg" media="(min-width: 40em)" /> <source src="small.jpg" /> <img src="fallback.jpg" alt="…" /> </picture>
33. w3c.responsiveimages.org
34. <img src="fallback.jpg" srcset="small.jpg 320w 1x, small-hd.jpg 320w 2x, medium.jpg 640w 1x, medium-hd.jpg 640w 2x, large.jpg 1x, large- hd.jpg 2x" alt="…">
36. alistapart.com/articles/responsive-images-and-web-standards-at-the- turning-point/
37. <img alt="" src="fallback.jpg" srcset="small.jpg 320w 1x, small-hd.jpg 320w 2x, medium.jpg 640w 1x, medium-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x">
38. <picture> <source > <source > <source srcset="small-sd.jpg 1x, small-hd.jpg 2x"> <img src="small-sd.jpg" alt=""> </picture> media="( min-width: 40em )" media="( min-width: 20em )" srcset="big-sd.jpg 1x, big-hd.jpg 2x" srcset="mid-sd.jpg 1x, mid-hd.jpg 2x"
39. <picture> <source > <source > <source srcset="small-sd.jpg 1x, small-hd.jpg 2x"> <img src="small-sd.jpg" alt=""> </picture> media="( min-width: 40em )" media="( min-width: 20em )" srcset="big-sd.jpg 1x, big-hd.jpg 2x" srcset="mid-sd.jpg 1x, mid-hd.jpg 2x"
40. <picture> <source > <source > <source > <img src="small-sd.jpg" alt=""> </picture> media="( min-width: 40em )" media="( min-width: 20em )" srcset="big-sd.jpg 1x, big-hd.jpg 2x" srcset="mid-sd.jpg 1x, mid-hd.jpg 2x" srcset="small-sd.jpg 1x, small-hd.jpg 2x"
41. <picture> <source media="( min-width: 30em )" src="big.jpg"> <source src="small.jpg"> <img src="fallback.jpg" alt="…"> </picture>
42. <img src="image-sd.gif" srcset="image-hd.jpg 2x" alt="">
43. picture.responsiveimages.org
44. responsiveimages.org
45. github.com/scottjehl/picturefill/
46. “ Prollyfill [prô•le•fil] (n.): A polyfill for a not-yet-standardized API. twitter.com/SlexAxton/status/257543702124306432 ALEX SEXTON
47. 800KB 1.2MB
48. <div data-picture> <div data-source data-media="( min-width: 30em )" data-src="big.jpg"></div> <div data-source src="small.jpg"></div> <noscript> <img src="fallback.jpg" alt="…"> </noscript> </div>
49. SVG
50. “ Pictures shouldn’t be made of math. SOME IDIOT
51. “ twitter.com/DailyWilto/status/189811313550180353 SOME IDIOT Pictures shouldn’t be made of math.
56. gruntjs.com
57. github.com/filamentgroup/grunticon/
59. /' // . // |\//7 /' " \ . . . | ( \ | '._ ' / \'-'
60. flickr.com/photos/esoterica/2210108334
61. Thanks.