Guidelines for formatting and optimising images

Images are a key element of your website to help you attract customers and sell more experiences. In this article, we’ll share best practices for formatting and optimising your images.

Image requirements 

Image best practices

How your images will be displayed on your website depends on your website theme and the block being used. However, there are general best practices that you can use to ensure optimal display.

Image dimensions

For hero images, galleries and backgrounds, we recommend using images that are between 1920 and 2500 pixels wide. For other images that are displayed much smaller, we recommend using images that are between 800 and 1080 pixels wide.

The recommended height will vary based on the aspect ratio (height:width) of the block you’re uploading for. 

For example, the images below are displayed in a 1:1 (square) format and so the recommended image dimensions will be 800x800:

File size

Once you have adjusted your images’ dimensions, it’s important to optimise the file size. Your images’ file sizes have a big impact on the loading speed and overall performance of your website. We recommend using image files of less than 500 KB for best results, though the limit for an individual image upload is 10 MB. 

If your images are larger than 500 KB, you can use an image optimiser tool to decrease the file size, such as ImageOptim and TinyPNG.

File type

We recommend using WebP format as it's the most modern file type that's smaller in size for the same or higher quality image. You can use a tool such as CloudConvert and Online Convert to convert images to WebP. 

Otherwise, we recommend using PNG for logos and images with graphic details, such as text, shapes and patterns and JPG format for other static images. GIFs are best for animated images.

Background images

Most Easol themes will position background images relative to the centre of its container. This means your background images will be dynamically cropped from the sides as the browser gets smaller (see below for an example). Because of this, we recommend positioning important elements near the centre of the background image.