Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsible Responsive Images

Responsible Responsive Images

Mat Marquis

May 20, 2013
Tweet

More Decks by Mat Marquis

Other Decks in Technology

Transcript

  1. View Slide

  2. View Slide

  3. alistapart.com/articles/responsive-web-design

    View Slide

  4. A FLEXIBLE GRID

    MEDIA QUERIES

    FLEXIBLE IMAGES AND MEDIA

    View Slide

  5. A FLEXIBLE GRID

    MEDIA QUERIES

    FLEXIBLE IMAGES AND MEDIA

    HUGE FREAKIN’ WEBSITES

    View Slide

  6. This website is best viewed at 800x600 in Internet Explorer version 5.3 or above.

    View Slide

  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.

    View Slide

  8. Best viewed in the First World.

    View Slide

  9. httparchive.org/interesting.php?a=All&l=May%201%202013
    133kb
    36kb
    57kb
    91kb
    219kb
    872kb
    Images JavaScript Flash HTML CSS Other

    View Slide

  10. httparchive.org/interesting.php?a=All&l=May%201%202013
    February 2013
    March 2013
    April 2013
    May 2013
    0 220 440 660 880

    View Slide

  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

    View Slide

  12. @1x
    250x291
    64.13KB
    @2x
    500x582
    210KB

    View Slide


  13. EVERYONE HERE
    …You’re not really going
    to talk about images for an
    entire hour, are you?

    View Slide

  14. 85.3 MB transferred
    453 requests

    View Slide

  15. https://dl.dropboxusercontent.com/u/70090/
    shakespeare.tar.gz
    5.3 MB

    View Slide

  16. ~50 MB

    View Slide

  17. 1.1MB

    View Slide

  18. 1.5MB

    View Slide

  19. View Slide


  20. EVERYONE HERE, AGAIN
    …So, you’re really gonna
    talk about images for an
    entire hour.

    View Slide

  21. View Slide

  22. 72%
    guypo.com/?p=3374
    Of responsive websites send
    roughly the same data to both
    mobile and desktop users

    View Slide


  23. EVERY CARPENTER
    Measure twice, cut once.

    View Slide


  24. View Slide


  25. EVERYONE THAT HASN’T LEFT YET

    View Slide

  26. img {
    max-width: 100%;
    }

    View Slide

  27. img,
    video,
    canvas,
    object {
    max-width: 100%;
    }

    View Slide





  28. View Slide


  29. View Slide

  30. alistapart.com/articles/responsive-images-how-they-almost-worked-
    and-what-we-need/

    View Slide

  31. etherpad.mozilla.org/responsive-assets

    View Slide







  32. View Slide

  33. w3c.responsiveimages.org

    View Slide


  34. View Slide

  35. View Slide

  36. alistapart.com/articles/responsive-images-and-web-standards-at-the-
    turning-point/

    View Slide


  37. View Slide







  38. 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"

    View Slide







  39. 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"

    View Slide







  40. 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"

    View Slide






  41. View Slide


  42. View Slide

  43. picture.responsiveimages.org

    View Slide

  44. responsiveimages.org

    View Slide

  45. github.com/scottjehl/picturefill/

    View Slide


  46. Prollyfill [prô•le•fil] (n.):
    A polyfill for a not-yet-standardized API.
    twitter.com/SlexAxton/status/257543702124306432
    ALEX SEXTON

    View Slide

  47. 800KB
    1.2MB

    View Slide








  48. View Slide

  49. SVG

    View Slide


  50. Pictures shouldn’t be
    made of math.
    SOME IDIOT

    View Slide


  51. twitter.com/DailyWilto/status/189811313550180353
    SOME IDIOT
    Pictures shouldn’t be
    made of math.

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. gruntjs.com

    View Slide

  57. github.com/filamentgroup/grunticon/

    View Slide

  58. View Slide

  59. /'
    //
    . //
    |\//7
    /' " \
    . . .
    | ( \
    | '._ '
    / \'-'

    View Slide

  60. flickr.com/photos/esoterica/2210108334

    View Slide

  61. Thanks.

    View Slide