Choosing images for responsive websites

The subject of recent discussion within the WSA office, we decided some that a few simple guidelines for the whole internet couldn’t hurt.

The thing about responsive web design is that never looks the same. It can’t be looked at in the same way as a poster for example, because a responsive website does not have fixed dimensions. You can’t stretch or shrink a poster, but you can do both to a responsive website. Naturally there’s a big impact on the images that are selected because suddenly you’re having to think not about size, but about the different context and orientation in which users will be viewing your site.

How to tackle it:

Quality reigns supreme.

You might get away with a low resolution image on small screens, or certain window sizes, however when your user is viewing on a desktop widescreen it’s a different matter. You’re gonna need more pixels! You should be aiming for the thousands in terms of pixels. The more the better. Whenever we get a Dropbox invite with a few GB worth of images to download, we know that we’re in business! In terms of a format, JPG, GIF and PNG are all suitable for the web.

We put together a guide to image files and quality last year. It mainly includes guidance for print but gives some good info on quality and settings if you want to do a bit of extra reading: WSA Guide to Supply Images

Don’t look at the edges.

Escaping the idea of your images having set edges will help make the design process simpler. Why should you do that? Trying to fit the edges of a fixed image to the edges of a flexible website just doesn’t work in a smooth fashion. It laughs in the face of geometry. If, like me, you had a 6’5″ maths teacher, you’d know not to do that.

Think inside the box.

That’s right. We went there. When you’re looking at an image, think about the theme and study the main subject of the image. If it’s centrally positioned and not too large, you’ve got lots of scope to crop the image without destroying the important details. Close ups are harder to work with and it’s likely some detail will be lost when the screen sizes vary. A different approach is using imagery that has many subjects, or works as a collective. Shots including the environment, landscapes, textures, collections of items and groups of people can be very effective for this purpose.

Back to quality. Definitely make sure they’re quality.

There are more reasons for this than people with big screens. Designers can do a lot more with a high quality image and more options result in better creative outcomes. Flexibility to crop and extract parts from images can be helpful in putting emphasis on the themes that your site will address.

Don’t force or rush it.

Savvy web users can easily detect images that belong and those that have been casually dropped into a design. It’s worth planning ahead to get the images either from an image library or a photographer.

So. No crazy science. No magic formula. All you need to do is shift into a responsive mindset and think about images in a flexible way rather than how we’re used to looking at pictures. If you’ve got technical questions about image quality or want feedback on any images you’re considering – get in touch and our friendly designers will be able to give you more pointers.