Do you optimise your images before uploading to the web? Why do we need to do this? And how can we even optimise an image?
Here at Rawww, we have tried and tested various apps and programmes to ensure that, when it comes to resizing or optimising images, they’re ready for our clients, as well as for our own website!
Why is image optimisation so important?
Images often have large file sizes, which means they can take up a huge amount of internet bandwidth. That’s not great when it comes to the web as it means images will take a long time to download. The internet has given us lots of great information but it has also, due to the amount of information out there, made us very impatient.
The last thing you want is for your online users to get impatient and leave your page – or your app – due to timely downloads. Especially as an average 3.0MB website has around 1.7MB of images, according to the HTTP Archive.
These images can come from various sources, such as JPEGs, PNGs and GIFs.
Consider Next-Gen Formats too, such as JPEG 2000, JPEG XR and WebP – all of which are image formats that have superior compression and quality characteristics compared to the older formats of JPEG and PNG. You’ll also find that if you use these when it comes to encoding your images (as opposed to using JPEG or PNG) they’ll load much faster, as well as consume a lot less cellular data.
With regards to the modern image format of WebP – which is supported in Chrome and Opera – smaller, richer images can be created, providing better lossy and lossless compression for images on the web. In fact, when it comes to WebP lossless images, they’re 26% smaller in size compared to PNGs and when it comes to comparable JPEGs, WebP lossy images are 25-34% smaller.
So, if you think back to the fact that online users are an impatient lot, it makes sense to look at making images as small as possible when it comes to in-file size to give everyone a better network experience. This is even more important when considering your mobile site.
What’s the best way to optimise images for the web?
With so many tools available when it comes to optimising images for the web, where do you start? Depending on your image format, there’s a variety of options. Here are some of our favourites:
Imagemin is a great choice for image compression as it supports a wide variety of image formats. You can easily integrate it with build scripts and build tools. Libvps is similar – it runs quickly and uses little memory.
Or try ImageOptim, which will reduce your image size by a significant amount, yet still preserve that all important visual quality. If you’re on Windows or Linux, there’s alternatives available too.
For JPEGs, look at MozJPEG (q=80 or lower is fine for web content) a production-quality JPEG encoder that improves compression, yet still maintains compatibility when it comes to most deployed encoders.
Another one for JPEGs is Progressive JPEG support, where data is compressed in multiple passes of progressively higher detail.
PNGs can be run through pngquant – a command-line utility and a library for lossy compression of PNG images. It’s really impressive that by using conversion, you can reduce file sizes by as much as 70% while preserving full alpha transparency.
If you have SVGs, try running them through SVGO, a quick command-line tool that allows you to compress with just a single command. SVGO can also strip any unnecessary metadata such as comments, layer information, and XML namespaces from the file.
How do I know if my current images need to be optimised?
Take a look at WebPageTest as you can perform a site audit with the added benefit that it will highlight where you can better optimise your images (look under the ‘Compress Images’ section).
As you can see, taking the time to optimise images is hugely beneficial and as a design agency, it’s high on our list of priorities when it comes to uploading images for clients.
If you’d like to know more about image optimisation and how it can help when it comes to your website, get in touch and discover the difference it can make to your online presence.
