Image compression shootout.

June 18, 2018|0 comments|Picture of the day, Tech

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.