How do I control how images are cropped on different devices?
Images on your website often need to display at different shapes and sizes depending on where they're used and the size of the visitor's screen — a Full Width Image on desktop, for example, will show a very different crop to the same image on a mobile phone. Understanding how cropping works helps you choose and prepare images that look great wherever they appear.
Why images crop differently across devices
Most content blocks are designed to adapt to different screen sizes and orientations. As the available space changes — from a wide desktop screen to a narrow mobile one — the DCMS automatically crops the image to fit. By default, this cropping happens from the centre of the image outwards.
Controlling what stays in frame
If an image's most important detail isn't centred — a person's face, a key landmark, a sign — the default centred crop can sometimes cut it off. This is where the Focal Point tool comes in: it lets you mark exactly which part of an image should always stay in view, however it's cropped. See our dedicated guide on using the Focal Point tool for full step-by-step instructions.
Match image orientation to the space
Always match the orientation of your image to the space you're uploading it into. Avoid uploading a landscape image into a portrait space, or a portrait image into a landscape space — mismatched orientation often leads to awkward, heavy cropping that even a well-placed focal point can't fully fix. Where possible, choose or crop your source image to suit the space before uploading.
A note on screen resolutions
Visitors view your site on a huge range of screen sizes and resolutions — from large desktop monitors to a variety of phone and tablet screen sizes. The DCMS handles this automatically, generating appropriately sized versions of your images for different devices. This is why uploading a high-resolution source image matters: it gives the DCMS the best possible quality to work with across every screen size it needs to generate.
💡 Top tip: After uploading or adjusting an image, always check how it looks using Live Preview across desktop, tablet, and mobile. A crop that looks perfect on one device can sometimes look quite different on another.