The desktop hero shows a beautiful building, an inviting entrance and enough surrounding space for the headline.
On mobile, it shows a hedge.
An excellent hedge, admittedly. Its promotion to lead brand ambassador may still have been accidental.
Responsive imagery involves two related decisions: which file size the browser should receive, and which composition makes sense in the available space. A smaller file can help with delivery. It cannot, by itself, make the important subject visible in a narrow layout.
Here is a hypothetical review of that building photograph on a custom WordPress website.
Decide what the image needs to communicate
On a wide screen, the building and its setting establish the character of the project. The headline sits in a quieter part of the photograph.
The mobile layout has different proportions. If the image fills a taller container while preserving its aspect ratio, part of it must be cropped. A default center crop may retain the landscaping and lose the entrance that made the photograph useful.
Before changing the code, identify the intended subject. Is the image introducing the architecture, showing the scale of the space or simply providing atmosphere? That decision gives the crop a purpose.
Try a focal adjustment before commissioning a second image
Sometimes the same photograph works if its focal point is positioned deliberately. A custom theme can provide a controlled setting for that position, with a preview of the relevant layout.
Check the result across more than one phone width. Moving the crop toward the entrance may solve one view while pushing it beneath the headline in another.
If the composition still feels cramped, a separately prepared mobile crop or a different suitable photograph may work better. The choice should follow the message, rather than an obligation to preserve the desktop design at all costs.
Image-led sites live or die on how the photography is handled. See the digital showroom we built for Cavastone.
Keep meaningful details available
A crop should not remove information that the page relies on. If a photograph shows a product configuration, for example, make sure the visible image and nearby description do not suggest a different offer.
Captions can explain relevant context. Alternative text should communicate the image’s purpose when it is informative; a purely decorative image needs different treatment. Important information should also be available as real page content, rather than trapped inside an image or an inaccessible background.
A mobile hero may work better with the heading outside the photograph. That gives both the message and the image room to do their jobs.
Worth reading next: The hero image should stay where we put it.
Give the theme the right assets and instructions
WordPress has supported responsive image markup since version 4.4. In suitable image output, srcset and sizes help browsers choose among image resources for the displayed size.
That is distinct from art direction. Serving a smaller version of the same wide composition still gives the browser the same composition.
The HTML picture element can support different image sources for different layout conditions. In a custom theme, the implementation can use that approach when a distinct mobile crop is needed. The content editor also needs a clear way to supply the relevant image.
Avoid making every image require several manual variations. Reserve that additional choice for cases where it improves the result, and provide a sensible fallback when the optional image is absent.
Finally, review the rendered page with the real headline, button and image together. Check the crop, readability, image dimensions and delivered resources. A polished design file does not show everything the browser will do.
The successful mobile hero keeps the important subject important. It looks considered in its own space and supports the page’s message. The hedge can remain in the photograph. It simply does not need to chair the meeting.