dealing with responsive images with dave rupert @davatron5000 · kilobytes == average page 1,427...
TRANSCRIPT
![Page 1: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/1.jpg)
“Mo’ Pixels,
Mo’ Problems”Dealing with Responsive Images
with Dave Rupert @davatron5000
![Page 2: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/2.jpg)
![Page 3: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/3.jpg)
shoptalkshow.com
![Page 4: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/4.jpg)
atxwebshow.com
![Page 5: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/5.jpg)
a11yproject.com
![Page 6: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/6.jpg)
Le menu• Outline the need for responsive images
• Examine failed paths
• Look at our approach at Paravel
• Sweet hacks, bro
![Page 7: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/7.jpg)
Le ProblèmeLike all Americans, websites are getting
more and more obese.
#sickburn
![Page 8: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/8.jpg)
HTML, CSS, JavaScript, Images, Fonts, Flash?, etc.
of page load times are because of the front end.80%
![Page 9: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/9.jpg)
kilobytes == average page weight in April 2013. 1,427
Up 143kb (11%) from January 2013.
![Page 10: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/10.jpg)
kilobytes == images (~56 of them)872
Up 79kb (9%) from January 2013.
![Page 11: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/11.jpg)
of page weight is images.~60%Source: HTTPArchive.org
![Page 12: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/12.jpg)
Les FacteursWhat’s causing all this image bloat?
![Page 13: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/13.jpg)
№1 Bad web performance
Websites keep getting fatter.
![Page 14: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/14.jpg)
kilobytes == average page weight in April 2013 1,427
kilobytes == size of moto.oakley.com 87,962
cost to view moto.oakley.com on Verizon’s smallest plan$22
![Page 15: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/15.jpg)
millisecond delay500reduction in tra"c20%
Performance matters...
http://www.codinghorror.com/blog/2006/11/speed-still-matters.html
![Page 16: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/16.jpg)
№2 Responsive Web Design
One website to rule them all.
![Page 17: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/17.jpg)
of RWD sites send the same payload to mobile and desktop.72%
Only 6% were “much smaller”http://www.guypo.com/?p=3374
![Page 18: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/18.jpg)
“Blame theimplementation, not
the technique”– Tim Kadlec
![Page 19: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/19.jpg)
Expect RWD to add about ~10% to your
page weight.Unofficial findings from the
Dave Rupert Research Institute
![Page 20: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/20.jpg)
№3Retina Screens
LOL. YOUR JOB JUST GOT SOOOOoOO MUCH MORE DIFFICULT! LOLOLOLOL
— Steve Jobs, from the grave.
![Page 21: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/21.jpg)
![Page 22: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/22.jpg)
LOL. I’m 3x!
![Page 23: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/23.jpg)
ConsidérationsDifferent images at different breakpoints
Different images for different pixel densitiesDifferent image formats
Art direction
![Page 24: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/24.jpg)
Image formats
![Page 25: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/25.jpg)
Strengths Weaknesses
GIFSmall graphics
AnimationsColors & alpha
PNGSmall, medium, large images
Alpha transparencyLarge-ish
JPGPhotos
Selective qualityLarge
Data URI Inline (no extra requests) Legacy IE
WEBP Small Chrome/Opera only :(
![Page 26: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/26.jpg)
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
Data URI
<style>li { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat left center;}</style>
![Page 27: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/27.jpg)
![Page 28: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/28.jpg)
Art direction use case
http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/
![Page 29: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/29.jpg)
Failed pathsWhat we’ve tried, what kinda works and what doesn’t.
![Page 30: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/30.jpg)
“I’ll just use
JavaScript!”— Everyone Ever
![Page 31: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/31.jpg)
<img alt="Pizza" src="pizza-mobile.jpg" data-desktop="pizza-desktop.jpg"/>
![Page 32: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/32.jpg)
<script>if($(window).width() > 960) { $('img').each(function(){ $(this).attr(
'src', $(this).data('desktop'));
});}</script>
![Page 33: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/33.jpg)
“Donezo.
I am so smart.”
— Javascript Wizards
![Page 34: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/34.jpg)
![Page 35: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/35.jpg)
WONK WONK.Double Download
� � �
![Page 36: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/36.jpg)
![Page 37: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/37.jpg)
16kb + 46kb = 62kb (Not ideal, but maybe okay)
![Page 38: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/38.jpg)
@56 Images: 896kb + 2.576MB = 3.472MB
![Page 39: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/39.jpg)
Other pathsspacer.gif
<base> ElementsServers and cookiesBackground-imagesNetwork Detection
![Page 40: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/40.jpg)
So, how?
![Page 41: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/41.jpg)
The Paravellian®Approach
Use CSS and Web Fonts whenever possibleUse SVG and Icon Fonts whenever applicable
Picturefill raster graphics
![Page 42: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/42.jpg)
CSS & Web Fonts
![Page 43: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/43.jpg)
![Page 44: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/44.jpg)
@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("[email protected]"); background-size: 400px 300px; }}
![Page 45: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/45.jpg)
SVG &Icon Fonts
![Page 46: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/46.jpg)
SVGScalable Vector GraphicsBasically illustrator files
![Page 47: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/47.jpg)
Ghostscript Tiger SVG: 67kb
![Page 48: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/48.jpg)
<object data="pizza.svg" type="image/svg+xml"> <img src="fallbackpizza.jpg" /></object>
![Page 49: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/49.jpg)
<img src="pizza.svg" alt="Pizza" />
![Page 50: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/50.jpg)
9+ 3.0+ 3.2+
Source: caniuse.com
SVG support
![Page 51: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/51.jpg)
Icon FontsTiny monochrome vector packs.
![Page 52: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/52.jpg)
abcd e fghija b c d e f g h i j
![Page 53: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/53.jpg)
![Page 54: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/54.jpg)
Source: caniuse.com
Icon font support
8+
![Page 55: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/55.jpg)
Quest for anative solution
#HOTDRAMA
![Page 56: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/56.jpg)
February 2012 - #WHATWG IRC
Hi! We need a solution for responsive images. We have some ideas and we’d like to help.
I don’t see what the big deal is, can’t you just use Javascript?
:(
Go form a community group.
... trots off to form community group
![Page 57: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/57.jpg)
May, 10th 2012 - WHATWG Email List
Great! I’ll approve it this instant. Thanks best friend ;)
Uhhhh... wut?
Apple’s thing is easier vis à vis better.
We made a thing. It’s called @srcset. We want it.
![Page 58: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/58.jpg)
Also, you need use cases, burden of proof of developer sentiment, and a bunch of stuff not required for Apple.
Also, community groups aren’t a real thing we consider. You should have been emailing the mailing list, ya dummy.
:(
End scene.
![Page 59: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/59.jpg)
@srcsetBased on the CSS4 image-set() value
Proposed by Apple® on May 10th, 2012
![Page 60: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/60.jpg)
<img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">
![Page 61: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/61.jpg)
StrengthsJust an attribute
Strong “2x” syntax
WeaknessesComma delimited values
Faux-media query microsyntaxNon-intuitive px-based “w” and “h” units
Browser determinationPolyfill causes the double download
![Page 62: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/62.jpg)
![Page 63: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/63.jpg)
<Picture>Proposed by the Responsive Images Community Group
on May 11th, 2012
![Page 64: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/64.jpg)
<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"> <img src="small-1.jpg" alt="Pizza"></picture>
![Page 65: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/65.jpg)
StrengthsAudio/Video element syntax
Media-query basedSupports non-pixel values
Supports art directionUses @srcset’s “2x” powers
Fallbacks for unsupported types
WeaknessesVerbose
“Hard to implement”*
* Citation needed
![Page 66: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/66.jpg)
Picturefillhttps://github.com/scottjehl/picturefill
Start using the picture element today!
![Page 67: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/67.jpg)
<div data-picture data-alt="A delicious pizza"> <div data-src="small.jpg"></div> <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript> <img src="external/imgs/small.jpg" alt="A delicious pizza"> </noscript></div>
![Page 68: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/68.jpg)
“Got any sweet
hacks, brahski?”
— Surfer dudes
![Page 69: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/69.jpg)
Server sideSencha.io Src
WordPress.com PhotonAdaptive Images
![Page 70: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/70.jpg)
<img src='http://src.sencha.io/http://sencha.com/files/u.jpg' alt='My smaller image'/>
![Page 71: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/71.jpg)
StrengthsOne image tag
Legacy sites
WeaknessesBlackbox
What if these services shut down?What if you switch platforms?
![Page 72: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/72.jpg)
1.5x HackFor Medium Importance images
![Page 73: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/73.jpg)
![Page 74: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/74.jpg)
StrengthsOne image
WeaknessesPenalizes small screen users
![Page 75: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/75.jpg)
CompressiveImages
The following is some black effin’ magic.Put on your robes and wizard hat...
![Page 76: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/76.jpg)
![Page 77: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/77.jpg)
![Page 78: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/78.jpg)
StrengthsOne image
WeaknessesMemory intensive, esp. on phones
Save as... pixelated
![Page 79: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/79.jpg)
Clown CarCrafted by Estelle Weyl
![Page 80: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/80.jpg)
<img src="pizza.svg" alt="Pizza" />
![Page 81: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/81.jpg)
<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>
![Page 82: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/82.jpg)
StrengthsSimple
WeaknessesCreate an SVG for every image
![Page 83: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/83.jpg)
Media query based image selection... sounds familiar...
![Page 84: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/84.jpg)
Media query based image selection... sounds familiar...
Picturefill
![Page 85: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/85.jpg)
Lots o’ optionsAbove all, use your brain and pick
what’s best for your project.
![Page 86: Dealing with Responsive Images with Dave Rupert @davatron5000 · kilobytes == average page 1,427 weight in April 2013. Up 143kb (11%) from January 2013](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff58486ce8bf420c622ab37/html5/thumbnails/86.jpg)
“!anks!”Dave Rupert
@davatron5000github.com/davatron5000