How to Optimise Your 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 is a useful tool for image optimisation.
The Right Resolution
Images taken straight from your phone or camera, and those downloaded from stock image sites and more often than not print-ready.
However, website images don’t have to be print-ready quality they can have a much lower image resolution and still look great.
That’s because print needs images to have 300dpi (dots per inch) whereas digital platforms only need 72dpi.
Converting your image from 300dpi to 72 will massively reduce the data the file holds, in turn making it much smaller and better optimised for the web.
Resolution conversion can be done through professional design software such as Photoshop, but if you don’t have that then an online tool like convert-dpi.com can help.
The Right File Type
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.
SVG (Scalable Vector Graphic)
Vector images are essentially super simple files which can be scaled to any size without losing quality or risking pixelation. Meaning they’re perfect to use when building a responsive website.
They are the ideal file type for design assets such as logos, icons, and illustrations.
Due to their scalability, they are a great choice not only for their display capabilities but also because they are often very small file sizes. Making them perfect for optimising your speed and reducing the impact your website has on the environment.
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 need help to optimise your site images get in touch with the form below and let us get you optimised.
Plus, if you found this useful be sure to subscribe to our monthly newsletter so you don’t miss our next articles.
We guide you through the key things you need to create an accessible design for people with specific disabilities and neurodivergence.
If you really want your eCommerce site to succeed, and why wouldn’t you, then there are some key features that should be included and we’ve compiled that list for you.
Events are finally back! We’ve compiled a list of our top tips to help you maximise your event presence before, during and after the show.
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.