How to Optimise Website Images

Three simple tips and tricks

Before you go...

We don’t mean to brag, but our monthly newsletters are pretty damn good. They’re filled with useful information and how to's to help you grow your business. So do the smart thing, sign up below to get them in your inbox.

No spam, we promise!

Want to improve your website?

Why not claim one of our free, no-obligation video audits? We’ll analyse your site from both a design and technical perspective. Then we’ll send you a video showing you what's holding your site back with tips on what to improve.

By requesting your audit you consent to being added to our mailing list. We will never sell your information, and you can withdraw your consent to receive marketing materials at any time. A full copy of our privacy policy is available here.

If you’re on this page we’re guessing you know why it’s important to optimise your website images. However, if you’ve been told you need to do it but don’t know why, then check out this post first before you read on.

As for how to do it, well we could go on for reams and reams about all the details and different ways to optimise your images. But, we’re keeping it simple with the three most effective ways you can optimise your website images.

The Right Size

If you’re image needs to be 500px wide, don’t make it 1,500. Simple reason being that it will create a larger file size than necessary, a file that that needs to be downloaded from the server to be displayed. A large file size takes longer to download which increase the page load time.

The 2-Up ‘Save for Web’ viewing panel in Photoshop

The Right File Type

The best way to save your image is with the ‘Save for Web’ option in Photoshop and there are several file types to focus on:

JPG
Also know as JPEG. This file format can manage a large amount of data and colour. Which makes it the best file format for photographs, or graphics with lots of texture and detail.

With Photoshop you’re also able to adjust the image quality of a JPG. You’ll be amazed at how much you can reduce the % image quality, and in turn file size, of a JPG file without actually losing any obvious visual quality.

The trick is to use the ‘2-Up’ viewing option so you can see the original file next to the reduced quality version. Adjust the quality % until you’ve reduced it as low as you can before you start to see the image going boxy (see the example below). Once it does that increase the % to where the image looks good again and save that down.

PNG
This file type is perfect for simple graphics or files that need transparency, such as logos and icons.

It’s also generally a much smaller final file size than a JPG so is a good one to use if the image is suitable.

There are two formats of PNGs, PNG-8 and PNG-24.

PNG-24 can handle a much larger colour palette than its counterpart. However, all those extra colours come with an increased file size so if the image works in PNG-8 then that will be the best option.

WEBP
This is a modern image format and is the best option for optimised website images.

It’s essentially a compressed JPG or PNG file and can save up to 34% on your file size.

The beauty of the WebP format is that it has lossless image quality. Meaning your final image isn’t compromised by the compression. It also supports transparency in images, meaning it’s a great alternative to both JPG and PNG files.

GIF
This is an animated image that is limited to 256 colours (the same amount as PNG-8s), so is best used for animating simple graphics

Taking the quality of an image too low creates the pixelated/boxy result above.

Compression

If you can’t save your files in a WebP format (already compressed) and need to get the file size down further then you need to compress it.

Compression is a process that removes unnecessary background data and can shave 5-10% off your total file size.

The best way to do this is with the ‘Save for Web’ option on Photoshop as mentioned above.

However, if you don’t have Photoshop, you can use several free, online compression tools like this one. It’s called TinyPNG, but it works on JPGs too.  You can run your file through it multiple times, but a word of warning, don’t compress too much as you’ll lose image quality as well as background data.

And there you have it. The three simplest and most effective ways to optimise your website images.
If you found this useful, be sure to subscribe to our monthly newsletter below so you don’t miss our next posts.

From the Blog…

We periodically add useful and interesting content to our blog. Below is a selection of some of our most recent content and to get the latest posts in your inbox you can subscribe to our monthly newsletter. No spam, we promise!

What is Sustainable Web Design
What is Sustainable Web Design

The internet is a secret polluter, but sustainable web design is here to help limit the problem. We explain what it is and how to build a sustainable website.

read more

Pin It on Pinterest

Share This