Mo‘ Pixels, Mo‘ Problems Fall 2013

0988796fb50136535a69cea314396cfa?s=47 Dave Rupert
November 15, 2013

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.

0988796fb50136535a69cea314396cfa?s=128

Dave Rupert

November 15, 2013
Tweet

Transcript

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

    Rupert @davatron5000
  2. “!is is why
 Daddy drinks
 at night.”

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

  4. paravelinc.com

  5. shoptalkshow.com

  6. None
  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
  8. Le Problème Like all Americans, websites are getting more and

    more obese. #sickburn
  9. HTML, CSS, JavaScript, Images, Fonts, Flash?, etc. of page load

    times are because of the front end. 80%
  10. kilobytes == average page weight in October 2013. 1,617 Up

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

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

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

  14. №1 Bad Web 
 Performance Websites keep getting fatter.

  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!)
  16. millisecond delay 500 reduction in tra"c 20% http://www.codinghorror.com/blog/2006/11/speed-still-matters.html

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

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

  19. of RWD sites send the same payload to mobile and

    desktop. 72% Only 6% were “much smaller” http://www.guypo.com/?p=3374
  20. Unofficial findings from the Dave Rupert Arm Chair Research Institute

    “Expect RWD to bloat things ~10%”
  21. №3 Retina Screens LOL. YOUR JOB JUST GOT SOOOOoOO MUCH

    MORE DIFFICULT! LOLOLOLOL — Steve Jobs, from the grave.
  22. None
  23. LOL. I’m 3x!

  24. Considérations Breakpoints Densities Art direction

  25. Breakpoints

  26. Densities

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

  28. The Paravellian® Approach Use CSS and Web Fonts whenever possible

    Use SVG and Icon Fonts whenever applicable Use a Responsive Images Solution
  29. CSS & Web Fonts

  30. None
  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; } }
  32. SVG & Icon Fonts

  33. SVG Scalable Vector Graphics Basically illustrator files

  34. Ghostscript Tiger SVG: 67kb

  35. <object data="pizza.svg" type="image/svg+xml"> <img src=“pizza.png" /> </object>

  36. <img src="pizza.svg" alt="Pizza" />

  37. <img src="pizza.svg" alt="Pizza" 
 onerror="this.src=pizza.png; this.onerror=null;"
 />

  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
  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
  40. ! /' // . // |\//7 /' " \ .

    . .~ ~ | ( \ _ _ - -_ | '._ ' _ __ _- \_ _/ \'-' // \\_/ \\ | | || | / / | \ / |VV ||--\__________/-||-/| || || || || { } { } { }{ } Grunticon grumpicon.com
  41. 9+ 3.0+ 3.2+ Source: caniuse.com SVG support

  42. Icon Fonts Tiny monochrome vector packs.

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

    a b c d e f g h i j
  44. None
  45. Source: caniuse.com Icon font support 8+ NO OPERA MINI :(

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

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

    doesn’t.
  48. “I’ll just use
 JavaScript!” — Everyone Ever

  49. <img alt="Pizza" src="pizza-mobile.jpg" data-desktop="pizza-desktop.jpg" />

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

    }); } </script>
  51. “Donezo. I am so smart.” — Javascript Wizards

  52. None
  53. WONK WONK. Double Download   

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

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

  57. Other paths spacer.gif Background-images <base> Elements Servers and cookies Network

    Detection
  58. Les candidats @srcset <picture>

  59. N CHALLENGER APPROACHING A new foe has appeared!

  60. Les candidats @srcset <picture> srcN

  61. @srcset Based on the CSS4 image-set() value Proposed by Apple®

    on May 10th, 2012
  62. <img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg

    100w 2x"> @srcset syntax
  63. None
  64. LATE BREAKING NEWS IN AUGUST, WEBKIT SHIPPED @SRCSET WITHOUT THAT

    WEIRD ‘600w’ SYNTAX. WILL LIKELY BE DROPPED.
  65. <img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner@2x.jpeg 2x, banner@3x.jpeg 3x"> *CURRENT*

    @srcset syntax
  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
  67. <Picture> Proposed by the Responsive Images Community Group on May

    11th, 2012
  68. <picture alt="Pizza"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)"

    srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> </picture> <picture> syntax
  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
  70. Picturefill https://github.com/scottjehl/picturefill Start using the picture element today!

  71. BREAKING NEWS <PICTURE> HAS BEEN RELEGATED TO BEING A “NOTE”

    ON THE NEW SRC-N PROPOSAL.
  72. <picture> “It’s icky” - Browsers <picture> “It’s icky” - Browsers

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

  74. <picture alt="Pizza"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)"

    srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> </picture> <picture> syntax
  75. <img alt="Pizza" 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
  76. Variable sized images

  77. <img alt="Pizza" 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
  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?
  79. “Sure, fuck it, whatever…” — A wise developer one time

  80. ch CHALLENGER APPROACHING A new foe has appeared!

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

  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
  83. Detects DPR >= 1.5

  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
  85. Detects WebP support

  86. None
  87. <img alt="Pizza" 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" />
  88. <img alt="Pizza" src-1="(min-width: 45em) large.jpg" src-2="(min-width: 18em) med.jpg" src-3="small.jpg" />

  89. rif CHALLENGER APPROACHING A new foe has appeared!

  90. Responsive Image Format Proposed by Yoav Weiss

  91. None
  92. None
  93. “Got any sweet hacks, Brovidence?” — Surfer dudes (from Rhode

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

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

  96. Strengths One image tag Legacy sites Weaknesses Blackbox What if

    these services shut down? What if you switch platforms?
  97. 1.5x Hack For Medium Importance images

  98. None
  99. Strengths One image Weaknesses Penalizes small screen users

  100. Compressive
 Images The following is some black effin’ magic. Put

    on your robes and wizard hat...
  101. None
  102. None
  103. Strengths One image Weaknesses Memory intensive, esp. on phones Save

    as... pixelated
  104. Clown Car Crafted by Estelle Weyl

  105. <img src="pizza.svg" alt="Pizza" />

  106. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car

    Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(pizza/small.png);} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(pizza/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(pizza/big.png);} } @media screen and (min-width: 1001px) { svg {background-image: url(pizza/huge.png);} } </style> </svg>
  107. Strengths Simple Element Query Weaknesses Make SVG for every image

    set
  108. Lots o’ options Above all, use your brain and pick

    what’s best for your project.
  109. “!anks!” Dave Rupert @davatron5000 github.com/davatron5000