responsive images in 10 minutes
DESCRIPTION
A 10 minute ripping yarn through the world of responsive images.TRANSCRIPT
![Page 1: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/1.jpg)
Responsive Imagesin 10 minutes
ResponsiveImages Responsi
veImages Resp
onsive
Images
![Page 2: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/2.jpg)
Screen Size.
Pixel Density. Image Focus.
Layout.
![Page 3: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/3.jpg)
Bonus: Art direction..
http://www.panmacmillan.com/
![Page 4: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/4.jpg)
Flipboard does Responsive really well..
http://engineering.flipboard.com/2014/03/web-layouts/
![Page 5: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/5.jpg)
What are the options?
● Don’t do anything*
● Use the srcset attribute
● Use the Picture element
● Use SVG (the Clown Car technique)
● Use Javascript
![Page 6: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/6.jpg)
Do nothing*
Link: http://fluidity.sexy/ Available for: Everything*Pros: Makes every default element ‘fluid’ by default. Mobile first?Cons: It’s still loading the same resources on any platform. Doesn’t really solve the underlying issue, but it’s a cheap hack.
img,canvas,iframe,video,svg { max-width:100%}.overflow-container { overflow-y:scroll; -webkit-overflow-scrolling:touch}
![Page 7: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/7.jpg)
srcset attribute
Useful links: http://longhandpixels.net/blog/2013/09/responsive-images-srcset Available for: Chrome desktop, Safari desktopPros: Graceful degradation to src attribute.Cons: Polyfill = loading 2 files, Doesn’t solve every problem.Polyfill: https://github.com/JimBobSquarePants/srcset-polyfill
![Page 8: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/8.jpg)
picture element
Useful links: http://html5hub.com/html5-picture-element/ Pros: More flexible than srcset, taps directly into media queriesCons: Spec isn’t final, so not production ready.Polyfill: https://github.com/scottjehl/picturefill
![Page 9: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/9.jpg)
SVG (the Clown Car technique)
http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/Available for: Chrome, Firefox, Safari, IE9+Pros: Widely supported, now. Gracefully degrades. Full media query support. Solves art direction issues.Cons: Fugly markup. Creation is really complex.
![Page 10: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/10.jpg)
JavascriptAvailable for: Everything*Pros: ● Works everywhere*. ● Effective if you use data-attributes, or polyfill-type approach. ● Allows you to combine art-direction data with image resources.
Cons: ● Needs an accessible fallback, which means loading more images. ● Doing things with Javascript is less efficient than having the browser do the
same task, and it’s also slower.● It can be render-blocking.● It can’t detect network quality.
![Page 11: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/11.jpg)
So, the future.
![Page 12: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/12.jpg)
Is the <picture> element.Media queries & multiple sources,
without messy syntax.
![Page 13: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/13.jpg)
But what about now?
![Page 14: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/14.jpg)
Use srcset + polyfillBut avoid making multiple requests.
(consider using it only for desktop resolutions)
![Page 15: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/15.jpg)
What about SVG?If we could make them easier to manage,
I’d say use them all the time.
![Page 16: Responsive images in 10 minutes](https://reader034.vdocuments.mx/reader034/viewer/2022042700/5555c7ead8b42aaf158b48dc/html5/thumbnails/16.jpg)
Responsive IconsIconic: SVG is really freakin’ cool.
https://useiconic.com/tour/