Boiling the Ocean with Markup

While at imgix, I spent a lot of time thinking about responsive images. It’s a very interesting problem that pays big dividends when solved correctly. By serving up the correctly sized images, you’re able to send less data across the wire to the client, resulting in a faster experience.

The problem is that there’s plenty of different ways to change the resolution of an image for the client using JavaScript, CSS, and/or HTML. But there’s only one way that I’ve found that might be the closest to right-in-most-cases, and it’s a bit unintuitive. I cheekily refer to it as the boiling the ocean with markup approach.

This approach uses generated srcset values to give a bucket of potential images to the browser, and then lets the browser choose which one to serve. (For a primer on srcset and sizes, read the definitive post by Eric Portis.)

Even this right-in-most-cases-approach is difficult to implement correctly. I believe the agreed upon nomenclature is “terrible”:

Leave a Comment