Home > Technical & Creative Skills > Design - Imagery, Banners & Landers

5 Image Compressors Side by Side Comparison (2017) (8)


02-16-2017 09:13 AM #1 erikgyepes (Moderator)
5 Image Compressors Side by Side Comparison (2017)


Many times I had to ask myself: Which Image Compressor Tool is the Best?

Is it really the one that I'm always using because its too comfortable and easy to use? Or maybe there is something better? Who knows?!

If I just could see side by side which one produces the best results ... or at least ... acceptable results + OK usage?

So the time has come...

Which image compression tool is doing the best job in 2017?

What is an image compression?

First things first!

Let’s start with the theory: What actually all this image compression thing is about?

Image compression is the process of encoding or converting an image file in such a way that it consumes less space than the original file.

It is a type of compression technique that reduces the size of an image file without affecting or degrading its quality to a greater extent.
Source: Techopedia

Image compression may be lossy or lossless. Lossless compression is preferred for archival purposes and often for medical imaging, technical drawings, clip art, or comics. Lossy compression methods, especially when used at low bit rates, introduce compression artifacts. Lossy methods are especially suitable for natural images such as photographs in applications where minor (sometimes imperceptible) loss of fidelity is acceptable to achieve a substantial reduction in bit rate. Lossy compression that produces negligible differences may be called visually lossless.
Source: Wikipedia

Why do I need to compress my images on landing pages?

The formula is pretty simple:

Smaller image size = faster loading = $$$

Okay, that is maybe too simplified.

But having smallest possible image size (and still decent quality of image) is a must, especially on mobile!

I cannot believe how many times I saw images in other people landing pages that had 500kb or more!

Just running them through image compression tool could save them more than 50% of the image size!

Tested image compressors:

Honestly, I was pretty surprised how many tools are around on the market these days.

When I first heard about image compression there were 1 or 2 tools and that was it.

These days there are basically tens of different tools which more or less offer the same functionality.

In my testing I focused on the most popular ones, here is the list:


My approach to find landing pages for testing:

To get the most real world example possible I simply went to my favourite spy tool of choice: Adplexity.

I found 3 landing pages, so we have 1 from each of the most typical mobile verticals:


I don't want to out or hurt anyones campaign, so I’m not including a link to the landing pages, but here is a screenshot of the pages I tested to get you some ideas:



How I’m going to test:

When I first started my tests I faced few problems, so I'm going to point them out and "make my life a bit easier":

PROBLEM #1
Not all tools support all formats. The most common formats are JPEG, PNG and GIF. Only Kraken.io and Compressor.io supports all of these file types.

PROBLEM #2
Not all tools support batch image processing. This really slows down your workflow! I personally really prefer tools that allow me to simply drag and drop image files and download the compressed images in basically 2 clicks.

SOLUTION: SMALL CHEAT
To simplify my tests and calculations I cheated by removing the .gif files from the landing pages as not all image compressors supports them.

I should also note that I'm going to use the LOSSY compression (which is anyway the default and works well for our landing pages needs).

Results and conclusion:

So finally we are getting to the part which is the main reason why you are reading this post.

I have both visual and tabular representation of results as follows:

GRAPH: Compressed Image Size (KB) / the shorter, the better


In this chart you can see the final image sizes of all 3 verticals combined (each color of bar represents different vertical).

GRAPH: Saved Image Size in (%) / the longer, the better:


Same as above, just represented in percentage.
Note: For ImageOptim there is a missing bar - for some reason image from the Antivirus landing page remained the same size as before compression.

TABLE: All of the above, but this time in table


The clear winner here for each of the verticals is Compressor.io (note that I omitted GIFs) which is pretty impressive! Compressor.io is also one of the first image compressors I used few years ago.

One problem I got it with though is that Compressor.io doesn't have batch image processing. So in case of the "sweepstakes" landing page I had to drag and drop and download 20 images one by one!

