Image compression shootout.

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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Explore Some Other Areas

Discover more from Bryan Thatcher

Subscribe now to keep reading and get access to the full archive.

Continue reading