Images are a 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.

In This Article:

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.

In this example from Chicago Ideas, on the desktop (left), the image of the speaker, Bassem Youssef, was only slightly obscured by the headline. On a mobile device (right), the headline completely covered the image, making it meaningless and decreasing the legibility of the 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.

The image on Fifth Third Bank’s desktop site (left) makes little sense when cropped to fit a mobile screen (right).
The large image of Sydney, Australia at the top of Sydney.com (left) shrank to fit the width of a mobile screen (right). Although the subject of the image was still obvious, the picture had a different impact and clarity than on a large screen.

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.

The Field Museum’s desktop layout (left) involved a grid with cells that contained an image followed by the associated text. On mobile (right), the grid was translated into a single-column layout, with images and text stacked one after another. This design made it hard to quickly understand which image was associated with which text, and caused extra scrolling.

 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. 
On Avaya’s desktop site (left), line drawings accompanied information about different solutions the company offered, providing an easy overview of the 4 options. These drawings were stacked vertically on the mobile site (right), making it impossible to see all the options in one view. The drawings didn’t add significantly to the content of the page and caused more scrolling on mobile.

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. 

LogMeIn.com: The desktop version (left) used background images, but the mobile page (right) switched to a solid-blue background color.  (Note that the mobile design suffers from the illusion of completeness, which could have been fixed by eliminating some of the empty space at the bottom of the page.)
Children’s Hospital of Philadelphia used a full-screen image for desktop (right), but removed it on smaller screens (right).
Sylvan’s desktop view (left) included images for each carousel element. The mobile view (right) changed the carousel to a set of accordions (one for each carousel item) and kept only some of the images. If each section had included an image above the text, the page would have required more scrolling.

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.)

The Fifth Third Bank site used larger drawings in circles in the desktop view (left), with the text labels appearing beneath the images. On mobile (right), the drawings shrank, the circle disappeared, and the text appeared next to the image. 
On Expensify’s site, little space was dedicated to accompanying drawings in both desktop (left) and mobile (right) views. Placing the small images next to the text saved space in both designs, while adding visual interest.

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.

BMOHarris used full-width images with text layered on top for desktop (left), but on mobile (right), cropped the image to include only the most meaningful detail and moved the text below the image. The text formatting was optimized for mobile by increasing color contrast, eliminating a line of text, and clearly indicating tappability for the link Special offers available.

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.

FitStar’s site used the same image on desktop (left) and mobile (right), but cropped the image differently and moved the associated text from the left of the the focal point of the image on desktop to above the image on mobile. 

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.

Learn more in our day-long course on designing for different screen sizes.