What are best export settings in Photoshop for web images without losing too much quality?

Do you prefer “Save for Web” or the Export As option in Photoshop?

By @bryant_6120

Note that Save for Web (legacy) is from ImageReady. It is very old (1998) and will never be updated. The size limit, which made sense back then, is 8192px per side.

Jane

@bryant_6120 

I am not aware of any definitive guides, I would of course be happy to read some.

You can easily do your own tests, which often mean more as they are tailored to your specifics.

I started with testing a ridicuously oversized logo (6000px x 978px), just solid colours and text, no gradations. All tests were 24 BIT RGB. Results from highest file size to smallest size on drive:

AVIF (Lossless 445 KB) was the highest file size, however, there are many options to explore.

PNG (348 KB) and JPEG (max quality 323 KB) were very similar in size for this example at highest quality for JPEG. JPEG would become smaller if one drops quality. PNG would become smaller if dropping to 8 BIT, as there are less than 256 unique colours in this image, quality would not suffer.

WebP (Lossless 170 KB) and (Lossy, max/100% quality 175 KB) was around half the size of PNG/JPEG. WebP would become smaller if one drops quality.

AVIF (Lossy, max/100% quality 145 KB) was the smallest size on drive, would become smaller if one drops quality.

A quick test at a more reasonable 800px wide and the file size ratio was roughly consistent.

Although there are new file formats and options, the basics remain the same:

* Resolution: pixel dimensions need to be appropriate for the use

* Image Content & File Format: Selecting the appropriate file format for the content (photos vs. logos for example)

* Browser Support: Knowing your audience, what browsers/versions are in use may limit file format selection