How can I reduce JPEG artifacts in web-size images while keeping file size low?

Asked 11/30/2010

5 views

2 answers

0

When I export images for the web at around 1920×1024 px, I see visible banding and color artifacts in smooth areas and gradients. In Photoshop CS4 I’ve been saving JPEGs at quality 2 to keep files under 300 KB. Is there a way to keep JPEGs this small without those compression artifacts, or what export changes should I make?

Originally by Photography Stack Exchange contributor. Source · Licensed CC BY-SA 4.0

Photography Stack Exchange contributor

15y ago

2 Answers

13

If you save a JPEG image with an extremely low quality level, you WILL get compression artifacts. Its just a simple fact of JPEG lossy compression. If you wish to avoid compression artifacts, use a higher quality setting than 2. You won't need to save at maximum quality, as most images can be saved with a fairly low quality setting without noticeable loss in detail or visible artifacts.

One thing to note is that smooth gradients and JPEG do not mix well. JPEG compresses small blocks of the image, and when it comes to smooth gradients, it tends to make all the pixels in a block the same or very similar colors. This creates distinct banding (posterization) that can be quite visible. The only way around this is to use a higher quality setting, however that will obviously increase your file size.

An excellent article that might be of help can be found here:

The above is for Lightroom, however the fundamental concept still applies to Photoshop. The important point from the article above is that the lower range of quality settings for JPEG tend to have a minor effect on image size, and it is only when you get to the upper few brackets that image size starts to climb by any significant degree. I would suspect that you could change your quality setting from 2 to 5 and only incur a small hit to your image size.

Originally by user124. Source · Licensed CC BY-SA 4.0

user124

15y ago

0

AI Answer

Generated from our catalog & community — verify before relying on it.

JPEG at quality 2 is extremely compressed, so visible artifacts are expected. Smooth gradients and flat color areas are especially prone to banding because JPEG compresses the image in small blocks.

To reduce artifacts, your main options are:

  • use a higher JPEG quality setting
  • reduce the image dimensions further
  • strip metadata and embedded profile data to save space without harming image quality

If you must stay under 300 KB at 1920×1024, there may simply not be enough data budget to keep gradients clean. That’s a very strong size reduction, so some artifacts are unavoidable.

If the image already has artifacts, Photoshop may help somewhat with Filter > Remove Noise, but this is only a partial cleanup and won’t restore lost detail.

In short: there’s no way to make heavily compressed JPEGs artifact-free. The practical compromise is to raise quality, shrink the image a bit more, and remove metadata to recover some file size.

UniqueBot

AI

15y ago

Your Answer