This week I have challenged myself to get up to speed with responsive images and Picturefill, a polyfill for the upcoming HTML5
picture element as well as two new attributes for the
img element. It wasn’t easy—there’s a surprising amount of reading and processing that needs to be done to understand the many problems and proposed solutions to responsive images on the web. Along the way I realized that I am not yet hugely interested in the art direction use case—which means I have focused more of my time on two less hyped
img element attributes,
sizes. Together these provide for most of what I am interested in: swapping source imagery at different resolutions.
Here are some of the articles I found most useful for getting up to speed:
- A brief history of the picture element.
- Responsive images in practice.
- Srcset and sizes.
- If you’re just changing resolutions, use srcset.
- The new srcset and sizes explained.
- To Picturefill or not to Picturefill.
- Don’t use picture (most of the time).
- A complete guide to the picture element.
One thing you may notice in a lot of these articles is a strong bias in favour of the
picture element. To me this sounds like way more trouble than its worth—at least for now.