The Challenge of Responsive Images

Images are one of the most important elements on a web page in terms of user experience. Few objects on a page have the same impact on everything from emotional responses to bounce rates.

When users are viewing your site on mobile devices, small screens, or in other unusual situations the images can distort the page and ruin your careful site design. That’s why responsive design is being developed.

The Challenge Of Images In Responsive (& Mobile) Design

Responsive design has the web industry talking. Rightly so – it’s the most important development in web design for years. For the first time, devices of all shapes and sizes will have the opportunity to experience a beautiful and feature rich Internet. For those not in the loop, responsive design builds sites to adapt to the display area (browser window) available to them. Whilst this is a great opportunity to make the Internet better, that’s not to say the advantages are without challenges. One of the most interesting being the handling of images. Let’s examine some basic techniques along with the problems they pose.

A Simple Fit

Seting the images so their width can never be greater than their container element is one of the easier ways to allow images to adjust to the page size automatically. As the column they are contained in shrinks, for example, the would simply scale down to match. You can even include videos and other objects the same way.

img, object {
    max-width: 100%;
}

This looks great if you’re using a modern browser on Linux or a Mac. If you’re on an old version of Windows or an out of date browser you’ll see some problems including the image not scaling and looking absolutely awful as the browser window shrinks. This isn’t a huge issue. Responsive design isn’t a solution aimed at people with perfectly big screens making their window really small for no apparent reason (although it should ideally solve that problem naturally) and this solution will appear fine on modern browsers and mobile devices.

If you want to read more about solving this scaling issue there’s another great post about it here: Fluid Images.

It’s Too Big!

The other problem with the above solution is that image file sizes are simply too big for mobile devices on mobile data connections. A 1,500 pixel wide image might look great on a wide monitor, but the file’s grossly over-sized for a user on a mid-speed 3G connection trying to view your site from a train. Remember, this solution only solves the problem of the image appearance, not file size.

There are still no elegant solutions for beginners, however Smashing Magazine does carry a post with some useful tools and tips to achieve some better load times by loading the correct image for the device size. It’s worth noting that even this solution results in both files being downloaded on certain older browsers so while the appearance degrades nicely it wouldn’t be an ideal long term solution to this issue.

Taller Images Dominate The Feature Image

Imagine the layout on the left (1) with one large image clearly dominating the other two. As we shrink our display area, designers have chosen to move to a one column layout (2) and ensure the images are set to never go beyond 100% of the column width resulting in the layout on the right.

You can see that the lower images have doubled in relative size on the mobile screen, but our main image has become an extremely thin letterbox atop the two now dominant images. This clearly isn’t the intention of the design.

Dave Rupert has a really nice solution to this phenomenon:

.banner-item {
 overflow: hidden;
 min-height: 300px; /* 300px is arbitrary. */
}
.banner-item img {
 width: 100%;
}

By fixing the height of the header image and allowing it to overflow we ensure the image ranking is maintained. As we see in the simple picture for narrow screens, image height determines this instead of width.

Think Responsive And Look Forward To Developments To Come

The most important thing about responsive design is that we keep thinking and looking forward to a time when users on all devices can enjoy a beautiful web. As problems such as those examined here present themselves, web technologies and development tools will advance to fill those gaps. In the mean time we’ll cover some useful issues and provide some interesting additional reading for advanced users looking to tackle these issues in their designs.