Image optimisation

We don't want Google to hate our websites. Fortunately, we can reduce our image file sizes to help improve performance. One problem with formatting images is that modifications often reduce their quality. There are some tricks and techniques that let you reduce an image's file size and still keep them sharp enough to proudly display on screen.

Why is optimising images important?

• Master images are always large files and are too high a resolution for the web. Web pages that contain such images can be bloated in size and perform poorly.
• Mobiles have reduced download speeds, capacity limits and smaller cache sizes, so big file sizes will severely affect mobile browsing performance.
• Sites which load quicker offer a better user experience and are less likely to see high bounce rates.
• Search engines actively reward sites that load quickly.
• Smaller sites will use less disk space and bandwidth.
• Images often make up the bulk of a sites total file size, so image compression/optimisation can make significant differences to page load speeds.

Naming conventions?

It is important to have a meaningful name for any images for both accessibility and SEO benefits, but also ensure that your file names:

• Only use lowercase characters and numbers
• Words are separated by a hyphen
• Use no special characters, underscores, spaces or uppercase

Producing and optimising SVGs to work cross browser

Optimising images

The primary goal of formatting your images is to find the balance between the lowest file size and acceptable quality. Below are steps to take when optimising images:

1. Master copy

Always make a master copy before optimising an image. Once an image is edited and optimised for web, it is not suitable for printing. An image can easily be reduced in size but is very difficult to increase in size.

2. Understanding image compression and file formats

There are two different methods of compressing an image, which are:

• Lossy compression (Recommended for photography)

  This removes data from the image, although in most cases the reduction in quality isn't noticeable. The file size will be substantially smaller than lossless compressed images. A .jpg is an example of a Lossy format.

• Lossless compression (Recommended for vector illustration)

  There will be no reduction in image quality. File sizes will be larger compared to lossy compression. A common example of a lossless format used in websites is a .png.

3. Compression quality vs size

Here is an example of what can happen you compress an image too much. The first image is using a very low compression rate, which results in the highest quality (but larger file size). The second image is using a very high compression rate, which results in a very low-quality image (but smaller file size). Note: The original image untouched is 2.06 MB.

As you can see the first image above is 590 KB. That is pretty large for one photo. It is generally best if you can keep a webpage’s total weight under 2 MB in size. 590 KB would be a fourth of that already. The second image obviously looks terrible, but then it is only 68 KB. What you want to do is find a happy medium between your compression rate (quality) and the file size.

So, we took the image again at a medium compression rate and as you can see below, the quality looks good now and the file size is 151 KB, which is acceptable for a high-resolution photo. This is almost 4x smaller than the original photo with low compression.

4. Prepare the image size

Prior to optimising the image in Kraken, the master image should be cropped in Photoshop to a pre-determined set of dimensions (such as the hero banner, see below) and then saved for web (CTRL+ALT+SHIFT+S).

5. Using Kraken to compress

We recommended that all images (JPEG and PNG) are optimised through Kraken. You can also use Photoshop and adjust the image settings in 'save for web' view, but these images must still be fed through a tool such as Kraken to produce a correctly optimised image.

After logging into the Kraken website head to the Web Interface Pro option in the main navigation and then select the compression type (lossless or lossy) from the options on screen. In the example below, the optimisation mode is left at the default which is lossy.

If you want to manually set the image quality settings, simply select Expert from the optimisation mode options and you can edit the image quality manually to achieve the best results. Once ready, upload your images via the drag and drop section in the Kraken interface.

As the images are processed the file size savings will be listed alongside the image detail in the lower table, once all the images are finished, save as a .zip file. Once the zip file is downloaded, extract the files.

6. Create a WebP version of the image

For best page optimisation we recommend that you also provide WebP versions of any images (JPG, PNG etc are still required as fall backs for older browsers).

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent an quality.

WebP images can be exported from Photoshop using Google's WebPShop plugin, or there are various online tools available to convert JPEG images to the WebP format such as Squoosh. We currently recommend saving images with a quality of 60 using Default compression.

7. Image dimensions for our most common assets

Below are our recommended dimensions and file sizes for:

• Hero banner 16:9 (Actually closer to 3:1 as the hero is limited to 65% of the viewport)

  • Dimensions at retina: 2880 x 1620px
  • File size recommendation: 350kb maximum

• Editorial 16:9 card

  • Dimensions at retina: 1200 x 675px
  • File size: 100kb maximum

• Editorial 9:16 card

  • Dimensions at retina: 675 x 1200px
  • File size: 100kb maximum

Action once your image has been optimised

To aid our global design teams, UK teams should save images within their project folder. Keep copies of the exported images in the job folder under 'exports'.