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
2. “!is is why
 Daddy drinks
 at night.”
3. + + + (slang) (place) (personal brand) (sound)
4. paravelinc.com
5. shoptalkshow.com
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.
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
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
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
53. WONK WONK. Double Download
    
    
    
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
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
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
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
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...
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