Responsive Images: When the Phone Needs a Different Crop

A ceramicist launches a workshop page with a photograph of a potter’s hands shaping a bowl. On a wide screen, the wheel, hands and shelves tell the story together. On a phone, the same photograph shrinks until the hands are barely visible. When the designer fills a taller frame with the image instead, the crop cuts off the bowl. Both versions can be perfectly sharp. Neither shows the reader the detail that explains the workshop.

The decision is whether the small screen needs fewer pixels or a different composition. If the story reads clearly at both sizes, a smaller copy of the same photograph can be enough. If the subject gets lost, make a crop that preserves what the image is there to communicate. Starting with that decision can save you from exporting several sizes of a composition that never worked on the phone.

Separate the size of the file from the choice of crop

The WHATWG HTML Living Standard distinguishes selecting different versions of the same image for different display conditions from selecting different image content for different layouts. The latter is called art direction. In practice, you might offer a wide workshop photograph and a closer view of the potter’s hands from the same shoot. The smaller layout gets a clearer subject while the wider layout keeps the context.

In HTML, an image can offer size candidates through srcset; when those candidates are specified by width, sizes describes the intended display width so the browser can make an appropriate selection. For a composition change tied to a layout condition, the picture element can offer a different source under a media condition, with an img element as the fallback. Your publishing tool may expose this as separate desktop and mobile images. If it does, check what the page actually shows before assuming it exports that structure.

A narrower crop can itself have more than one file size. The crop determines what is visible. The size candidates give the browser options for loading that composition. If you are handing off assets, name the intended layout or crop separately from its pixel width. Otherwise a colleague may reasonably select the smallest file and end up using the wide composition again.

Keep the detail that earns the image its place

For the pottery workshop, the hands and bowl are essential because they show what the class teaches. The shelving may create atmosphere on desktop but is expendable when space is tight. Another image might depend on showing distance or scale. A close crop of a mural can reveal the paintwork while losing the relationship between the mural and the building. In that case, preserving the wider view at a smaller size might be the better editorial choice.

Before opening the crop tool, describe the purpose of the image in one sentence. Then mark what must remain visible. If a heading sits over the image, check that the tighter crop leaves the heading readable without covering the subject. It may be better to move the heading below the photograph on narrow screens. That solves a layout problem without asking the image to do two jobs in the same small space.

Where the two crops share one alternative text description, make sure the description is accurate for both. ‘Hands shaping a bowl on a pottery wheel’ still works if the close crop removes the shelving. If the wider scene contains information readers need, put that information into nearby text so the phone crop does not remove it from the page.

Sometimes a layout needs only a different focal position. Before preparing two assets, try moving the image within the frame so the bowl stays visible at the narrowest width. If that holds up across layouts, keeping one composition may make future updates simpler. If the hands and bowl still occupy too little space, make a dedicated crop. Give it its own source file and keep enough room around the hands for modest changes in the shape of the frame. That way a later design adjustment need not undo the edit.

Check the page your readers will actually open

• Start at a narrow width. Open the draft at a phone size and look at it without zooming. Can you tell what the image is showing and why it belongs there?
• Check the transition. Resize across the point where the layout changes. Look for a range where the wrong crop appears or text covers the subject.
• Check the rest of the publishing surfaces. A listing card or social preview may crop a separate image. Test those surfaces directly if they matter to the launch.
• Confirm the final file. After a replacement, reload the actual page and check both layouts. If you have browser developer tools, inspect the loaded image to distinguish the wrong source from the right source being clipped by the layout.

Our guide to checking the store image and the cover inside an ebook makes a similar point: a successful check on one surface cannot stand in for another. For a responsive page, hand someone the phone view first and ask them what they notice. If they can name the subject without seeing the desktop version, you have a useful check on the crop. The goal is to carry the meaning of the image through a change in space.

Sources

• WHATWG, HTML Living Standard: responsive image selection and art direction.
• WHATWG, HTML Living Standard: the picture element.