0

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?

  • 2
    I guess resize and then optimize. Otherwise you'll be exporting without optimization and will have to optimize again – Sergey Kritskiy Nov 21 '19 at 7:50
  • Well I'll do both steps anyway, I'm just curious what order would generate the smallest image with the least quality loss – Gerlof Leuhof Nov 22 '19 at 12:55
3
+50

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.

  • Thank you for answer on the order. Don't you think it's possible to get away with setting the slider to a lower amount? Would 'normal' people notice the difference? – Gerlof Leuhof Nov 25 '19 at 10:54
  • That's why I said move towards 'Insane', not set at. personally I moved it just a notch to the right of 'normal', it's enough for my purposes. Very few people consciously notice these optimisations, it's mostly for server space / download speed (I use these images for mobile web pages). – Luciano Nov 25 '19 at 11:00
  • I meant the quality slider, not the optimization level slider. – Gerlof Leuhof Nov 25 '19 at 11:14
  • Quality: it's subjective. I notice the difference, so I slide as far as I'm comfortable with the image degradation. If I compress too much I also get complaints from clients. Depending on the image you could go as low as 50-60%, but I don't spend so much time optimising images individually, there's no extra benefit to me. – Luciano Nov 25 '19 at 11:29
1

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.

  • Besides compression, there's also metadata that doesn't affect image quality but increases the file size. You can't save Photoshop files without metadata. – Luciano Nov 26 '19 at 9:56

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.