To reduce website load time, you need to compress your images. We test Imagify against Photoshop to assess image quality & compression with surprising results!
The number one cause of slow loading websites is fat, uncompressed images. In a previous article, I talked about ways you can compress images to still make them look the same, but not be as heavy.
This is great when you are the only person looking after your website and you have total control, but what happens when you have a stack of people uploading photos or if you are not all that confident with a multi-step process?
But what is image compression anyway?
Compression is where you convert an image file so that it takes up less space. The level and type of compression you use give you different image results – sometimes you can’t notice the difference, sometimes the image may look blurry or pixelated.
Think of compression in the same way that you do a bandage. If you are injured, there are different types of bandages. The ones that are a bit stretchy are called compression bandages.
If you loosely wind a compression bandage around an injury site on your arm, then your arm looks the same but it doesn’t do all that much good in fixing the injury.
If you wrap the bandage correctly on your arm, your arm looks smaller, and the injury is helped to stabilise and heal. If you wrap the bandage too tightly, then you cut off circulation, and your arm gets sore and drops off.
Same bandage – different levels of compression – different results.
How is image compression different from resizing an image?
With websites, we put images in certain locations and want them to display at a specific size. What many people do is upload a photo of massive dimensions and then let the website elves magically resize it to show the size you want when your website loads.
How would that work in the real world? Well, let’s say our magic elves work in the Department of Transport and add the photos to driver’s licenses. The problem is that the only photo of you that they have is the size of a wall in a room. They stick this massive photo on your license and assign an elf to travel along with your licence in your wallet.
Every time you pull out your licence to show someone, your magic elf springs into action. They take down the massive wall-sized image and race to the nearest photocopier. They reduce the image size to 1/100ths of the original size, grab their scissors and cut out just your head in the image, whack a dollop of glue on the back and stick it on your driver’s license. When you put the license back in your wallet, it returns to the wall-sized size.
Now your elves are pretty speedy, but all that photocopying, cutting and gluing still takes a bit of time.
Spare your elves!
When uploading an image to your website, try to make it the right size for where it is going to be displayed by resizing it BEFORE you upload it.
Sizing is different from compression. What if the image that your elves were trying to use was made up of bits of macaroni stuck to a board? Macaroni is much thicker and heavier than a simple painting.
Compression reduces the fatness of your image. It does nothing about the dimensions of your image.
Size is the dimensions of your image. Compression is the fatness of your photo. You need to tackle both for the fastest load time.
What is Imagify?
Imagify is an easier way to compress your images. You can either compress your images manually online one at a time, or you can install a plugin into your WordPress website and bulk compress historical images as well as compress all new images to your site.
Imagify is owned and made by the same team that created WP Rocket – my favourite caching plugin, so I figured out of all of the image compression companies on the market they were worth testing out.
There are pros and cons of using a plugin to resize images. My colleague MaAnna Stephenson over at BlogAid has a brilliant summary of the issues relating to bulk resizing on your website. You can’t beat correctly sizing and compressing images off your site, but that doesn’t work for all clients.
What Does Imagify Do?
Imagify compresses JPGs, PNGs, GIFs and PDFs.
There are three different levels of compression available:
- Normal
- Aggressive
- Ultra
Normal Compression gives you minimal visible change to your image but still reduces the size of your image. It is known as lossless compression.
Aggressive Compression slightly reduces the image quality but gives you a huge compression boost.
Ultra-Compression gives you maximum compression but has more significant image impact.
How Much Does Imagify Cost?
There are a number of plans available.
The free plan gives you 25MB initially and 25MB per month after that. The free plan will cover 90% of small business websites, so start there.
For developers or active bloggers, plans start from $4.99US per month for 1GB of data a month. There are larger plans if needed.
Imagify Features
Imagify compresses and swaps out your old image on your site (without renaming it) and stores the original image on your server in wp-content/uploads/backup folder if you have ticked the back-up option. Remember, that storage on hosting costs $, so consider that when you tick the back-up feature.
If you are unhappy with the quality of the image, you can simply click “Restore Original” in your media folder, and it will swap out the compressed image and put the original one back.
The Test
I first started by running Imagify through one massive website, with standard compression. The results were impressive so I decided to dig a bit deeper to test all the features.
For the detailed test, I started with a whopping great photo and ran it through Photoshop and then Imagify.
The photo was initially 4436px x 5910 px and 5.22MB in size. It was the stuff of website nightmares!
Photoshop Results – The Baseline Comparison:
Here are the results for the same image resized to 510px x 679px and then compressed.
Resized With No Compression – 130kb
Resized – Exported for Web – High Resolution – 62.1kb
Resized – Exported for Web – Medium Resolution – 31.8kb
Resized – Exported for Web – Low Resolution – 20.5kb
Imagify Comparison Results:
I then ran Imagify through its paces with a number of different scenarios to see which would give the best image results.
- Using the original photo and resizing it in Imagify – With EXIF and No EXIF
- Uploading the photo that had been resized in Photoshop – With EXIF and No EXIF
What is EXIF?
This is camera data that stores data about the image. EXIF data can contain information including colour profile information, so sometimes removing it can affect the colour output of the image.
Why so many scenarios?
Well, my first results using Imagify to resize and compress were seriously underwhelming. In fact, the images sucked (as you can see below). I wanted to see if it was possible that one part of their process was causing the issue, so testing a range of variables to try and give them the best possible outcome.
Standard Compression
Resized With Imagify – Standard Compression – EXIF – 124kb
Resized With Imagify – Standard Compression – No EXIF – 124kb
Resized With Photoshop – Standard Compression – EXIF 125kb
Resized With Photoshop – Standard Compression – No EXIF 103kb
Aggressive Compression
Resized With Imagify – Aggressive Compression – EXIF 85.1kb
Resized With Imagify – Aggressive Compression – No EXIF 85.1kb
Resized With Photoshop – Aggressive Compression – EXIF 97.8kb
Resized With Photoshop – Aggressive Compression – No EXIF 76.2kb
Ultra Compression
Resized With Imagify – Ultra Compression – EXIF 73.6kb
Resized With Imagify – Ultra Compression – No EXIF 73.6kb
Resized With Photoshop – Ultra Compression – EXIF 97.8kb
Resized With Photoshop – Ultra Compression – No EXIF 50.1kb
All of the images in a gallery
Click through to see the difference between the images.
Results Discussion
The outcomes were super clear and obvious. Imagify works really well to compress your images without loss of quality as long as you do the following:
- Don’t use the resize function. Only use Imagify to compress. Resize your images elsewhere first and upload the resized images.
- Always enable EXIF on photos to get more consistent colour to your original.
- Go with Aggressive. Visually, there is very little difference between Standard and Aggressive compression. Go with Aggressive as your default rather than standard.
A Few More Imagify Quirks
Imagify does have a few additional quirks to be aware of.
Error Messages
Every now and again you will get an error message if you are doing a bulk compression. This is often due to your server having conniptions. Just pop back to your media file and either press the compress button next to the image or find where there may have been a problem compressing a thumbnail and click that.
Time
Bulk compressing images via the app takes time. I tested it on two different large sites with 1000+ images, and it took a few hours to run.
Run this at a time where traffic is low on your site and keep an eye on server impacts.
Conclusion
Imagify is definitely worth testing out for your website to shave off a few more milliseconds of load time. I will be using it with my clients that for whatever reason can’t do the preferred off-site resize/recompress option.
Just make sure you get the right settings, and you should get decent results without too much loss of image quality.
