Responsive design is critical for a high-quality, well-designed site. Many layouts are fairly straightforward; there are decisions to be made, to be sure, but you can accomplish a lot by stacking things up in one long column, especially on informational sites.

But if you have complex images, such as diagrams, or even if you have photos, it’s a lot less clear what to do. Simply shrinking what you have down to a mobile device width might make it unintelligible.

What are some solutions to this problem?

Pan and zoom widget

You could write some Javascript that allows users to mobile devices to pan and zoom your content. The major advantage is that once the code is written, you don’t have to make any other changes. The implementation is perfectly uniform across your site, and easy to test. It’s also probably the appropriate solution for e.g. online stores, where visitors want to inspect your images in detail.

But I’m not sure users use these widgets.

Why? Users don’t even read on the web. And given that visitors are barely paying attention to your text, why would they take the time to notice, learn, and then use, a widget on your site? Especially since images are often meant to enhance the text, rather than containing the main message of it.

Compounding the problem is that there’s no standard widget for image pan and zoom (unlike say a dropdown or radio button). So a user will be learning from scratch on every single site they visit.

Different images for different screen sizes

This solution is the most respectful of varying screen sizes. For all the diagrams on your site, you provide a much simpler version that hits the important parts, and for all photos, you do some intelligent cropping so that the most relevant parts of the image (for what you’re illustrating) are always visible.

In some cases, this approach will dramatically increase the amount of time it takes to produce image assets. For photos, this might not be such a big deal.

For diagrams, though, you essentially have to produce two assets (the simple and the complex), whereas before you would only have had to produce one. The puts an additional burden on your graphic design team, as well as on all the people requesting the images. “What are the most salient points of this diagram, so we can convert those into a simplifed version of what we already have?” Not to mention that in some cases this might not be possible.

Technical implementation is also not straightforward. David Walsh does a fantastic job of going through all the options here. There are many to choose from. I’m not covering responsive data tables in this article, but some of the approaches there are also helpful; CSS-tricks has a great roundup of those.

Changing your approach to images

One question to consider is whether the image actually adds anything. If it doesn’t, conisider hiding it for small screen sizes (though ideally you probably should omit images altogether, if they don’t add anything). As Jakob Nielsen points out,

Users pay close attention to photos and other images that contain relevant information but ignore fluffy pictures used to “jazz up” Web pages.

So, simply reducing the amount of imagery on your site might be one approach, which makes producing targeted assets more practical.

Another idea might be to make your diagrams more vertically-oriented for all cases. This isn’t as nice for laptop and desktop displays, but looks much better on mobile.

If the images are truly valuable and also truly massive, you could also implement one of the simple approaches above, but offer to email the asset to the visitor or get it to them on some other channel that’s convenient for full-screen viewing. This could be a helpful way of collecting email addresses, too.