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

[bryant_6120]

Hi everyone,

I often need to export high-resolution images (mainly product and lifestyle photos) for websites, but sometimes the file size is too heavy and slows down page loading.

What are the best export settings (JPG vs PNG vs WebP) for keeping good image quality while reducing size?

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

Would love to hear your recommendations

[Stephen Marsh]

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

[Stephen Marsh]

@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.

[jane-e]

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

[D Fosse]

I'd be happy to say goodbye to Save For Web - if they would only finish Export and fix the ancient bugs and shortcomings. But Export seems to have been put on ice indefinitely. Nothing has been done for years. So I still use Save For Web.