How to Optimise Your Images for Web

What is image optimisation?

In short, image optimisation is the process of reducing images on your website to the smallest possible file size without reducing the quality of your photos and graphics.

Although this might sound complex, it’s actually quite easy. There are image optimisation plugins for WordPress that can help to optimise your images by up to 80% without any noticeable loss in image quality.

What are the benefits of image optimisation?

These are the main benefits of optimising your websites images:

  • Faster loading website
  • Improved search engine rankings
  • Better user experience
  • Higher conversion rates
  • Save storage and bandwidth (which can reduce hosting and CDN costs)
  • Faster backups (also reduces backup storage costs)

Image optimisation checklist

1. Choose the right format

Before you start optimising your images, make sure that you’ve chosen the best file type. The most common file types are:

  • JPEG – uses lossy and lossless optimisation. You can adjust the quality level for a good balance of quality and file size.
  • PNG – produces higher quality images, but also has a larger file size. Was created as a lossless image format, although it can also be lossy.
  • GIF – only uses 256 colours. It’s the best choice for animated images. It only uses lossless compression.

There are other file types available like WebP and SVG, but these file types aren’t as widely supported and may not be compatible with older web browsers. For this reason it is usually best to stick to the three file types mentioned above.

2. Resize your images

When you import an image from your phone or digital camera it will usually be high resolution and have large dimensions (height and width).

These high resolution images are well suited for printing and desktop publishing, but are not suitable for use on your website.

You can reduce image dimension to be more suitable for use on your website by resizing the image using image editing software on your computer, or free tools such as Pixlr that are available via your web browser.

Pro tip: for featured images on a WordPress blog we recommend a size of 1200×628 pixels.

3. Compress image files

The next thing that plays a huge role in image optimisation is image compression. There are two types of compression you can use to optimise your images, lossy and lossless.

  • Lossy – will remove some of the images data, but in a way that the human eye normally won’t notice.
  • Lossless – will retain the same level of image detail before and after compression.

You can use browser based tools such as TingPNG or JPEGmini to compress images for use on your website.

There are also several popular WordPress plugins such as Shortpixel and WP Smush that can compress and optimise your images automatically when you upload them.

Best image optimisation tools

Here is a list of the best free and paid tools that are available to optimise images for your website:

  • TinyPNG – a free browser based tool for compressing JPEG and PNG images.
  • ImageOptim – free image compression tool for Mac
  • Trimage – free image compression tool for Windows
  • Pixlr – free, browser based image editing software similar to Photoshop
  • Canva – online graphic design tool

Best image optimisation plugins for WordPress

Here is a list of WordPress plugins that can be installed on your website to automatically optimise and compress images when you upload them:

Most small business websites fail!

Let me help you avoid the pitfalls that most small businesses make with their website projects.