Images not displaying correctly

When using blocks, your images will appear differently depending on the blocks you use.

Hero images/videos:

If your hero image/video is cropped more than you'd like, we'd recommend using the 'uncropped hero' image, this means the image or video will match the device height, allowing more space.

If you have text on your image and it's being cut off, you will need to move your text to the centre of the image to allow padding so your text doesn't get cut off on certain screen sizes.

If your hero image looks correct on desktop but not on mobile, you’ll need to use the “mobile image” option and upload a portrait-format image. This ensures that on mobile devices the image fills the screen appropriately instead of using the landscape desktop version.

Quality issues:

If your images appear pixelated or blurry, it is typically because the image is too small or low in resolution for the device. The Umbraco CMS supports images up to 5000px, so please upload a higher-quality version in the media folder with a larger pixel size.

Block images:

When you upload an image in the media folder, you will be able to see how it will crop dependent on the block you use:

If your image appears cropped on all sides, you may need to add padding to ensure the main subject remains properly framed. If the focal point (pink dot) is not positioned correctly, you can adjust it to set the desired centre of focus for the image by clicking around the image or dragging the dot.

Some blocks will reposition the image dependent on the text length, for example, the 'split section' block will extend the image height the more text that's added.

Please see our guidance on image sizing if you're still stuck!

Created by Mollie Young, Modified on Mon, 13 Apr at 12:22 PM by Mollie Young