Optimizing JPEG images – save 20% in file size

Optimizing your image file size is one of the low hanging fruits when it comes to page speed optimization for your website.

My current workflow for JPEGs looks something like this:

  • ‘Save for Web’ in Photoshop with 60% quality
  • Run through ImageOptim to reduce file size

Yesterday, Marc Thiele asked on Twitter:

In the unfolding discussion some folks stated that they use both JPEGmini and ImageOptim when it comes to JPEGs and that this would reduce the file size even more. Fortunately I had to add pictures to 50 new products today. Every product has three pictures from different angles, so this sums it up to 150 images in various sizes, 900 images in total, all JPEG.
So I gave it a try and here are the results (I bought JPEGmini for this test as 20 images on the lite version might not be enough to get reliable results, still, your mileage may vary).

‘Save for Web’

With just using ‘Save for Web’ the images had a total size of 84MB. Quite heavy.
photoshop

ImageOptim

Running these through ImageOptim saved nearly 10% and lowered the total size to 75.7MB.
imageoptim

JPEGmini

Using the ‘Save for Web’ images again (not touched by ImageOptim yet) results in 74.2MB.
jpegmini

ImageOptim after JPEGmini

Now adding another run of ImageOptim to the images already optimized by JPEGmini lowers the total size to 66.9MB. Thats more than 20% in file size saved without compromising image quality.
jpegmini-imageoptim

As far as I can tell it is not necessary to run the tools multiple times. At least in ImageOptim it is obvious that the latest version does this by itself. And I wasn’t able to spot any major changes on a second and third run with JPEGmini.

To give you the ability to compare the results, below are two images. The left one is the image just saved from Photoshop, the right one is the image after the whole optimization process.
photographer_ps photographer_optimized

I'm a Web Developer based in Mainz/Germany, working for WIBROS as Lead Developer. I love the Internet, Baseball, Softball, beer and the color orange. I used to drink too much coffee.

Comments (5) Write a comment

  1. Pingback: Ein CDN für den modified-Shop – xtcModified on steroids | 50North

  2. Hallo Herr Slovig,

    ich versuche gerade unseren Shop etwas schneller zu machen und habe Ihre Tipps zur Bildoptimierung ausprobiert. Funktioniert wunderbar und nach etwa 1 Woche haben sich auch die Seiten-Ladezeiten wirklich verbessert. Schön langsam stoße ich aber an meine Grenzen und mit der Thematik “Time to first byte” komme ich nicht wirklich weiter, weil mir einfach das Fachwissen fehlt. Momentan liegt die Zeit “Time to first byte” bei ca. 800 ms. Ist das schon das Ende der Fahnenstange oder lässt sich da noch was machen bei einem xt-commerce-Shop?

    Mit freundlichem Gruß

    Peter Schamberger

    Reply

    • Das geht auf jeden Fall besser, hängt aber in nicht unerheblichem Maße vom Server und dessen Konfiguration ab.

      Reply

  3. Seit dem Google immer mehr Wert auf die Bild-Komprimierung legt, schaue ich auch immer nach guten Tools um die Bild schnell und einfach zu komprimieren. Vielen Dank für die guten Beitrag.

    Reply

  4. Hallo Matthias,

    Das Tool JPEGmini kannte ich bis anhin noch gar nicht. Ich werde in Zukunft aber auch weiterhin bei der kostenlose Online Version von https://www.iloveimg.com/ bleiben.

    Meine Routine sieht da wie folgt aus: Bild(er) zuerst mit dem Resize Tool auf die geeignete Größe bringen und anschließend einmal durch den Komprimierer jagen.

    Liebe Grüsse
    Nicolas Grimm

    Reply

Leave a Reply

Required fields are marked *.