JPEG Artifacts: Blocking, Banding, Ringing and How to Avoid Them

Where artifacts come from

Artifacts are visible errors that lossy compression introduces. A JPEG encoder divides the picture into small blocks, usually 8 by 8 pixels, converts each block into a description of its frequencies and then rounds the values, coarsely for detail that the eye notices less. The rounding is where information is lost, and when it is too coarse, the errors become visible.

Different artifacts appear in different pictures, and the same quality setting can look fine on one image and poor on another. The kind of image, the quality and the number of times the file was saved all play a part.

Blocking

Blocking is the most famous artifact. At low quality, the blocks of the encoder become visible as small squares, especially in smooth areas such as a sky or skin, where neighboring blocks get slightly different average colors. The effect is strongest when the quality is below about 50, and it also appears when a low-quality picture is enlarged.

The fix is a higher quality, or a smaller picture. Reducing the pixel dimensions makes each block cover more of the scene and gives the encoder more data per detail, which often removes blocking at the same file size.

Ringing and mosquito noise

Ringing shows up as faint ripples or halos around sharp edges, such as the outline of a letter or a roof against the sky. A related effect, mosquito noise, is a fuzzy shimmer around edges and in textured areas. They happen because sharp edges contain a lot of high-frequency information, which is rounded off roughly at low qualities.

These artifacts are the main reason why JPEG is poor for text and line drawings. For such content, use a lossless format or a high quality, and avoid saving the file repeatedly.

Banding

Banding appears in smooth gradients, such as a sunset, a studio background or a blue sky, as visible steps of color instead of a continuous change. It happens when the encoder rounds neighboring colors to the same value, and it is also related to the limited number of colors in a standard 8-bit image. Dark areas are the most affected.

A higher quality helps a little. A small amount of noise or grain added to the source before compression can hide banding, since it breaks up the steps. AVIF often handles gradients better at the same size, while lossy WebP can show banding in dark, smooth areas as well, so compare the result on your own picture rather than assuming a newer format is smoother.

Chroma bleeding

Most JPEG encoders store color at a lower resolution than brightness, which is called chroma subsampling. It saves space and is rarely noticed in photographs, but it can make thin colored lines, such as red text on a white background, look blurred or surrounded by a colored smear. This is called chroma bleeding.

For graphics with saturated, thin lines, choose PNG or lossless WebP, or accept a higher quality. Browsers do not let a page change the subsampling of their built-in encoder, so this setting is beyond the control of an in-browser tool.

Generation loss

Artifacts add up when a file is compressed repeatedly. Each time a lossy file is opened, edited and saved again, the encoder rounds the values again, and the old artifacts are treated as real detail. After many generations, blocking and color shifts become obvious, as you can see on pictures that have been shared and re-saved many times.

Keep the original, and produce every compressed copy from it exactly once.

How to look for artifacts

Zoom to 100 percent and look at smooth areas for blocks and banding, at edges and text for halos, and at dark parts for blotches. Then look at the picture at the size where it will be used, because many artifacts that are visible when zoomed in cannot be seen at normal size. Compare against the original side by side.

The compressor shows a small thumbnail of each result. Download the file and open it at full size to judge the quality properly before you apply the setting to a whole batch.

Avoiding them in practice

Use a quality of at least 70 to 75 for photos and higher for pictures with smooth gradients or text. Resize the image to the display size before lowering quality further. Choose a lossless format for graphics. Compress once, from the original. And if a particular picture shows artifacts at a quality that works for others, raise the quality for that picture alone.

A few minutes spent on settings for a representative image saves you from re-doing a whole batch later.

When artifacts are acceptable

Not every artifact matters. A small thumbnail in a list, a blurred background image or a picture that is only shown for a moment can be compressed hard, because the viewer will never see the detail. The aim is the smallest file that looks right at the size where it is used, not a perfect image at any size.

The opposite also holds: hero images, portfolios and product photos are viewed closely, and artifacts there damage the impression of quality. Decide for each type of image how much quality it deserves, write the settings down, and use them consistently.