5. What are the options?
● Don’t do anything*
● Use the srcset attribute
● Use the Picture element
● Use SVG (the Clown Car technique)
● Use Javascript
6. 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
}
7. srcset attribute
Useful links: http://longhandpixels.net/blog/2013/09/responsive-images-srcset
Available for: Chrome desktop, Safari desktop
Pros: Graceful degradation to src attribute.
Cons: Polyfill = loading 2 files, Doesn’t solve every problem.
Polyfill: https://github.com/JimBobSquarePants/srcset-polyfill
8. picture element
Useful links: http://html5hub.com/html5-picture-element/
Pros: More flexible than srcset, taps directly into media queries
Cons: Spec isn’t final, so not production ready.
Polyfill: https://github.com/scottjehl/picturefill
9. 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.
10. Javascript
Available 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.