Skip to content
UX Atlas
UI foundationCraft conventionIntermediate

Imagery

Images either carry information or they do not, and the ones that do not are costing you load time.

Definition

Imagery covers photography, illustration and other visual media. The first question for any image is whether it informs, and the second is what it costs in bytes, layout stability and accessibility obligation.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Images that earn their place
  3. Technical requirements
  4. In practice
  5. Sources
  6. Continue from here

Images that earn their place

  • Product photography, where the user is deciding whether to buy and needs to see the thing.
  • Screenshots and demonstrations, which show what the product does faster than prose.
  • Diagrams that make a relationship visible.
  • Portraits of real people in testimonials, where identity is part of the evidence.
  • Illustration that carries a concept the copy cannot, rather than filling space.

Technical requirements

ConcernRequirement
Layout stabilitySet width and height, or aspect-ratio, so the space is reserved. Unreserved images are the main cause of CLS.
FormatAVIF or WebP with a fallback. SVG for diagrams and logos.
Responsive deliverysrcset and sizes so devices download appropriate resolutions.
LoadingEager with fetchpriority high for the largest above-the-fold image; lazy for everything below.
Alt textDescriptive for informative images, empty alt for decorative ones. Never omit the attribute.
Dark modeProvide variants for images with baked-in light backgrounds.

In practice

Stock photography of nobody in particular

Marketing

Generic images of people at laptops carry no information and cost load time and layout stability. Removing them usually improves the page. A screenshot of the actual product almost always outperforms them.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

An Ecommerce Experience

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.