Setting the scene
One of the issues we come across with websites when clients have control themselves is usually lot’s of small things that add up over time.
This small stuff can affect your site in multiple ways. One of these seems simple and obvious, but is a very big cause of your website loading slowly and very few people take the time to do something about it.
As web/graphic designers we have access to software that does a good job at exporting images for online use. We can maintain the quality/size of the image to get the balance just right.
Unfortunately clients, whilst they have control to upload images to their website don’t always have this skill set, so they just upload what they have with no idea that this is adversely affecting them or their online business.
This leads to images getting uploaded that whilst they can look fantastic, may take ages for a visitor to download (dependant on the internet connection they have), even worse if they are on a mobile internet connection.
This affects the visitors impression of your company/brand… nobody likes waiting.
Add to that Google give you small bonus ranking points if you make your site zippy to load, so it’s worth taking a few minutes more before uploading each image to optimise it.
I realise that not everyone has time to learn this skill of export and optimising or even have the software to do it, we would use Photoshop when we really want to get down to the absolute smallest size while keeping the quality.
However there is a short cut that will help reduce most images well enough that it’s worth the upload, download time, we’re talking usually seconds, not minutes and no requirement for learning Photoshop.
If you want to jump in then here is a top 5 for various online tools you can use for free.
- https://compressor.io/
- https://shortpixel.com/
- https://tinypng.com/
- https://imagecompressor.com/
- https://kraken.io/web-interface
However before you dive in I would recommend you read on first as there are a few little downsides you should be aware of.
So the biggest warning is to always check the quality of the compressed image, sometimes it goes too far and you lose too much quality, which can also give the wrong impression to your visitors. So it’s not worth the file size saving if it looks too blocky,
If you find this happening a lot with your images then at this point you might want to look at learning how to optimise properly using software or try a different online optimising site, just go to You Tube and type in “optimising images for online use”.
The links to the optimising sites that I’ve provided will also usually strip out what’s called meta data, now some of this meta data is just things like make of the camera type, sometimes copyright info, location etc.., so if you optimise your images like this then you may be losing valuable information for Search Engines to grab on to for rankings (it’s not a great deal, but every little bit helps with Search Engine Optimisation). You can always go back in and add some back to the image, just Google adding meta data to images and there will be plenty instructions you can follow.
However if you don’t really know what meta data is or that it’s even being done to the image you have, you will most likely be safe (although copyright removal could go against terms of stock photos or photographers images you buy), just make sure you keep a copy of the original file or ask who is supplying them if they have added meta data to the images.
I’ve used these online tools for quickness, some even have plugins for WordPress to make things easier and automated but you’ll still want to check the results.
On a client project we managed to save a lot of from the file size with no loss in quality on the image, which is why I’ve written this article for others to benefit from, so here is my results below to give you an idea of the kinds of savings you could get.
Home Page Banner Optimisation Tests
Here is a couple of examples from a site we did a while ago to show just how much of a difference it can make.
Example 1
The original image’s Filesize = 348k
The compressed was Filesize = 125k
So that’s an amazing saving of 223K and if I took it into Photoshop I could probably reduce it a little more, but for a quick upload, wait, download it’s certainly nothing to sneeze at.
Also consider that single image now loads for the visitor in about a 1/3 rd of the time. If you have lot’s of images and you get a better compression rate you could save even more time loading your website pages.
Example 2
Here’s the other one Filesize = 473K
Here is the optimised version Filesize = 146K
That’s a whopping 327K saving for less than a 30 seconds effort with no visible loss in quality.
Conclusion
If you run your own website and use things like stock photos or take your own pictures, it’s well worth giving this image optimising website a go, you’re visitors will be happy at the site loading quicker and Search engines will be happy that you’re helping your visitors, so it’s a win-win.
Just remember to always check the result before you upload the image to your own website to be sure you’re happy with the quality.
Happy Optimising!
* Caveat – Our website optimises the images to keep them small on our website so the images you see in this post aren’t the same sizes as what’s mentioned. We encourage you to do you’re own tests with a large file and see what gains you can get.
