I searched for an option that would give us the best of both worlds—the mythical unicorn of responsive photography on the web. In this article I’ll quickly go through the different technical methods I’ve tried. I also discovered something very unexpected on the way… Want to know more? Come along with me and find out.

Just interested in the solution? Go on ahead and scroll to the end—I won’t hold it against you. 😁

The impossible choice

We’ve all seen websites with chopped off heads, half hidden products or images so large they push the content out of view. We can avoid that with proper art direction. First get some good crops, then add a responsive point of interest on top of that. Sounds simple enough, but there are downsides. The biggest of which is the reason you’re actually seeing this issue more often, rather than less—accessibility.

Whenever we use an image, we have to choose between two options; a regular image, or a background image. To support art direction, we need to use a background image; this enables different crops and points of interest, but requires inaccessible markup. To make it accessible, we need to use a plain image; but these can only be cropped, not art directed. We’re caught between a rock and a hard place.

And before you mention it; yes, we can apply art direction on an image via `object-fit` —but only for a single breakpoint. That usually makes things worse on all the others!