Image compression shoot out.

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.

No Compression — Size, 1.6MB
Lightroom 80% compression — Size, 656KB
Lightroom 50% Compression — Size, 306KB
ImageOptim ‚ Size, 276KB
EWWW — Size, 225KB
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.

No Compression — Size, 2.1MB
Lightroom 80% Compression — Size, 1.5MB
Lightroom 50% Compression — Size, 800KB
ImageOptim ‚ Size, 701KB
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.

Composite, No Compression, Lightroom 80%, Lightroom 50%, ImageOptim, EWWW

Update, I decided to add a closer crop shot

No Compression — Size, 1.2MB
Lightroom 80% — Size, 491MB
Lightroom 50% — Size, 225MB
ImageOptim — Size, 199KB
EWWW — Size, 185KB
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.


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.