In this article we’ll be running through image size recommendations and what can be done in order to keep file sizes low. We need to do this in order to keep the website running fast. Although images may load fast on a desktop while somewhere with stable WiFi, when viewing on a mobile using a 4G connection this is large files make website load times increase.

We typically want to aim to have our image file sizes around the 50kb for smaller images up to around 200kb for larger header images. However, the lower we can get the file size, while still looking ok, the better.

Recommended image sizes #

As a general rule of thumb, we shouldn’t ever need an image’s dimensions to exceed 1920px in width. The most common largest screen is full HD which is 1920px in width.

Header images #

Ideally the header images for pages should be 1880px x 880px. 1880px is how wide the header image can get when viewing in full HD and this is the largest height that they can be displayed at.

News article featured images #

The featured images for news articles are only ever shown in an almost square format and ideally should be 302px x 280px.

Home intro links #

These images are variable as we have a larger single image to the left and then two links stacked on the right.

Firstly, the larger image should be ideally 1200px x 800px.

The two right images should be ideally, 628px x 200px.

Home shortcut links #

These images are shown in rectangles and should be 209px x 102px

Image formats and quality #

In order to ensure that we are using the best compression and lowest file size available, images should be uploaded in the webP format. This format ensures images are optimised and compressed for web usage.

It is also a good idea to have a play with the quality export option to see how low we can reduce the quality without major/noticeable visual implications. Doing this will reduce the file size by a reasonable amount, usually something around 75-85 seems to work best on uncompressed images.