Make it faster: reduce image size by 85% and improve your page speed

Have you ever been stuck in traffic?

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?

A few seconds faster can make a heck of a difference!
Get your copy of the 2017 Events List

Would you like to have the entire events list available in Excel? Or want to add the events to your calendar or on publish it on your website? You can! Just add your details below and we'll send all you need to you!

Want to add your event to the list? Submit your event here.

Gustavo Pelogia

About Gustavo Pelogia

Enthusiastic SEO, fanatic blogger and graduated journalist. Gustavo Pelogia lives in Dublin and is a Client Manager – Search & Analytics at Mediavest Ireland. He can talk about Seinfeld all day long.

  • Great article Gustavo, it’s really helpful.

    I have one question.

    Which tool is the best alternative to imagify?

    Kind regards,
    Filip

    • Gustavo Pelogia

      Hi Filip,

      Glad you found it helpful!

      For WordPress I’ve used WP Smush before as well, but never actually tested like I did above. If you want to improve a bit other aspects of page speed, check WP Rocket too. It’s paid but totally worth it!

  • Mithvin

    Wow, really great tools you have suggested to minimize the image size. Earlier I knew only step_1. Manually editing/ cropping the size of image in a bulk quantity is really a tough work. But now I will use the tools suggested by you. I hope, the tools will be useful to optimize website loading speed of my site “www.mithvin.com”

  • studiumcirclus

    If you’re gonna compress images you can also use various desktop tools like:

    • FileOptimizer (slow with moderate gains in compression) – free
    • PNG Gauntlet (pretty good for PNG images) – free

    There are also web-based tools, in my opinion the BEST one (by absolute miles) is https://kraken.io/ (Kraken.io) – which is really good AND really fast. The tool is free to use unless your images exceed certain file sizes, in which case you have to pay but the pricing is actually very reasonable and the darned thing works like lightning. I have not seen another image compressor work as well whilst simultaneously working as fast – PERIOD

    In order to get all the images from the client’s site you can simply FTP transfer all their image containing folders to your desktop. With your local copy you can then use some free windows tools like “Delete All Except” and “Remove Empty Directories” to ensure that only folders with image files remain (you don’t wanna run non-image files through image compression utilities as verifying and rejecting the bad files wastes processor cycles)

    If you don’t have FTP access you can use a tool like Screaming-Frog to find all the front-end facing URLs which are also image files (PNG, JPG, JPEG, GIF, TIFF, TGA, SVG and BMP being a few web render-able ones – though half of them you wouldn’t want to be using on the modern web). Once you have a list of image URLs you can clean them (remove all hash-anchor and parameter based extensions) and then de-dupe your list of image URLs.

    Following that you can use an HTTP batch-download tool like uGet (free) or HTTrack (also free) to bulk download ALL the images. My preference is for HTTrack as it is capable of replicating the folder structures just like an FTP client (try FileZilla – free) will. It’s a bit of a pain to set up and run though and also some sites don’t seem to work with it, so uGet is a good backup (your developer will just have to reconstruct all the folders and stuff ready for FTP bulk-transfer, or you can do it from the URL strings pretty easily in Windows file manager and MS Excel)

    My preferred methodology is:

    • Crawl site in SF (Screaming Frog is a paid tool but cheap and worth it)
    • Harvest all image URLs
    • Bulk download the images
    • Compress with FileOptimizer and then Kraken.io (with Kraken your usage is in disk-space e.g: you can do 2GB compression per month on one plan, so trying to whittle the file sizes down a bit before using Kraken is ideal it saves you money)
    • See if any of the images are obscenely big, like 4k by 4k pixels – verify if there’s a need for that!? Handle those one manually in Adobe PS CS5 (optimize baseline, decrease resolution whilst maintaining aspect ratio, set slightly lower quality etc)
    • Supply the images to your client to compare and contrast, if they’re happy then whack em up and regenerate (image affecting) caches

    Have seen some really good results with this methodology, hopefully others will too…

    I won’t go into the dynamic compression plugins as IMO, they are all iffy as f**k (don’t waste your time).

    If you are thinking of bulk compressing (minifying) CSS and JS documents, you can try:

    • Ajaxmin GUI – free I think
    • Caesium / Caesium PH – essentially free I seem to remember? There’s a never ending free trial or something
    • Prepos Minifier – paid

    And for video compression you can use stuff like:

    • ClipChamp – almost free but there is a paid version. Free version works for small video clips, which luckily means most header / web video images
    • Wondershare Video Converter (gives some nice MP4 compression options but it’s PAID)

    Thank you and goodnight

  • Hi Gustavo, Nice tips to compress images to improve page speed, but i have one question, After many too many compression image looks bad then it was at first. Want to know which tool is the best tool for compressing images without no more look change.

    • Hi Alex,

      Compressing will always change the quality a bit – The goal is to make this change on a level our eyes can see the difference. You should test which quality is good for you. Imagify has different compression levels, that’s a good test to do.

      Hope it helps!

      Gus

  • Very nice article! All the three points are excellent for image compression. A really great tool for image optimization, but I much prefer to step 1 to manually optimize.