2026-09-12 · 7 min · By Alcott Dube
Web imagery art direction: how to choose meaningful images
I choose website imagery by its purpose, then test whether the crop, placement and alternative text preserve that purpose on small screens.
I choose meaningful website imagery by deciding what each image must explain, prove or make recognisable before judging its style. I then test the crop at different screen sizes, write alternative text for its purpose in context, and remove images that add only weight.
How to decide what a website image should communicate
I start with the sentence beside the image, not an image library. What does that sentence ask someone to believe? For a furniture product page, a close photograph of a joint can support a claim about construction. A room photograph can establish scale. Neither substitutes for the other, even if both look right in the layout. Choosing between them is an editorial decision before it becomes a visual one.
My first pass gives every proposed image one main job: explain something, provide evidence, establish recognition or set a mood. Those jobs need different standards. A photograph offered as evidence must show the relevant detail honestly. An abstract composition can establish tone, but it cannot prove that a service is reliable. I don't let an attractive image quietly stand in for missing information.
I also test the empty space. If removing an image leaves the page equally clear and credible, I ask whether its atmosphere justifies the download and attention it consumes. Sometimes it does. An editorial opening can benefit from a pause. But a generic photograph beside straightforward instructions usually creates another thing to scroll past.
How to write a web imagery art direction brief
I write a short brief before selecting or commissioning anything. It names the subject, the detail that must remain visible, the intended setting and the treatments to avoid. For a hypothetical repair service, that might mean tools showing ordinary wear, a clearly visible replacement part and neutral lighting. I'd reject polished workshop scenes if they implied facilities or equipment the business didn't have.
Then I define a small visual system. I specify camera distance, lighting, background treatment and how much surrounding space the composition needs. Three purposeful constraints are more useful than twelve adjectives such as premium or authentic. For an illustrated service page, I might choose flat shapes, one accent colour and no decorative shadows. Those decisions give a second contributor something they can actually reproduce.
I keep examples of acceptable variation alongside the rules. A detailed product photograph and a wider contextual photograph can belong together without sharing the same framing. Consistency should help someone understand the collection, not force every subject into an identical box. I also check usage rights, attribution requirements and permission to modify an asset before spending time adapting it.
How to crop website images for mobile without losing meaning
I choose the important content before choosing the container ratio. A focal point alone isn't enough: a photograph of a hand operating a control needs both the hand and the control. If the mobile crop preserves one but removes the other, the subject survives while the explanation disappears. I mark the whole area that carries meaning, including any surrounding context needed to interpret it.
I preview candidates in the actual placements. For an initial check, I might use a 1440-pixel desktop viewport and a 390-pixel mobile viewport, then drag between them to catch awkward transitions. These are starting points, not universal test dimensions. A wide banner can become an almost square block on a phone. I check whether that change removes evidence, creates an odd visual emphasis or leaves text over a busy area.
Smashing Magazine's guide to responsive images distinguishes resolution selection from art direction. I use that distinction practically: srcset and sizes help the browser choose an appropriate source size; picture can provide a different composition for a different layout. I try repositioning a shared image first, but commission or export a separate crop when repositioning cannot preserve the message. I keep the purpose consistent across those variants so one alternative description still makes sense.
How to write alt text that adds useful information
I write alt text after placing the image beside its heading, caption and surrounding copy. The same photograph can need different treatment in different contexts. On a product page, a useful description might be 'Oak tabletop with a rounded edge and visible end grain.' In a material comparison, the important information might instead be the contrast between that grain and the adjacent sample. I describe what is relevant and visibly supported.
The web.dev accessibility guidance on images bases text alternatives on the image's purpose. I follow that rather than transcribing every visible object. Decorative images get an empty alt attribute, alt="", rather than an omitted attribute. An image that is the only content of a link needs an accessible name that communicates its destination or action. A filename or a description of its colour won't do that job.
I don't put search phrases into alt text unless they genuinely describe the content. I also avoid repeating a nearby caption word for word. A complex chart needs its main point and sufficient equivalent information in accessible page content, potentially including a table; a long inventory squeezed into alt text is difficult to use. My check is whether someone who cannot see the image can still get the information or complete the action.
How to prepare responsive images without unnecessary weight
Once the composition works, I separate the master asset from its delivery files. I keep an original that allows future crops, then generate variants appropriate to the rendered sizes. Web.dev's responsive image guidance explains how browsers use source candidates and sizing information. I make sure that information reflects the layout; a misleading sizes value can cause the browser to download more pixels than the placement needs.
I compare compression settings at the size people will actually see. Fine grain, foliage and subtle gradients expose different problems, so one quality setting is rarely a sensible rule for everything. I look at edge detail, banding and whether a material still looks believable. I wouldn't soften a product texture just to hit an arbitrary file-size target. I'd reconsider its display size or the number of photographs first.
I include intrinsic width and height so the browser can reserve space before an image loads. I don't lazy-load a prominent image that is visible as the page opens. For images further down, lazy loading can avoid unnecessary early downloads. I check transferred bytes, loading behaviour and layout movement on the real page, not just the export folder.
How to review whether website imagery is working
I review imagery as part of the task it supports. For a product photograph, I might ask someone to identify the finish or locate a relevant construction detail. For a service diagram, I'd ask them to explain the next step. I avoid asking only whether they like the image. Preference tells me little about whether it made the page easier to understand.
I record failures precisely. 'The phone crop hides the fastening' leads to a useful change. 'Needs more impact' doesn't. I check keyboard access for image links and use a screen reader to review names and reading order in context. Automated checks can flag a missing alt attribute, but they cannot decide whether a description communicates the right information.
I make the handover specific enough to survive the next content update. It includes approved crops, source files, usage restrictions, alternative text and the reason an image was marked decorative. I also name the detail that must not be cropped out. That small note prevents a future replacement from matching the visual style while losing the original purpose.
Questions people ask
What is art direction in responsive images?
I use art direction to mean changing an image's composition to suit its placement, such as supplying a tighter crop for mobile. Delivering the same composition at a smaller resolution is a separate decision.
Should every website image have alt text?
I give informative images a useful text alternative and decorative images an empty alt attribute. For functional images, such as an image-only link, I make sure the accessible name explains the destination or action.
How long should image alt text be?
I keep it as short as the purpose allows rather than aiming for a fixed character count. If understanding the image needs several sentences of explanation, I put that detail in accessible page content.
Should I use stock photos or custom illustrations?
I choose based on the claim the image needs to support. Stock photography can establish a setting, while illustration can explain a process; neither should pretend to document an actual product, team or facility.