Responsible Responsive Images

Responsible Responsive Images

36386473ee7de091db26bd82f8d18ca8?s=128

Mat Marquis

May 20, 2013
Tweet

Transcript

  1. None
  2. None
  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

  19. None
  20. “ EVERYONE HERE, AGAIN …So, you’re really gonna talk about

    images for an entire hour.
  21. None
  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="…">
  35. None
  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.

  52. None
  53. None
  54. None
  55. None
  56. gruntjs.com

  57. github.com/filamentgroup/grunticon/

  58. None
  59. /' // . // |\//7 /' " \ . .

    . | ( \ | '._ ' / \'-'
  60. flickr.com/photos/esoterica/2210108334

  61. Thanks.