Why does my image get cropped and scaled into different sizes?

Instead of having to supply a different image for each component, we use the one image, but across many components. This results in the one image being resized and cropped across many variations for mobiles, tablets and desktop screens. Below is a guide of how your original image can get cropped.

image free crop

Crop free region

In this 640 by 480 example, the image shows a 290 by 325 pixel crop free zone, where anything inside this area won’t get cropped out. Depending on which component you choose and what device you’re viewing the image on (Mobile vs Desktop), your original image will get cropped and resized to various degrees as roughly depicted in the examples below. The image is always cropped out from the centre, and is scaled due to responsive design.

Importance of placement

When considering the crop free region, it is worth noting that anything in this region will not get cropped out in any of the components. Is it therefore advisable to place any important aspects of the photo within this region, to avoid the potential of it getting cropped out on various devices.

Cropping variations

Showing how your image can appear in different components

crop variation 1
crop variation 2
crop variation 3