A Field Guide to Website Media Patterns

The strongest media choice begins with what the visitor should understand, not which component looks most impressive. A visual can establish context, compare options, reveal a sequence, explain a decision, or provide evidence. Name that role before choosing the layout.

Review the collection before composing the page

Audit subject, orientation, crop, quality, visual density, and narrative role. Remove near-duplicates unless comparison is intentional. A smaller set of distinct images usually communicates more than a large collection of similar views.

• Use a feature image when one visual should establish the main atmosphere or outcome.
• Use a grid when visitors benefit from comparing several items together.
• Use a carousel when order creates meaning and later items are optional discoveries.
• Use paired media when one image needs focused explanation.

Build the sequence deliberately

Move from context to detail, process, evidence, and outcome according to the page’s argument. Captions should explain why each visual matters rather than simply naming what appears in it. Essential information should remain available without requiring carousel interaction.

1. Define the visitor question and the role of the media.
2. Select only assets that contribute new information.
3. Write captions, alternative text, and credits as part of the editorial process.
4. Review order, crop, controls, and loading behavior on mobile.

Protect accessibility and performance

Provide meaningful alternative text, keyboard-accessible controls, readable captions, and pause controls for motion. Use responsive sizes, efficient formats, appropriate compression, and explicit dimensions. The best pattern makes meaning, evidence, and action easier to understand without adding unnecessary weight.