Optimizing images: Resize or optimize first?

Question

I want to optimize images for web. I have a tool for resizing images (Photoshop) and a tool for optimizing images (ImageOptim).

What would be the best order that results in a minimal image file size with minimal quality loss?

Answer 1

I optimise images for web almost everyday.

Optimisation should always be the last step. Why?

• Photoshop adds metadata when exporting files even if you optimise the source file. So you have to process the final file again.
• whenever you resize an image you're essentially creating a new file. The color table might change, the pixel color at a specific coordinate is not necessarily the same as in the original. The optimisation done for the original won't be passed down to the resized image. That file will need to be optimised again.

For minimal quality loss don't enable lossy minification in ImageOptim so the image doesn't lose too much quality. Keep the JPEG/PNG/GIF quality slider on 100% so the images don't receive any compression (which would affect quality). Personally I keep JPEG quality to 97%, the quality drop is not noticeable (for my purposes).

• Enable Strip PNG metadata and Strip JPEG metadata, that reduces file size and doesn't affect the quality.

• Move the Optimisation level slider towards the Insane direction. That will slow down the optimisation process considerably, so you might have to compromise.

Answer 2

My two cents.

I must say that I was a little obsessed with the topic, but not that much anymore.

I do not use "third-party" tools for optimizing file weight, I do not feel it is really necessary because you already have Ps.

I. A test method

Let me spam you with an old test I did several years ago. It is in Spanish, please use google translate for now. https://otake.com.mx/Apuntes/PruebasDeCompresion/

What I want you to see is a way to actually analyze data loss.

Take your original, and paste it on top of the compressed version and choose difference as blending mode.

Those tests are done with ancient versions of Ps and PhotoPaint. And still, I got a decent result compressing at 10% compared to an uncompressed file.

II. Compression

Jpg has several ways to compress files. One is called chroma subsampling. Take a look here. https://en.wikipedia.org/wiki/Chroma_subsampling

The point is that according to my tests Ps uses the best quality one which is 4:4:4.

Some tests should be done to these third-party compression tools, but most likely they are using a 4:2:2 subsampling or even smaller ones. Besides dropping the color profile and some other data, possibly including some copyright metadata you could have.

Some day I will complete and modernize that paper, including a graph compression vs filesize and data loss. (Yes, I am still a little obsessed with the topic)

III. Make your own test

Make your own test and decide.

There is no such thing as the "best option", only the best option for you.

If you are ok with the file size, and if you actually can see the compression artifacts and you are ok with them, then that is the best option for you.

Make a series of compressed files:

1. Open an uncompressed image and export it with some settings. Put a proper file name, for example, Test-100Quality.jpg

2. Repeat with the parameters you want, 90, 80, 70...

3. Compare them and decide.

IV. Resize first

a. Resize with different methods and test them. Ps have one that is a good one, Bicubic Sharper.

b. If you want you could add some sharpening.

c. Then save with the compression level you already decided.

The compression needs to actually analyze the specific arrangement of pixels. So it needs to be done after any editing, andy resampling, any sharpening, any adjustment.

If you still want to optimize with a third-party tool, then save the resampled and sharpened image with a "maximum quality" setting in the program that you use for resampling and then let the other app decide.