Image compression shootout.

06/18/2018
Bryan Thatcher

My site has always been very image heavy, well that is what I do. The downside to that is your site becomes a bit slower, especially when viewing on mobile. So instead of making the images small on the site I started looking into better compression methods or methodologies. What I did was export from Lightroom as a resized jpg, I always resize to 2000px on the long edge, the Lightroom sample was set to 80% quality and 50% quality—trying to match the other compression engines. I then exported a 90% quality for testing (EWWW has file max file size) with the other methods. The other tests were done using ImageOptim and EWWW Image.

Bryan Thatcher BRT3540 no compression
No Compression — Size, 1.6MB
Bryan Thatcher BRT3540 Lightroom
Lightroom 80% compression — Size, 656KB
Bryan Thatcher BRT3540 Lightroom 50
Lightroom 50% Compression — Size, 306KB
Bryan Thatcher BRT3540 ImageOptim
ImageOptim ‚ Size, 276KB
Bryan Thatcher BRT3540 EWWW
EWWW — Size, 225KB
Bryan Thatcher BRT3540 composite
Composite, No Compression, Lightroom 80%, Lightroom 50%, ImageOptim, EWWW

And a test with a more complex image, what I mean by complex is when you jpg an image like the image above with the smooth blue sky will result in a small file size than the same size image with a busy background and un-uniform patterns in clothing, like below.

Bryan Thatcher BRT2099 no compression
No Compression — Size, 2.1MB
Bryan Thatcher BRT2099 Lightroom 80
Lightroom 80% Compression — Size, 1.5MB
Bryan Thatcher BRT2099 Lightroom 50
Lightroom 50% Compression — Size, 800KB
Bryan Thatcher BRT2099 imageoptim
ImageOptim ‚ Size, 701KB
Bryan Thatcher BRT2099 EWWW
EWWW — Size, 851KB

I left them in the same order as the first even though ImageOptim and Lightroom 50% files resulted in smaller file sizes.

Bryan Thatcher BRT2099 composite
Composite, No Compression, Lightroom 80%, Lightroom 50%, ImageOptim, EWWW

Update, I decided to add a closer crop shot

Bryan Thatcher BRT4049 no compression
No Compression — Size, 1.2MB
Bryan Thatcher BRT4049 Lightroom 80
Lightroom 80% — Size, 491MB
Bryan Thatcher BRT4049 Lightroom 50
Lightroom 50% — Size, 225MB
Bryan Thatcher BRT4049 ImageOptim
ImageOptim — Size, 199KB
Bryan Thatcher BRT4049 EWWW
EWWW — Size, 185KB
bryan thatcher brt4049 composite
Composite, No Compression, Lightroom 80%, Lightroom 50%, ImageOptim, EWWW

Interesting that is this sample I see a noticeable color shift in the two right hand images, but the artifacts are not as noticeable as the first sample. Other than the color shifts these images look pretty good.


The composites were combined in Photoshop and saved as jpgs with 0 compression in order not to add any other artifacts to the images.

You can see the full resolution images if you click the images.

Conclusion

ImageOptim and EWWW are an extra step in processing images, The Lightroom 50% compression has slightly more artifacts than ImageOptim, and it seems the EWWW is doing something to blur the artifacts these only become visibly distracting at 200% or above, and barely noticeable at 100% (look at the hair flyaways in the first set of images). In the second image I see artifacts in their skin especially in the Lightroom 50% and her eyelashes begin to wash away. I thought I would see more in the fishnet stocking, but it is pretty clean across all of them

So, I am going to continue with ImageOptim over a 50% Lightroom jpg, the file sizes are similar but the quality is far better. I am happy with the results of having images that are roughly half the size and still good quality.

Thanks to  SuzyMaenyc for letting me use her in the first set and to Daniel Chimowitz and SuzyMaenyc in the second set.

Copyright © 2007 – 2023 Bryan Thatcher, All Rights Reserved
chevron-down linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram