Optimise website images for faster loading times

Images have such an important part to play in your website and learning how to optimise website images for faster loading times is critical. Images improve the design, break up your text and can explain your services or products like words can’t. Websites wouldn’t be the same without them. This article sets out to show you how to optimise website images for faster loading times.

The catch..

As I’ve mentioned already images are great but they add to your page weight and loading times significantly when not optimised properly for the web. Images from a smart phone or DSLR camera are usually many megabytes in size. Way too big and will only serve to make your website slow and possibly unreachable to some. Further more, Google uses page loading times as a ranking factor so the slower your website, the less likely it will rank highly.

Rule #1: Never upload images straight off a camera!

The solution 🙂

Optimising images may seem like a dark art to some but it’s really quite simple and tools are popping up everywhere that can help. Below I’ll talk you though how to optimise your images with a simple online resource so you won’t need any software on your computer, but the best part is, it’s FREE!

Squoosh, is an open source app built by Google Chrome Labs to help people optimise their imagery and make the web faster and more accessable to all.

Squoosh image optimisation

How to use Squoosh and what settings are best

Squoosh is simple to use, just take the image you wish to optimise and either drag and drop it into the website or use the handy “select an image” to browse your computer.

It should only take a second before your image appears within Squoosh. By default it will apply some compression but there’s much more you can do and it only takes a minute.

Optimise website images for faster loading times
Optimise website images for faster loading times

As you can see from the image above, you get a simple user interface. Original image data on the left and the optimisation features on the right. You can slide the blue bar left to right to see how the optimisation tweaks have effected your image. Sometimes you can go too far and start to loose image quality. If you ever notice this, simple undo your last change.

Settings to get you started to optimise website images for faster loading times

  • Use MozJPEG Compression
  • 75 on the quality scale works for many of the images I’ve used however you can tweak this to your specific needs.
  • Finally, resize your image dimensions (click the resize box for options). Typically an image that’s 800px wide is plenty unless your trying to add a full width banner style image. In which case go for 1800px wide. As a comparison a typical image taken on a good quality phone or camera is 3000px wide or more so this really does make a big difference even if you ignore the other optimisations.

Always check what effect your last image optimisation had on the image. You want to reduce the image size as much as possible without overdoing it and loosing too much quality.

Settings for optimising website images for faster loading times
Settings for optimising website images for faster loading times

To download your newly optimised image, just click the blue download button on the bottom right.

The image optimisation results

As you can see from the image above, I started out with an image 2.11MB in size and with a few clicks I’ve reduced it to 39.9KB. 98% smaller than the original which can now be enjoyed by all, thanks to a smaller image and faster page loading time. There’s nothing worse than waiting for a large image to load on a website and completely unnecessary too.

Tips to optimise website images for faster loading times

  • Play around with the settings to get a good balance for your image.
  • Consider the images purpose. Gallery images or similar don’t often need to be larger than 800px wide so resize the image to your needs.
  • Use the slider to help spot image quality changes to make sure you don’t over do it.

Conclusion

There are so many options out there for image optimisation but I’ve found this to be great and simple to use. You can view the optimisation changes in real time using the handy slider so you never go too far and loose quality. All round great tool which you can try out for yourself using the link below:

Visit Squoosh here

I hope you found this article helpful and try out this great free app to help keep your website running fast and your visitors happy!

Need help with your website?

DoodleIT have been building websites and supporting website owners since 2003. They provide web design North Wales but also have many clients across the UK and in Europe too!

Give Peter or Anthony a call on 01824 702375 to discuss your needs and see how they can help.