Image handling

Image management plays an important role in many applications and websites, as images are an essential part of visual communication and user experience. Generally speaking, the key to proper image management is to ensure that images are of high quality, optimised for the specific application and presented in a way that is aesthetically pleasing and fits the desired user experience.

Try our prototype

Image cropping

Cropping images can remove unnecessary content and reduce file size. Umbraco's Image Cropper is a feature built into the Umbraco CMS platform for managing images and their cropping. It allows you to control image cropping, optimise image size and create a better user experience by ensuring images are displayed correctly and efficiently on your website.

The benefits of using Umbraco's Image Cropper include:

1. Flexibility: You can customise multiple cropping templates based on different needs and uses.
2. Efficiency: Image Cropper automates the cropping of images so you don't have to create and manage multiple versions of the same image manually.
3. Optimisation: By using cropping, you can generate thumbnail versions or custom sizes of images, resulting in smaller file size and faster loading times.
4. Responsive design: Image Cropper allows you to customise image cropping for different devices and screen sizes, which is essential for achieving a responsive web design.
5. Consistent image handling: By using Image Cropper, you ensure a consistent image display across your website or application.

Compression of images

Image compression is the process of reducing the file size of an image by applying various techniques that eliminate or reduce unnecessary image information without significantly affecting image quality.

Image compression has several benefits:

1. Smaller file size: Compression reduces file size, saving space on storage devices and making it easier and faster to transfer and download images over the internet.
2. Faster loading times: Smaller file size means the image can load faster on web pages or applications, improving user experience.
3. Reduced bandwidth consumption: Compressing images reduces bandwidth consumption, which is especially important for mobile data services or locations with limited bandwidth.
4. Optimised storage space: Compression saves storage space on servers, which is crucial when there is a need to store large amounts of image files.

Focus point

The focal point is a marked point in the image that indicates the most important area to preserve during the cropping process. When an image is cropped, the system tries to preserve the focal point in the cropped image.

This is useful when you have images where it is important to ensure that a certain area or subject remains visible or centred, even after cropping. The focus point is centred by default but can be adjusted and moved around the image to suit the desired result. This provides more flexible and precise control over the cropping process and ensures that the essential content of the image remains visible and in focus.

Adaptation of images

Image alignment is about how an image adapts and fills an element when the aspect ratio of the original image is not the same as the aspect ratio of the element, such as an original portrait image that needs to be displayed in a widescreen element.

There are several ways to customise images for an element

1. Fill: The image will be stretched to fill the content area of the element, regardless of the aspect ratio of the image. This can result in the image being distorted if the aspect ratio of the element differs from the aspect ratio of the image and is therefore rarely used.
2. Contain: The image will scale proportionally to fit within the element's content area and the entire image will be visible. There may be empty areas in the element if the aspect ratio of the element differs from the aspect ratio of the image.
3. Cover: The image scales proportionally to cover the entire content area of the element and some parts of the image can be cropped to maintain the aspect ratio of the element. This ensures that the element is filled, but some parts of the image may be outside the viewport.

In addition, there are also scenarios where you want to maintain the original aspect ratio of the image without customising the image to an element. For example, this could be when inserting graphs, tables and other motifs of a more technical nature where the entire motif must be visible.

Try our prototype

Image formats

Using images in different formats such as wide, portrait and square can have different visual and functional effects depending on the context and purpose.

Here is a description of the use of each format type:

1. Wide format: Wide format images have a wider horizontal extent compared to the height. They are often used in landscape photography, web design and presentations where it is desirable to show a wide view or capture a wide perspective.
2. Portrait: Portrait images have a greater height to width ratio and are suitable for emphasising vertical elements and objects. They are often used in portrait, fashion and product photography where it's important to focus on a person's face, an object or a vertical composition.
3. Square: Square images have the same height and width and create a symmetrical composition. They are popular in social media such as Instagram, where they can be customised and displayed in a miniature square version

The choice of image format depends on the desired visual effect, the message to be conveyed and the platform or context where the image will be presented. It can also be part of the overall aesthetic or branding strategy. Whatever the format, it's important to consider how best to adapt the image and optimise its visual impact in the given application.