Responsive Images (in 10 minutes)
Introduction
What’s the correct approach to the responsive images conundrum? Is it the fabled <picture> element? What about srcset? How about just doing it with Javascript, or does the solution lie somewhere else entirely?
In this presentation we looked at all of these, their limitations and their strengths, and examined which of these can actually be used today.
Summary
- Javascript-based solutions give us the best cross-browser support.
- SVG and the ‘Clown Car’ technique gives us the most complete feature set for todays’ browsers, works in practically all browsers, but it’s difficult to generate and manage those files.
- srcset is available in the latest version of Chrome, but it doesn’t cover all of the possible ‘responsive image’ definitions.
- The Picture element is touted as the future, but the spec is not settled and no browsers implement it yet.
All of these techniques have their benefits, and there’s decent polyfill libraries available for them, so a lot of the choices come down to evaluating the manageability of the solution and the importance of the element.