Mo‘ Pixels, Mo‘ Problems Fall 2013

The Fall 2013 edition of "Mo Pixels Mo Problems" and how to deal with Responsive Images given at Artifact Conf East (http://artifactconf.com) in Providence, RI. The topic has changed a lot since the last time and there are even more options out there... so crack a beer and let's go on a journey.

Transcript

1. “Mo’ Pixels,
   Mo’ Problems”
   Dealing with Responsive Images
   with Dave Rupert @davatron5000
   

   View Slide

2. “!is is why

   Daddy drinks

   at night.”
   

   View Slide

3. + + +
   (slang)
   (place) (personal brand) (sound)
   

   View Slide

4. paravelinc.com
   

   View Slide

5. shoptalkshow.com
   

   View Slide

6. View Slide

7. Le menu
   • Discovery of Findings: Key Issues and Data Points
   • Identify Primary Blockers for the Agile Web
   • Leverage the Paravel Image Biz-Strat
   • Cloud-based Cutting Edge E-Solutions
   • Sweet Hacks, Bro
   

   View Slide

8. Le Problème
   Like all Americans, websites are getting
   more and more obese.
   #sickburn
   

   View Slide

9. HTML, CSS, JavaScript, Images, Fonts, Flash?, etc.
   of page load times are
   because of the front end.
   80%
   

   View Slide

10. kilobytes == average page
    weight in October 2013.
    1,617
    Up 333kb (25%) from January 2013.
    

    View Slide

11. kilobytes == images
    (~56 of them)
    988
    Up 195kb (24.5%) from January 2013.
    

    View Slide

12. of page weight is images.
    ~60%
    Source: HTTPArchive.org
    

    View Slide

13. Les Facteurs
    What’s causing all this image bloat?
    

    View Slide

14. №1
    Bad Web 

    Performance
    Websites keep getting fatter.
    

    View Slide

15. kilobytes == average page
    weight in April 2013
    1,617
    kilobytes == size of
    moto.oakley.com
    87,962
    cost to view moto.oakley.com on
    Verizon’s smallest plan
    $22
    Don’t worry, Oakley got the site down to 13.7 MBs (84% improvement!)
    

    View Slide

16. millisecond delay
    500
    reduction in tra"c
    20%
    http://www.codinghorror.com/blog/2006/11/speed-still-matters.html
    

    View Slide

17. №2
    Responsive
    Web Design
    One website to rule them all.
    

    View Slide

18. “Blame the
    implementation
    not the technique”
    – Tim Kadlec
    

    View Slide

19. of RWD sites send the same
    payload to mobile and desktop.
    72%
    Only 6% were “much smaller”
    http://www.guypo.com/?p=3374
    

    View Slide

20. Unofficial findings from the
    Dave Rupert Arm Chair Research Institute
    “Expect RWD to
    bloat things ~10%”
    

    View Slide

21. №3
    Retina Screens
    LOL. YOUR JOB JUST GOT SOOOOoOO MUCH
    MORE DIFFICULT! LOLOLOLOL
    — Steve Jobs, from the grave.
    

    View Slide

22. View Slide

23. LOL. I’m 3x!
    

    View Slide

24. Considérations
    Breakpoints Densities Art direction
    

    View Slide

25. Breakpoints
    

    View Slide

26. Densities
    

    View Slide

27. Art direction
    http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/
    

    View Slide

28. The Paravellian®
    Approach
    Use CSS and Web Fonts whenever possible
    Use SVG and Icon Fonts whenever applicable
    Use a Responsive Images Solution
    

    View Slide

29. CSS &
    Web Fonts
    

    View Slide

30. View Slide

31. .pizza {
    background-image: url("pizza.png");
    }
    !
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 240dpi) {
    .pizza {
    background-image: url("pizza@2x.png");
    background-size: 400px 300px;
    }
    }
    

    View Slide

32. SVG &
    Icon Fonts
    

    View Slide

33. SVG
    Scalable Vector Graphics
    Basically illustrator files
    

    View Slide

34. Ghostscript Tiger SVG: 67kb
    

    View Slide

35. 
    
    
    

    View Slide

36. 
    

    View Slide

37. onerror="this.src=pizza.png;
    this.onerror=null;"

    />
    

    View Slide

38. .pizza {
    background-image: inline-image("pizza.svg");
    background-size: 400px 300px;
    

    .no-svg & {

    background-image: inline-image("pizza.png");

    }

    

    }
    Sass/Compass SVG Data URI with PNG Fallback
    

    View Slide

