25 May Using Adaptive Imaging Correctly
I found this article on adaptive imaging on NNGroup.com really helpful as pictures large part of most websites. They may be hero images stretching across the page, icons or drawings representing offerings, or pictures accompanying news stories or products.
When a site needs to work on several different devices, many designers simply resize each image in the large screen design to make it fit smaller screens. However, images that work well on large screens do not always translate well to small screens. They may not retain their meaning at a smaller scale, they may be cropped inappropriately, or they may cause unneeded scrolling. (Conversely, images that work well on small screens may not work well for large screens.)
Images need special attention when a design must work across multiple screen sizes. Below are three common issues associated with scaling images for small screen devices and three possible solutions.
Common Problem 1: Clarity of Image and Legibility of Overlay Text
Many sites embed text within images or place it over images. Text over an image is tricky on any screen size: The color contrast between text and image can make the words hard to read and the picture difficult to see.
Reduced screen size means less space for both the image and the text. If the text is contained within the image, the negative impact of embedding text within images is magnified on a small screen: the text shrinks as the image shrinks.
Even if the text is not part of the image, the transition from a large screen to a small screen can be problematic: Text wraps differently to fit the smaller viewport. Images shrink, and may also be cropped or scaled, to fit the smaller screen. Each of these changes impacts the legibility and clarity of both the image and the text, as well as their relationship to each other.
For example, even though words may be carefully placed in a dark or relatively empty area of a desktop image, when that image is resized for a small screen, the text can move to a different region of the picture. The result will be an obscured image and illegible text.
Common Problem 2: Poor Cropping or Scaling
Desktops are used in a landscape orientation, while mobile devices are typically used in portrait orientation. As a result, the same image won’t work across devices without some careful planning and thought. Poor cropping can change or obscure the meaning of an image, and shrinking an image may make it indecipherable at the new smaller size.
Common Problem 3: Excessive and Unnecessary Scrolling
Images make mobile pages longer. When placed at the top of pages, they may push content down below the fold and cause frustration, especially if they don’t add much value in the context of the user’s current task.
A common design pattern involves a grid of image-plus-text elements, with each cell containing a picture and a short text paragraph directly below it. (This pattern differs from list items, such as news headlines or product listings, where images often appear next to the text, rather than above it.)
On a small screen, the grid cells will often end up stacked vertically, with images separated by the associated text.
A few things happen when images and associated text stack on small screens:
- Spatial grouping may be damaged. It can be difficult to determine with which text block an image belongs — the one above or the one below. Visual design can alleviate this problem, by adjusting the leading to place the image closer to the associated text than to other unrelated paragraphs. However, on a mobile screen’s limited viewport, such spacing variations may not be visible within a single screen: If users see only a single image and some text, they will not pick up on visual-grouping cues.
- More scrolling will be needed to get to the content of interest. The image becomes an obstacle to scroll past, particularly if it does not contribute significantly to understanding the page content. The extra scrolling increases interaction cost, and may also add to the working-memory load when people must compare items stacked in a single column, because less content will be visible on the page at a time. People will have to remember the information above or below their current view.
Solution 1: Remove Images
This is not to say that small screen designs should not have images; rather, they should have meaningful images. With any image, consider its information value: how much information it adds to the page. If the value is high, keep the image. If an information-carrying image is too big for a mobile design, appropriate scaling, cropping and placement can make it suitable for a small screen. But if the image does not add value, removing it can result in a better experience.
The image is a good candidate for removal in the mobile view if it:
- is unclear at a smaller size
- cannot be cropped to the right dimensions while retaining meaning
- is being obscured by the accompanying text
- is increasing the amount of scrolling on the page, or
- does not add significantly to an understanding of page content
(If the image does not add to an understanding of content, consider removing it from the desktop view as well.) As a bonus, removing an image can also decrease the page-load time.
If an image is meaningful, if it adds to the understanding of the content on the page, if it has a clear purpose and use for the user, then it may be preferable to resize or move the image, as discussed below.
Solution 2: Resize or Crop the Image
Images in mobile designs must fit screen dimensions while retaining clarity. Large images may need to be cropped to focus on a single most meaningful detail. The orientation of an image may change from landscape to portrait to fit the screen.
Small images such as line drawings and icons may already translate well to smaller screens. However, including these images at their original size might cause excess scrolling on small screens, particularly if they appear in a vertical stack on the page. Consider if the images can be resized and placed inline or next to accompanying text rather than between text blocks. (This strategy will not work well for most photographs, though.)
Experimentation may be needed to find the best combination of (a) resizing and (b) cropping to generate the optimal image for the available size. See, for example, the 4 iterations that we tried for a photo representing a k-pop group in a mobile view.
Solution 3: Edit or Move the Text Associated with an Image
Sometimes, editing an image will not be enough: you may need to also change the text associated with it. Shorter text will be easier to place over, next to, or near an image, while also minimizing scrolling.
Text that is placed over an image will likely need to be positioned differently on large and small screens. Usually such text appears on secondary areas of the picture, but these areas may be cropped out on smaller screens. As a result, the text will need to move and appear below or next to the image rather than on top of it. The image cropping and resizing and the shuffling of text go hand in hand to create a usable design on a smaller screen.
Plan Well for Effective Images Across Screen Sizes
When translating larger screen designs into smaller ones, ask yourself: Is the image meaningful for users? If not, remove it. If yes, carefully edit the image used on the larger screen so that you preserve meaning, prevent excessive scrolling, and avoid overly slow pages on a smaller screen. In the end, being critical of images and their use on small screens may result in high-quality and high-impact images on large screens as well.