Skip to content
UX Atlas
Plate FND·051 · UI foundationGrid D2 · Rev. 2026-08-14

Imagery

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

UI foundationCraft conventionIntermediate

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 plate
  1. 1Definition
  2. 2Images that earn their place
  3. 3Technical requirements
  4. 4Images that earn their bytes
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Deciding whether a page needs an image.
  • Optimising Core Web Vitals.
  • Writing alt text.
  • A page's weight or layout stability is dominated by its images.

Common mistakes

  • Images without reserved dimensions.
  • Lazy loading the hero image, which delays LCP.
  • Alt text that repeats an adjacent caption.

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.

Images that earn their bytes

Do

  • Serve modern formats with a fallback, and size the file to the slot it fills.
  • Give every image explicit dimensions or an aspect ratio, so nothing shifts on load.
  • Write alt text that carries the information the image carries, and nothing more.
  • Mark decorative images as decorative rather than describing them.

Do not

  • Ship a 2400 pixel hero to a 390 pixel phone.
  • Use stock photography of nobody in particular to fill space.
  • Put essential text inside an image, where it cannot be selected, translated or resized.
  • Lazy load the image at the top of the page, which delays the thing the reader came for.

In practice

  1. i.

    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.

  2. ii.

    Text baked into a picture

    What it costs

    A pricing table shipped as an image could not be translated, searched, selected, read aloud or zoomed without blurring. Every one of those was a requirement somewhere, and none of them was visible in the design review.

Local chart

FND·051 · Region II · Grid D2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

AvatarCMP·024 · APPLIED THROUGHCarouselCMP·027 · APPLIED THROUGHLoading StatesPAT·011 · APPLIED THROUGHSkeleton ScreensPAT·012 · APPLIED THROUGHBanner BlindnessPSY·003 · PRINCIPLES BEHIND THISAlt TextTERM·080 · SHORT DEFINITIONCore Web VitalsTERM·123 · SHORT DEFINITIONCumulative Layout ShiftTERM·124 · SHORT DEFINITIONLargest Contentful PaintTERM·125 · SHORT DEFINITIONLazy LoadingTERM·128 · SHORT DEFINITIONAlt TextA11Y·007 · RELATED CONCEPTDark ModeFND·027 · RELATED CONCEPT

Sources

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

  1. [1]

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.