Responsive web design: How to choose the right photos for different formats

For you as a web designer, mobile internet is a challenge. Websites must look good on different sized displays with different aspect ratios. Your tasks include the selection of suitable photos for responsive web design.

These must work as well as possible on all devices and in all resolutions. Our article today should therefore focus on the topic, as you select the most suitable photos for responsive web design.

Details – if less is more

On classic desktop computers or notebooks, photos can be displayed in decent resolution. This means that even detailed photos can be captured well by the eye. On tablets or even smartphones, these photos often have to be reduced in size. Here details can be lost or so small that they are barely recognizable. If these are insignificant image details, that’s no problem. However, if the details are important to the image statement, you should always make sure that such details are visible even on small resolutions.

display

320 pixels are the standard width for smartphones in portrait mode. If the maximum image width within a responsive web design is defined so that images are always displayed with maximum screen resolution, you can use the 320 pixels as a guideline and thus test in advance whether a photo is in this resolution still works.

As an example, let’s take a typical business photo of a team meeting. The following photos we took from the Stock Photo Bigstock represent such a situation. While both photos work well in large resolutions, small pictures quickly show that the photo is far less effective with the eight people. The persons are too small and the facial expressions hardly recognizable.

Make sure that faces are always so big that facial expressions are still clearly visible. Also, you should make sure that the people and especially the heads make up a large part of the picture.


bigstock_responsiv_team
Photos with classic team meetings

Choose the right photo from a series

Often one tends to convey as much content as possible, or message, in a photo. Here you should always weigh what is necessary and what is dispensable. It helps to compare several similar photos. Photo-sharing platforms, like Bigstock, usually offer a variety of similar images to each photo. Often they come from a photo session. That is, there are several photos of a scenery available.


bigstock_responsiv_praesentaion
Photos of a series with different topics

Our example above shows two photos of a presentation. Even if the first photo describes the presentation in a much more concrete way, the second photo quickly shows what is displayed. By omitting details such as the flipchart, the table and the three seated persons, the presenter moves into the center. Especially on small displays, the person looks significantly more present.


bigstock_responsiv_aehnliche
Photo with further suggestions from the same photo series

Of course, it must always be decided in a qualified way which details can be omitted. If the focus is not on the presenter, but on the audience, of course, the view of the audience must not be omitted.

Photos with focus

Instead of basically looking for photos that are not too detailed and that only focus on what’s important, you can also take a different approach. Search for photos that have a clear focus on content.

The following example shows four situations with people on the phone. The environment of these persons is secondary. The photos also work if the environment is omitted.


bigstock_responsiv_telefon
Photos with a concrete focus on content

In classic desktop design, the photos and their surroundings are great to use. For smaller resolutions, where the person should be more in the center, it makes sense to hide the environment, as I have prepared in the following view.


bigstock_responsiv_telefon_fokus
Photos reduced to their focus

JavaScript frameworks such as Focal Point make it possible to define a focus on content. For smaller images, the photo will be cropped to that center of gravity. The dispensable environment falls away. Of course, you also have to make sure that the intended meaning of the image is still preserved by omitting image content. If, for example, a situation in an office is to be represented explicitly, the environment plays a major role in the fourth example photo.

Portrait or Landscape: Important for format-filling photos

This question should you ask yourself when choosing suitable photos: I prefer portrait or landscape format?

All in all, this question can not be answered. While desktop monitors and notebooks are always used in landscape format and tablets are usually used in landscape format, the portrait format is more common in smartphones. But since the device orientation is quite individual, we can not make a general statement.

If we assume that the responsive web design on smartphones, the width of the images is always based on the width of the display, we get in larger images always larger representations. This is an advantage when photos are placed at the center of the design. While portrait photos in portrait mode can fill a large part of the display, landscape mode makes them larger than the display and thus not completely visible.

Here you have to weigh what is more important to you. Bigstock’s search, for example, allows you to output only portrait or landscape photos. So you can already specify the format during the search.


bigstock_responsiv_stadt_querformat
Querformatige Fotos only: Search result (Screenshot: Bigstock)

If you are looking for photos for a full-frame background, you should always set to landscape formats. Because, apart from the smartphone, the landscape format is the more common device orientation or browser size. However, you should take into account that on smartphones much of the image background will be cut off.


bigstock_responsiv_hintergrund
Good suitable photos for backgrounds

The above example shows two suitable photos for format-filling backgrounds, which also work responsively. They refrain from details and specific contents.


bigstock_responsiv_hintergrund_fokus
Background shown in portrait mode

Even on smartphones in portrait format, they do not lose their effect, although about half of the picture will be lost due to the different aspect ratios.

Consider high-resolution displays

As a last important point in choosing perfect photos for responsive websites, you should consider the resolution of the photos. Stock providers, like Bigstock, always provide photos in different resolutions. Even the smallest resolution is sufficient for many purposes – especially when it comes to web design. However, you should consider that there are increasingly displays and desktop monitors with high pixel density. These can display photos twice as sharp as ordinary displays.


bigstock_responsiv_aufloesungen

Photos in different resolutions available (Screenshot: Bigstock)

Especially on these displays, photos that are not available in high pixel density, extremely blurred. Therefore, you should always have photos ready in sufficient resolution. Even on smartphones, the width of an image should not be less than 640 pixels in order to be able to display it in full width in portrait mode. Thanks to HTML5 and the possibilities of ““Element and the” srcset “attribute allow for all possible resolutions and pixel densities.

Note: Our examples also work with other photo providers, such as our top 50 free photo services. But if you feel like trying Bigstock for yourself, you could book a free trial here.

A non-binding visit to Bigstock helps to gain a qualified impression.

Clarification: This post was sponsored by Bigstock, but this only had an impact insofar as we used only image examples from this platform. An influence in other, especially contentwise way did not take place.