Everyone loves a responsive website these days, and with good reason. Insert derivative statement on the importance of device compatibility here, if you’re reading this article, then chances are good you’re already in the choir. And chances are you’ve found yourself in a pickle or two when dealing with images, trying to find that magic size that makes sense in every iteration. In my experience, there is no silver bullet for a responsive image. We have to be creative.

Let’s assume that you’re doing a mobile-first build, using media queries to set your breakpoints as minimum width values. Let’s assume that you’re using Bootstrap or a similar schema, where 768px remains the magical width that separates the big screens from the palm sizes. So as the device sizes up from 767 to 768, the universal rules for mobile only sizes can be put to bed as the bigboy only sizes are rolled out and override them.

This “handover” is a good intuitive spot that we will be using. First, let’s look at the problem through a typical example:

And we’re off with a decent answer for an image that will work at different sizes in a page. At the smaller mobile sizes, it will scale down well enough, and once you’re clearly in desktop / large screen territory, it falls in line with content at half of the available content width (the example’s would be 480px, or 50% of 960px). But you may get a note back like:

“We’re using a shot of two people posing at a conference. Looks great on my tablet and my desktop but the image is too tiny on mobile. Can we get a mobile size that frames the shot better?”

In the medium to large sizes, the image is doing well and serving its purpose, but the ratio of width to height is not working at a smaller size. The image this user is reporting appears to be 400x179px, and the scaling has the peeps looking super small. We definitely don’t want to start playing around with multiple images, each separate file is another call to the server, and while there is tech out there to solve this problem, we need something working in 20 minutes, no time for rabbit holes.

What we want is a single file to be used across all sizes that looks great everywhere. Here’s a CSS-only solution with plenty of time to run out for coffee:

Here’s what all this means: For starters, we are wrapping our image in a div and using our controller class for that object, the image is initially hidden with display:none. We give div.flexi an initial height of 220px, increase the height at 480px for our larger mobile sizes, this creates the canvas that we can stretch the image across via background settings. The background-size setting makes sure that the image will scale to cover the space completely, the height of div.flexi becomes the height of the presented image.

At our tablet crossover, we remove the inline background image via CSS and remove the height with an auto setting, pop the physical image back into place via display:block. So for a user on a standard smartphone, they see an image that’s 400x220px, a much better ratio of width to height for the screen size. I’ve also had luck with using an even larger height for the initial, 300~400px, this can be handy for portraiture / featured image for team member page, etc.

There you have it! A fast solution using a single file and a few lines of CSS, just a matter of understanding the concept behind the swap. Sizes are for example only, different things may need tweaks in your recipe, just be careful not to make your source image too small — pixel distortion when you start scaling images past their native 100% can be pretty unforgiving (I reco 1200px min for any image that you need to be full browser width). Cheers!