Why are my images on the website cropped?

Images can be displayed in many different locations on a website. Sometimes the system crops an image. The reason why this happens depends on the content of the image, the location of the image and the size of the screen on which the image is viewed. Often, reducing the size of an image poses no problem. There might just be enough space to reduce the size, or the image is decorative and the content is not so important that cropping is an issue. In this article we explain why certain choices regarding cropping were made and how cropping is done.

Since the arrival of mobile phones, screens exist in a wide variety of sizes. This means that not every screen has the same ratio. A tablet is on the square side, a phone rectangular and standing up, and the screen of a monitor is widescreen. Because there is such a variety in sorts and sizes of screens, the designer has to make choices regarding cropping and reducing of images.

But why is the cropping incorrect?

Imagine a website with an image that is displayed over the full width of the screen, for example an opening photo on the front page or a sub page. This ‘full width’ on a monitor is very different from that on a phone, or on a tablet. Besides, the user has the freedom to change the image. Therefore, the size of the image is not always the same. In short, there are two varibables: the size of the image and the size of the screen. Finally, the opening photo on the front page could be higher/lower than that on a sub page, in which case there are three variables. Because of this, it is impossible for the designer to have every image on every screen on every location displayed exactly as wished.