On the other side Optimizilla is getting very close to Compressor.io and finishes on 2nd position! Good news is that Optimizilla has batch image processing, yeey! Careful as its limited up to 20 images at one time!

ImageOptim is 3rd - interesting about this tool is that it automatically converts PNGs into JPEGs, so be careful once you do compression as you will have to change image names in your landing page (= adds up some more work for us)

My favourite tool of choice: Kraken.io, ended 4th. This fact surprised and disappointed me at the same time. I settled down to this tool because it has easy to use UI with drag and drop interface, easy downloads of zipped images or option to save them to Dropbox + many other advanced features such as API.

TinyJPG/TinyPNG (which are both the same tool) ended the last, they also have batch image processing, but with the poor results they gave there is nothing much to say about it.

TLDR; RESULTS

Compressor.io did the best job, but doesn't have batch image processing.

Optimizilla ended 2nd best and has batch image processing, so you should give it a try!

If you are into automation and need some other advanced functions like APIs OR need great user interface try Kraken.io. Even its not the winner in this batch it can cut 40% to 67% of image fat!

.
.
.

What about you guys?

Which tool is your favourite and why?


02-16-2017 09:19 AM #2 caurmen (Administrator)

Nice!

For anyone who has heard me going on about MozJPG in the past - ImageOptim uses MozJPG (although it's a rather minimal and buggy usage). Impressive that other compression tools have now caught up to and exceeded it in just a couple of years!

What were the image formats for the three test images?

BTW, I think the legend on the last graph may be wrong? Looks like longer, rather than shorter, is better there.

Very useful post, and I think I'll be pointing people to it a lot in years to come - thanks.


02-16-2017 09:37 AM #3 erikgyepes (Moderator)

Hey @caurmen,

There were mostly JPEGs and PNGs (as I pointed out I cheated a bit by excluding GIFs as not all these tools supported them, the results could be different with GIFs included though)

Yes, I already fixed the second legend, my fault, thanks!


02-16-2017 10:07 AM #4 vortex (Senior Moderator)

Useful and interesting post - thanks Erik! Both recommended services are now bookmarked.

What did you use to generate those very nice-looking charts? Looks like something I'd want to use in my future posts too!



Amy


02-16-2017 10:17 AM #5 erikgyepes (Moderator)

Thank you Amy!

So you like my charts?

Well, I used the good old Numbers on my Mac.

Quick tip on how to extract graphs from Numbers: Click on graph and CMD+C and then CMD+V in Preview app ... boom ... a beautiful image ready to save!

Erik


02-17-2017 07:42 AM #6 osmiumman (Member)

I really appreciate your case study Erik, but I'd take the results with a grain of salt.

The problem is that you partly used jpg files, where the compression is lossy. The lower the quality setting, the smaller the image size will be. But you cannot compare the size of a jpg image with 80% quality settings to one with 90%. Of course the 80% one will be smaller, but the quality will also be lower.

With png images, the compression is done so that you cannot see any differences (loseless compression, more or less). And then tinypng works best, at least from the tests I did:
Original size: 157958
Compressor: 31850
Optimizilla: 30159
Tinypng: 28543

In the end, differences are very small. So it's not so important which compressor to use, but to use one.


02-17-2017 10:48 AM #7 erikgyepes (Moderator)

Hey @osmiumman,

Thank you very much for your input!

I'm not saying that this is some "scientifically valid data", it's rather a quick and dirty comparison.

The results would be different from landing page to landing page as every landing page has different mixture of images and formats.

That why I took those 3 from mixed verticals to have at least some variability in there.

What is a good call though and I should emphasise that in my original post: IT IS IMPORTANT TO USE ANY COMPRESSOR, RATHER THAN NONE AT ALL.

Thank you again for sharing your results!


02-17-2017 11:46 AM #8 cmdeal (Veteran Member)

Sweet!


Home > Technical & Creative Skills > Design - Imagery, Banners & Landers