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:
This is what I saved people to download from my sites so far using JPEGmini. Are there better ways compressing JPGs? pic.twitter.com/f84eqhBEV6
— marc thiele (@marcthiele) August 27, 2014
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.
ImageOptim
Running these through ImageOptim saved nearly 10% and lowered the total size to 75.7MB.
JPEGmini
Using the ‘Save for Web’ images again (not touched by ImageOptim yet) results in 74.2MB.
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.
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.
Pingback: Ein CDN für den modified-Shop – xtcModified on steroids | 50North
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
Das geht auf jeden Fall besser, hängt aber in nicht unerheblichem Maße vom Server und dessen Konfiguration ab.
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.
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