1

What is the best way to compress images to satisfy Performance Review on Web Page Speed test on webpagetest.org.

Here's how I do it:

1) Save for Web in Photoshop from original PSD with quality set to 70

2) Run through JPEGmini (lossy)

3) Run through JPEGtran or JPEGcrush (loseless)

To my surprise webpagetest.org tells me there are still some bytes that can be saved by compressing my images. However no matter what technique I use I can't get them any smaller.

  • There is no 'best'. It all depends on the image. – DA01 May 23 '14 at 3:34
  • care to elaborate? I am kind of noob in this – OutFall May 23 '14 at 15:53
  • Answer added. Hope it helps! – DA01 May 23 '14 at 16:01
  • Realize any "page speed" test is unreliable. You can't test for a users ISP connection. Just because your connection to the test site is one particular speed, there's no way to know what any other connection will test at. Limiting HTTP requests will do far more to help than any "page speed" test. – Scott May 23 '14 at 16:08
  • Why do you assume webpagetest.org is competent enough to make such recommendations? – user13497 Jul 31 '14 at 0:11
3

There is no 'best' way to universally compress images, because the best compression method will vary for each individual image.

Broadly speaking, for web images:

  • is it a photo? Use JPG compression.
  • is it flat art? Use PNG compression.
  • can you use an SVG instead? Do that.

But as for which JPG compression tool to use or which PNG compression tool to use, there is on 'best' as each tool will be better for particular images than another may be.

That's why tools like ImageOptim use several compression methods. They take your image, run it through each one individually, and then figure out which produces the smallest image. But to figure that out, it has to go through the process of trial-and-error for every single image.

Other options to consider:

  • for your icons, be sure to use sprite files. One sprite file is typically smaller in file size than many individual files. Plus, there only needs to be one HTTP request--which is your biggest savings in download speeds.
  • large background images and large photos can often be highly compressed via JPG and still look decent. As they are background images, they likely don't need to be as sharp anyways.
  • SVG (vector images) are typically the smallest file size. Use these when you can. Alas, not all browsers support them yet.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.