Image compression - what is the best way?

Question

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.

Answer 1

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.