If used well, images can engage and persuade users, guide them to main points, illustrate concepts, reduce complexity, and show patterns in data. Follow our good practices to ensure your images are relevant and accessible to all users.
There are two groups of people you need to consider when using or creating images in digital content: those who can see them and those who can't.
It may seem obvious that you'll need to provide the information in an alternative format for people who can't see your visuals—those who are blind or visually impaired.
But even sighted users will benefit from properly designed graphics. You’ll want to pay attention to:
- Purpose of image
- Color and contrast
- Size and resolution
- Complexity of the image
Dos and Don'ts
Use Images with Purpose
Eye tracking studies conducted by the Nielsen Norman Group have found that website users pay close attention to images that contain relevant information but ignore purely decorative ones.
Use images to point out the obvious, such as a photo of a person looking or pointing toward what you want to point out.
Use images to illustrate concepts that require dense text to explain, such as the size of a credit card reader and how to swipe a card.
Use images or graphics such as charts and graphs to illuminate complex concepts, show patterns or trends, or help make sense of complex information.
Use meaningful instructional images to provide multiple means of representation, as specified by experts in universal design for learning.
Use images to provide a visual break where you have a lot of text-heavy content, which can help manage cognitive load for sighted users.
Use photos of real people to engage and persuade.
Don't use images just to fill a page.
Don't use images when text or a simple data table can explain a concept more efficiently.
Don't use stock photos of generic people.
Don't use images in place of headings and other blocks of styled text.
Optimize Image Size and Resolution
Printed graphics are comprised of thousands of tiny dots of ink, which is why print resolution is typically given in dots per inch (DPI). In digital environments, the “dots” are units of light called pixels, and the size of an image is given in pixels per inch (PPI).
However, the perceived quality of digital images (how sharp or “fuzzy” the image appears) is affected by both pixel dimensions and the resolution of the screen—that is, how many pixels per inch the user’s monitor will display.
The number of pixels also has a direct relationship to the size of the graphic file in megabytes or kilobytes, which affects how long a graphic takes to load in a browser or digital documents, so you want to prepare your graphics to be as small (file size-wise) as possible while also being as sharp and crisp as possible.
Use photo-editing software like Photoshop or GIMP to prepare your graphics for digital display.
Save the image in a format for digital display and at a size that is less than 1 MB.
Use 72ppi resolution for digital images at actual image size or smaller.
Don't reuse a small image, such as one you found on the web, at larger sizes or it may appear fuzzy.
Don't upload a photo directly from your cellphone or camera, or it may be so large that it slows down the loading of the page.
Provide Just Enough Detail in an Image
Use an image to reduce the complexity of text, and make it as simple as you can without sacrificing meaning.
Include details that will help users understand the goal of the graphic.
Include a title that makes clear the conclusion users should draw from the image.
Label all parameters in charts and graphs.
Don't include superfluous details in images.
Don't forget to include context, such as a title and labels in charts and graphs.