Image Widths

On the website, there are usually three different image widths: small, wide, and full-width.

• Small - fills less than half of the content width. Even though they are displayed at 450px width on desktop, they can be wider when columns are placed in a row on smaller screen widths. Therefore, they should usually be rendered at approximately 980px width.
• Wide - fills the entire content width. These images usually won't be displayed wider than they appear in the design sketch. A guideline could be approximately 1200px width.
• Full-width - covers the entire browser window width, a common example being the images in the so-called hero section. These images will always be displayed as wide as the browser window. A guideline could be approximately 2000px width.

Below are examples of how the image widths may appear in desktop format, tablet, and mobile.

Format and Quality

The website generally uses four different file formats: JPG, PNG, WEBP, and SVG.

• JPG - should be used for photos and/or images that do not contain transparent information. The quality of the JPG should be set considering both visual quality and loading time. A guideline could be 60%.
• SVG - should be used for your own logo as well as any custom icons and/or illustrations. This file format significantly reduces file size compared to raster graphics.
• PNG - can be used for images that contain transparent pixels in cases where SVG is not available. An example of this could be if you display customer logos on your website, they should then have a transparent background.
• WEBP - when uploading in the media library, both JPG and PNG files will be converted to WEBP, which preserves the information in the images but can reduce file size. This happens automatically on the website to optimize loading time and pagespeed.

Below are examples of which type of image should have which format.

Image Cropping on Different Devices

As a rule, we can work with three different breakpoints: desktop, tablet, and mobile. In addition to this, there are also different types of image areas. An image area can be fixed in proportion or dynamic in relation to screen width.

• Fixed Proportional Image Areas do not get cropped or change proportions. In these image areas, images with important information should be placed so that nothing gets cut off at any of the breakpoints. An example of such an image could be an image in the content section of an article page.
• Dynamic Image Areas can be cropped horizontally and vertically. These image areas often have a fixed height and are cropped according to the screen width. A common example where this type of image area is used is the so-called hero sections. It is important to consider for these that the motif should preferably be centered in both height and width if it is sensitive to cropping, so that it remains a part of the image area even when the website is visited on devices with smaller screens.

Below are examples of how the different image areas behave on different devices.

Image Proportions

As a rule, we can start from three different proportions: landscape, square, and portrait. These proportions do not relate to a specific height or width, but only to themselves.

• Landscape image areas often have a 16:9 ratio. This ratio can be a good guideline when choosing an image for a landscape image area.
• Square image areas always have a 1:1 ratio. This ratio should also be applied to images displayed in geometrically round circles.
• Portrait image areas often have a 4:5 ratio.

Below are examples of how the different image proportions are perceived in relation to each other.

Frequently Asked Questions