39. .pizza {
    background-image: url(data:image/svg+xml;base64,
    R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
    background-size: 400px 300px;
    }

    .no-svg .pizza {

    background-image: url("pizza.png");

    }

    Sass/Compass SVG Data URI with PNG Fallback
    

    View Slide

40. !
    /'
    //
    . //
    |\//7
    /' " \
    . . .~ ~
    | ( \
    _ _ - -_ | '._ '
    _ __ _- \_ _/ \'-'
    // \\_/
    \\ | |
    || | /
    / | \ /
    |VV ||--\__________/-||-/|
    || || || ||
    { } { } { }{ }
    Grunticon
    grumpicon.com
    

    View Slide

41. 9+ 3.0+ 3.2+
    Source: caniuse.com
    SVG support
    

    View Slide

42. Icon Fonts
    Tiny monochrome vector packs.
    

    View Slide

43. a b c d e f g h i j
    a b c d e f g h i j
    

    View Slide

44. View Slide

45. Source: caniuse.com
    Icon font support
    8+
    NO
    OPERA
    MINI :(
    

    View Slide

46. La quête d'une
    solution d'image
    sensible
    

    View Slide

47. Failed paths
    What we’ve tried, what kinda works and what doesn’t.
    

    View Slide

48. “I’ll just use

    JavaScript!”
    — Everyone Ever
    

    View Slide

49. src="pizza-mobile.jpg"
    data-desktop="pizza-desktop.jpg"
    />
    

    View Slide

50. <br/>if($(window).width() > 960) {<br/>$('img').each(function(){<br/>$(this).attr(<br/>'src', $(this).data('desktop')<br/>);<br/>});<br/>}<br/>
    

    View Slide

51. “Donezo.
    I am so smart.”
    — Javascript Wizards
    

    View Slide

52. View Slide

53. WONK WONK.
    Double Download
    
    

    View Slide

54. View Slide

55. 16kb + 46kb = 62kb (+33% Not ideal, but maybe okay)
    

    View Slide

56. @56 Images: 896kb + 2.576MB = 3.472MB
    

    View Slide

57. Other paths
    spacer.gif
    Background-images
    Elements
    Servers and cookies
    Network Detection
    

    View Slide

58. Les candidats
    @srcset
    
    

    View Slide

59. N
    CHALLENGER
    APPROACHING
    A new foe has appeared!
    

    View Slide

60. Les candidats
    @srcset
    
    srcN
    

    View Slide

61. @srcset
    Based on the CSS4 image-set() value
    Proposed by Apple® on May 10th, 2012
    

    View Slide

62. src="banner.jpeg"
    srcset="banner-HD.jpeg 2x,
    banner-phone.jpeg 100w,
    banner-phone-HD.jpeg 100w 2x">
    @srcset syntax
    

    View Slide

63. View Slide

64. LATE BREAKING NEWS
    IN AUGUST, WEBKIT SHIPPED @SRCSET WITHOUT THAT
    WEIRD ‘600w’ SYNTAX. WILL LIKELY BE DROPPED.
    

    View Slide

65. src="banner.jpeg"
    srcset="banner@2x.jpeg 2x,
    banner@3x.jpeg 3x">
    *CURRENT* @srcset syntax
    

    View Slide

66. Strengths
    Just an attribute
    Strong “2x” syntax
    Weaknesses
    Comma delimited values
    Faux-media query microsyntax
    Non-intuitive px-based “w” and “h” units
    Browser determination
    Polyfill causes the double download
    Breaks preloader
    

    View Slide

67. 
    Proposed by the Responsive Images Community Group
    on May 11th, 2012
    

    View Slide

68. 
    
    
    
    
    syntax
    

    View Slide

69. Strengths
    Audio/Video element syntax
    Media-query based
    Supports non-pixel values
    Supports art direction
    Uses @srcset’s “2x” powers
    Fallbacks for unsupported types
    Weaknesses
    Verbose
    Breaks preloader
    “Hard to implement”*
    * Citation needed
    

    View Slide

70. Picturefill
    https://github.com/scottjehl/picturefill
    Start using the picture element today!
    

    View Slide

71. BREAKING NEWS
    HAS BEEN RELEGATED TO BEING A “NOTE” ON
    THE NEW SRC-N PROPOSAL.
    

    View Slide

72. 
    “It’s icky”
    - Browsers
    
    “It’s icky”
    - Browsers
    

    View Slide

73. srcN
    Proposed by Tab Atkins (Google)
    on September 25th, 2013
    

    View Slide

74. 
    
    
    
    
    syntax
    

    View Slide

75. src-1="(min-width: 45em) large-1.jpg 1x, large-2.jpg 2x"
    src-2="(min-width: 18em) med-1.jpg 1x, med-2.jpg 2x"
    src-3="small-1.jpg 1x, small-2.jpg 2x"
    src="large.jpg"
    />
    srcN syntax
    

    View Slide

76. Variable sized images
    

    View Slide

77. src-1="100% (30em) 50% (50em) calc(33% - 100px);
    pic100.png 100, pic200.png 200, pic400.png 400,
    pic800.png 800, pic1600.png 1600, pic3200.png 3200"
    />
    Viewport URL
    

    View Slide

78. Strengths
    Media-query based
    Supports non-pixel values
    Supports art direction
    @srcset’s “2x” powers
    Viewport-URLs
    “Easy to implement”??
    Weaknesses
    Ordinal Attributes?
    Fallbacks for unsupported types?
    

    View Slide

79. “Sure, fuck it,
    whatever…”
    — A wise developer one time
    

    View Slide

80. ch
    CHALLENGER
    APPROACHING
    A new foe has appeared!
    

    View Slide

81. Client Hints
    Proposed by Ilya Grigorik (Google)
    ––enable-client-hints
    

    View Slide

82. GET /img.jpg HTTP/1.1
    !
    Accepts: image/jpg
    CH-DPR: 2.0
    CH-RW: 160
    How a client hinted browser requests an image
    

    View Slide

83. Detects DPR >= 1.5
    

    View Slide

84. GET /img.jpg HTTP/1.1
    !
    Accepts: image/webp, image/jpg
    CH-DPR: 2.0
    CH-RW: 160
    How a Blink requests an image
    

    View Slide

85. Detects WebP support
    

    View Slide

86. View Slide

87. src-1="(min-width: 45em) large-1.jpg 1x, large-2.jpg 2x"
    src-2="(min-width: 18em) med-1.jpg 1x, med-2.jpg 2x"
    src-3="small-1.jpg 1x, small-2.jpg 2x"
    src="small-1.jpg"
    />
    

    View Slide

88. src-1="(min-width: 45em) large.jpg"
    src-2="(min-width: 18em) med.jpg"
    src-3="small.jpg"
    />
    

    View Slide

89. rif
    CHALLENGER
    APPROACHING
    A new foe has appeared!
    

    View Slide

90. Responsive
    Image Format
    Proposed by Yoav Weiss
    

    View Slide

91. View Slide

92. View Slide

93. “Got any
    sweet hacks,
    Brovidence?”
    — Surfer dudes (from Rhode Island)
    

    View Slide

94. Images as a Service
    src.sencha.io
    jetpack.me/photon
    resrc.it
    responsive.io
    adaptive-images.com
    

    View Slide

95. src='http://src.sencha.io/http://sencha.com/files/u.jpg'
    alt='My smaller image'
    />
    

    View Slide

96. Strengths
    One image tag
    Legacy sites
    Weaknesses
    Blackbox
    What if these services shut down?
    What if you switch platforms?
    

    View Slide

97. 1.5x Hack
    For Medium Importance images
    

    View Slide

98. View Slide

99. Strengths
    One image
    Weaknesses
    Penalizes small screen users
    

    View Slide

100. Compressive

     Images
     The following is some black effin’ magic.
     Put on your robes and wizard hat...
     

     View Slide

101. View Slide

102. View Slide

103. Strengths
     One image
     Weaknesses
     Memory intensive, esp. on phones
     Save as... pixelated
     

     View Slide

104. Clown Car
     Crafted by Estelle Weyl
     

     View Slide

105. 
     

     View Slide

106. 
     Clown Car Technique
     <br/>svg {<br/>background-size: 100% 100%;<br/>background-repeat: no-repeat;<br/>}<br/>@media screen and (max-width: 400px) {<br/>svg {background-image: url(pizza/small.png);}<br/>}<br/>@media screen and (min-width: 401px) and (max-width: 700px) {<br/>svg {background-image: url(pizza/medium.png);}<br/>}<br/>@media screen and (min-width: 701px) and (max-width: 1000px) {<br/>svg {background-image: url(pizza/big.png);}<br/>}<br/>@media screen and (min-width: 1001px) {<br/>svg {background-image: url(pizza/huge.png);}<br/>}<br/>
     
     

     View Slide

107. Strengths
     Simple
     Element Query
     Weaknesses
     Make SVG for every image set
     

     View Slide

108. Lots o’ options
     Above all, use your brain and pick
     what’s best for your project.
     

     View Slide

109. “!anks!”
     Dave Rupert
     @davatron5000
     github.com/davatron5000
     

     View Slide