Optimising images for your website

“The web should be fast” – Google.

Website images are usually the largest files on a website and most website owners have little or no knowledge about how to properly size or optimise their images before uploading them, let alone the server space savings and speed gains they will get from doing so.

This article will show you how easy it is to optimise your images to keep your website fast.

There are two parts to optimising images for the web:

  1. Resizing your image
  2. Optimising your image

1. Resizing images for web

Resizing your image means you have to set the image dimensions to be exactly what you need on your site. If your image is too big for the space it will be in, then there is unnecessary load time added to the page. If the image is too small, then it may not fit or will be stretched and not look good.

2. Optimising images for web

Here’s our workflow. We know that many people don’t have Photoshop, which is OK, just skip that step.

  1. Choose the right format. JPG is for photos, PNG is usually best for icons that need transparency.
  2. With Photoshop, save the images for web as JPG or PNG, medium to high quality.
  3. Use a service reduce the size of your image. Our favourites are:
    JPEGmini (for the free desktop app)
    TinyPNG (for supporting .png too!)
    Kraken.io (for integrating with WordPress and resizing while optimising)

After performing these steps your images should now load super fast to save your visitors waiting for your page to load.