Heavy images are like staying stuck in a traffic jam on the way home. You slowly move a few meters at the time and sometimes feel it’s never going to end, or at best you’ll get home very late – Just to jump on that same traffic again the next day. Optimising images are like driving that same road on a Sunday morning. Fast and free.
The commute problem could be solved by better public transport, more lanes, alternative ways to transport. Definitively not an easy job. Tackling the heavy images problem is simpler for one reason: in most cases, the internet doesn’t need high-quality images.
Before I jump into the actual steps and numbers on how to improve this, answer this question to yourself: have you ever uploaded images taken with your smartphone or sent by a professional photographer directly to a website? If yes, chances are that you’re letting your visitors stuck in traffic for no good reason.
Examples
Doing these steps, I managed to reduce the image size of the Airport Driving School homepage from 1.9MB to 666.8kb. This is their most important page and the heaviest page as well. Now images are 64% lighter. This means a much quicker website, less time waiting for a page to load and, not to forget, less internet bandwidth spent. The loading time decreased from 6.17 to 4.65 according to Pingdom Tools. It doesn’t solve the whole speed problem, but it’s a good step considering it took me a couple of minutes and without using any dev resource.
My second test was made on this blog (in Portuguese) about Holland, which I mainly use for testing. I reduced a screenshot from 1.3MB to 127kb (-90%) and an image from 2.0MB to 70kb (-96%), keeping a decent quality.
These are simple examples, but they can illustrate my case. It gets some more scale further in this article. If you wish to make these improvements on your website, keep reading.
Step 1: reducing original size
If you answered “yes” to the question above, here’s your solution: reduce the image size. You can go to any image editing software and just adjust it. A normal horizontal picture taken with an iPhone has 3200 px width. A header image, taking the whole width of a 13-inch screen computer would take less than 1300 px. So a picture taken with an iPhone and uploaded straight away, with no editing, is almost three times bigger.
You can use Photoshop, but basically, any other image editing software can help you here, as it’s a very simple task. Use Preview on Mac or a service online that allows you to change all sizes at once. Another simple software I like is Pixlr, a simpler and totally free Photoshop style software that runs on your browser.
Step 2: compress your image with TinyJpg.com
Take your image that has now a more appropriated size, drag and drop on this website called TinyJPG.com. In a matter of seconds, you’ll get a lighter version of your image to download. The new compressed image is barely distinguishable from the original.
According to the website, this is how it works: “Textures, patterns and colours are automatically identified. The encoder creates an optimally compressed JPEG file based on that information. The final result is compared with the original and fine-tuned. Unnecessary metadata is stripped as well”.
I like to use this as a solution for websites running on platforms other than WordPress, where the next step can’t be used.
Step 3: use a plugin to compress in scale
There are several plugins that can automate step two for you. The one I’ve been using at the moment is Imagify. This tool compresses every image on your website, informing the percentage saved and the image size. The free option gives 25MB of data compressed per month and only allows to optimise images with up 2MB.
Using images from the websites above and a couple others (final optimised images here), I tested two different scenarios:
- Five iPhone 6 pictures + MacBook Png screenshots
- Five pictures were taken with a semi-professional Sony camera
In both cases, I took the following steps:
- Original picture resized to 900px to fit in a blog post
- Compressed manually via TinyJpg.com
- Compressed automatically with Imagify (Ultra Optimisation)
For each image format (original, manually resized and TinyJpged), I uploaded the images and checked how much Imagify could compress automatically. The goal was to find out if I would have a gain doing the manual work or the plugin would do all the work for me.
Conclusions
In both cases, each step decreased the image size a little more, making the images lighter. The major win was always resizing the originals, usually between 1500-3000 px width. Just resizing is more valuable than letting the plugin compress the image. This seems logic and obvious, but in my experience is usually the step people care less about. A standard iPhone photo has 3200px width, 3.5 times bigger than the 900px the I needed.
In this first step managed to decrease image size up to 87%:
| Format | Original (px) | Original to 900px | Resized to 900px – Decrease |
| JPG1 (iPhone) | 591 | 109 | -81.55% |
| JPG2 (iPhone) | 1,800 | 259 | -85.61% |
| JPG3 (iPhone) | 2,000 | 250 | -87.50% |
| JPG4 (iPhone) | 1,500 | 213 | -85.80% |
| JPG5 (iPhone) | 1,000 | 221 | -77.90% |
| PNG1 (ScreenShot) | 1,300 | 566 | -56.46% |
| PNG2 (ScreenShot) | 1,400 | 557 | -60.21% |
| PNG3 (ScreenShot) | 1,600 | 624 | -61.00% |
| PNG4 (ScreenShot) | 711 | 275 | -61.32% |
| PNG5 (ScreenShot) | 1,100 | 508 | -53.82% |
Going further, in most cases, iPhone images and screenshots could be compressed in each step: resizing, compressing with TinyJpg and with Imagify. Each new step is considered on top of each other, the percentages are not cumulative.
| Format | Original (px) | Resized to 900px Decrease | +Imagify Decrease | 900px + TinyJpg + Imagify Decrease | Final Size (kb) |
| JPG1 (iPhone) | 591 | -81.55% | -24.77% | 0.00% | 83 |
| JPG2 (iPhone) | 1,800 | -85.61% | -53.67% | 0.00% | 76 |
| JPG3 (iPhone) | 2,000 | -87.50% | -56.80% | 0.00% | 70 |
| JPG4 (iPhone) | 1,500 | -85.80% | -59.15% | -47.56% | 43 |
| JPG5 (iPhone) | 1,000 | -77.90% | -64.25% | -52.33% | 41 |
| PNG1 (ScreenShot) | 1,300 | -56.46% | -81.27% | -12.41% | 127 |
| PNG2 (ScreenShot) | 1,400 | -60.21% | -80.97% | -18.11% | 104 |
| PNG3 (ScreenShot) | 1,600 | -61.00% | -81.89% | -7.43% | 137 |
| PNG4 (ScreenShot) | 711 | -61.32% | -85.45% | -20.00% | 44 |
| PNG5 (ScreenShot) | 1,100 | -53.82% | -84.06% | -8.33% | 99 |
Any of the Sony camera pictures didn’t earn an extra “final” compression from Imagify after going through TinyJpg.
But here is the trick: compressing with TinyJpg reduced them to a size that Imagify wouldn’t have achieved alone. If I had ignored TinyJpg, the images would stay the same size as the second column below:
| Format | 900px+Imagify Size in kb | 900px + TinyJpg Size in kb | Decrease |
| JPG1 (Sony) | 421 | 296 | -29.69% |
| JPG2 (Sony) | 461 | 271 | -41.21% |
| JPG3 (Sony) | 180 | 106 | -41.11% |
| JPG4 (Sony) | 258 | 245 | -5.04% |
| JPG5 (Sony) | 304 | 199 | -34.54% |
Final Thoughts
This is the type of problem is often overlooked because it seems a lot of trouble to end up having “the same” visualisation. Or because people don’t even know it is causing a performance issue.
You don’t need to take all the three steps, but you can combine two of them. Resizing images first, then compressing manually or automatically, if you’re running a website in WordPress.
Even if you just want to impress a client, this can be a low hanging fruit: run a speed measurement tool like GMetrix or capture your PageSpeed Insights score before and after. I got 22 points up by fixing one image.
 |  |
Think again about that time you stay stuck in traffic and how long a few waiting seconds feel on the internet. Would be nicer if both could be faster?
