The number one culprit of slow websites is fat (uncompressed) images. Find out how & why you need to compress your images before you upload them to your site.
Have you been managing your website, and merrily been uploading photos of your successes, or added in loads of lovely images? Have you wondered why your site is getting slower to load over time? It started off like greased lightning, and now it is more like a teenager getting out of bed before lunchtime.
Your images are too fat.
Just in case you hadn’t picked up on the trend – a fat anything (other than a bank balance) is bad.
Why Your Page Load Time Matters
Websites need to load fast, with the expectation for faster and faster sites each year. Why do you care?
- Google uses page load time as a ranking factor
- 47% of consumers expect a website to load in two seconds or less
- 40% of people abandon a website that takes more than three seconds to load
- A 2-second delay on a site during transactions increases abandonment rates to up to 87% (Case study from Radware)
Having a slow loading site is negatively affecting your business. You need to speed your site up to stop sending your potential clients to your competitors. We work hard to build fast websites for our small business clients.
The number one culprit of slow sites is fat (uncompressed) images. Is it time your images went on a diet?
Website Speed Tests
How fast are you now? If you want to check your current site speed, here are a few free tools to help. Each of these will help identify areas that are slowing your site down, including which pictures are causing your site the equivalent of online constipation.
Cropping Is Not the Same As Compressing
Many of my clients struggle with understanding why fat images could slowing down their site, so we need to take a teeny tiny dip into some jargon.
Most business owners understand how to crop an image and happily crop their images before loading them to their website. Cropping means simply resizing or cutting an image to a particular size.
However, compression is different to cropping. Compression means either removing or grouping parts of a file to reduce its size.
With the online world, you need to do both – crop or resize the image to the correct size first and then compress the image to reduce the digital fat.
Two main types of compression
While graphic designers and photographers will throw their hands up in horror over this quick summary, here are the essential bits you need to know.
There are two types of image compression – Lossless and Lossy.
Lossless maintains the quality of the original file while reducing the image size. The reduction in file size is not as great as with Lossy compression. Use this method where tiny details matter.
Lossy compression permanently removes information from the file. The more you compress, the smaller the file but the less image detail is available.
For web images, lossy compression works fine in most situations. The trick is finding the balance between the detail you need in your image and the file size.
Image Compression Tools
If you realise that your images are too fat and need to be thinned down, you need to go back and compress each of your images and re-upload them to your site (and then get rid of the fat ones from your media centre).
While I can’t squish myself into a fabulous online tool and come back instantly 80% thinner, there are options out there to place your images on a crash diet and get those results.
Online Image Compression Sites
The simplest and cheapest way to compress your images is by using one of the many online image compression websites.
I have put the major ones to the test with one test JPG image, and have included the results of the compression.
Test Image (Photoshop Compression)
- Compressior.Io – is the most popular free online image compression site but I have had patchy results with it. Some brilliant compressions, other times zero compression. (Test Image Compression: No Change)
- Tinypng – another popular site (with a cute panda on the front). Very easy to use. (Test Image Compression: From 174.4KB down to 32.1KB)
- CompressNow – Another relatively easy to use
site , although you need to be cautious where you click as the ads on the site can be deceiving (Test Image Compression: From 174.4KB down to 34.9KB) - JPEGMini – Free for small files and paid for larger images. (Test Image Compression: From 174.4KB down to 50KB)
Image Compression Software
If you have Photoshop, then you have the gold standard solution (with a gold price tag to match).
Open your image in Photoshop, then go to File- Export and then choose Save for Web (Legacy).
I generally select a JPEG Medium Optimised file as a nice balance between size and image resolution.
(Test Image Compression: From 174.4KB down to 25.1KB)
You can also batch compress a stack of images at once using Photoshop (which is perfect if you discover that all your images across your blog need to go on a rapid diet).
Tom Hole gives a great tutorial on how to automate your batch compression to save images for the web.
If your budget doesn’t stretch to gold options, Irfanview is free open source graphics software for Microsoft computers.
I love Irfanview and find it super easy to resize, crop and compress all from the one piece of software. (Test Image Compression: From 174.4KB down to 29.7KB)
Image Compression Plugins
There are free and paid plugins available for WordPress sites that compress your images for you as you upload them to your site. There are pros and cons of doing image compression this way.
On a plus – they are super easy, and you never have to remember to do them.
On a minus – you are applying the same standard across all your images. There is no variance which means some will look great and others not detailed enough. Every plugin added slows a site down, so if you are really keen on speed, do your optimisation
We tested Imagify and found it does a decent job at compressing the images for our sites.
If you want more information about the different plugins out there and comparison tests between them, here are a few articles to get you started.
https://www.elegantthemes.com/blog/resources/best-wordpress-image-optimization-plugins
https://www.mattcromwell.com/battle-of-the-image-compression-wordpress-plugins/
Conclusion
Optimising your images is a simple thing that you can do to cut down the bloat on your site and increase page speed.
Each website is different, and what works well for tradie websites may not work for photographer websites where detail matters. You need to test options and explore what works for you.
