User Guide

Choosing image material for the website

This guide highlights the basic prerequisites for optimizing and choosing the right image for the right place on the website.

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

Why should we choose WordPress as a content management system?

WordPress is the world's most widely used platform for publishing websites, making it a proven choice. Good user-friendliness for administrators and strong potential for high visibility on Google are additional common reasons for choosing WordPress. The system is based on open-source code, making it a very cost-effective choice since site owners can avoid expensive licenses.

How long is the delivery time for a website?

Our productions typically range from one to six months, depending on the scope and the client's preferences.

How much does a website cost?

We always aim to provide fixed prices for websites of average size. However, in order to estimate the budget, we first need more information about the project. Therefore, we kindly ask you to fill out our needs analysis or book a meeting to receive a quote

Why is high pagespeed and accessability important?

A faster website creates a more trustworthy impression, ensures that visitors stay, and results in higher rankings in search engines. Accessibility makes the site usable for all potential visitors and provides an improved user experience

What languages are G-Cookies available in?

Ready translations are available in Swedish, Norwegian, Danish, German, English, Spanish, Finnish, French, Italian, Japanese. More can, of course, be added.

Can G-Cookies be used on any website?

Yes, as long as the website is built on WordPress.

Do you need to have GTM (Google Tag Manager) to use G-Cookies?

Yes, it must be set up. If you don't have an account, we can help out with that.