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.
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:
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.
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.
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.
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.
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.
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.
There’s tons of stuff that goes into crafting the perfect book and we’re here to make sure you don’t miss any of the key things you need to consider.
There are literally millions of websites, but there are 10 common website mistakes that we see all the time and we’re going to show you how to fix them.
Landing pages are a vital tool in your businesses marketing plan. So let us give you some tips on how to create a great one that delivers the best results for your business.