JPEG Artifacts: Why Photos Look Blocky
What JPEG artifacts are, why blocky edges and color banding appear after compression, which quality settings avoid them, and how to fix them.
By Ahsan Khowaja · · 8 min read
Facts checked against official sources on
On this page
JPEG artifacts are the visible flaws that appear when a JPEG is compressed too hard: small square blocks, smudgy "halos" or speckles around sharp edges and text, and stepped bands of colour in smooth areas like skies. They happen because JPEG throws away detail to save space, and the lower the quality setting, the more it throws away. You cannot fully undo them in a finished file, but you can prevent them by compressing from the original, keeping the quality moderate, avoiding repeated re-saves, and using PNG or WebP for screenshots and graphics.
What artifacts look like
Zoom in on a heavily compressed JPEG and you will usually see one or more of these:
| Artifact | What you see | Where it shows most |
|---|---|---|
| Blocking | A grid of small squares, especially in flat or gently shaded areas | Skies, walls, skin, dark shadows |
| Ringing ("mosquito noise") | Faint ghost lines, halos or speckles next to sharp edges | Text, logos, line art, building edges against sky |
| Banding | Smooth gradients turn into visible stripes or steps | Sunsets, studio backdrops, blurred backgrounds |
| Colour bleeding | Colours smear slightly beyond the edges of objects, especially strong reds | Red text, coloured logos, fine coloured patterns |
| Loss of fine texture | Grass, hair and fabric look smeared or "painted" | Detailed natural textures |
At normal viewing size, a well-compressed photo shows none of this. Problems tend to appear when an image has been compressed aggressively, saved several times, or blown up larger than it was meant to be shown.
Why they happen
JPEG is a lossy format: it saves space by discarding information it predicts you will not notice. MDN's image format guide describes JPEG as "the most widely used lossy compression format for still images", based on the discrete cosine transform, and warns that lossy compression on "content requiring sharpness, like diagrams or charts, can produce unsatisfactory results".
The JPEG standard itself (ITU-T T.81, also published as ISO/IEC 10918-1) explains the mechanics. Three steps matter for artifacts:
1. The image is split into 8 × 8 blocks
In the standard's words, the samples "are grouped into 8 × 8 blocks, and each block is transformed by the forward DCT" into 64 values. Each block is compressed on its own. When compression is strong, neighbouring blocks no longer match smoothly at their borders, and the grid becomes visible. That is blocking.
2. Detail is quantised away
Each of those 64 values is then "quantized using one of 64 corresponding values from a quantization table". Quantisation rounds values off, and the fine-detail values are rounded most aggressively. The quality setting in your editor controls how coarse this rounding is. Round too coarsely and sharp edges can no longer be described exactly, which leaves ringing next to them, and gentle gradients collapse into bands.
3. Colour can be stored at lower resolution
JPEG files in the common JFIF format store colour as YCbCr: one brightness channel (Y) and two colour-difference channels (Cb and Cr). The standard allows each of these components to be stored at its own sampling resolution, so encoders commonly keep brightness at full resolution and store colour information at reduced resolution, because our eyes are less sensitive to fine colour detail than to fine brightness detail. The sharp library we use, for example, defaults to 4:2:0 chroma subsampling for JPEG output, which keeps colour at half the width and half the height of the brightness channel. It works well for photos, but it is why small red text or thin coloured lines can look fuzzy in a JPEG.
For a broader explanation of the trade-off, see our guide to lossy vs lossless compression and our plain-English walk-through of how image compression works.
What our quality presets measured
Quality numbers vary between programs (a "quality 80" in one tool is not identical to "80" in another), so the most useful thing we can share is what our own pipeline does. PictureToLink's uploader uses the sharp/libvips image library with its mozjpeg encoder settings turned on. Its three compression presets set the JPEG quality as follows: High quality = 85, Balanced = 75 (the default) and Smallest file = 65.
We ran three of our test photos through each preset. Our pipeline stores uploads at up to 1920 px on the longest side, so all three came out 1920 px wide whichever preset was used. These are file-size results measured with our upload pipeline:
| Sample photo | Original | High (85) | Balanced (75) | Smallest (65) |
|---|---|---|---|---|
| Flowers, 3000 × 2000 | 961 KB | 492 KB (48.8% smaller) | 361 KB (62.4% smaller) | 294 KB (69.5% smaller) |
| Landscape, 4032 × 2623 | 380 KB | 118 KB (69% smaller) | 82 KB (78.4% smaller) | 65 KB (82.9% smaller) |
| Portrait, 3024 × 2016 | 1.57 MB | 561 KB (65.1% smaller) | 365 KB (77.3% smaller) | 264 KB (83.5% smaller) |
What this tells you:
- Most of the saving comes from the smaller size. Even at High quality, the photos came out 49–69% smaller than the originals, because they were scaled down to 1920 px.
- Each step down in quality saves a further fifth to a third. Comparing the byte counts, Balanced (75) was 27–35% smaller than High (85), and Smallest (65) was another 19–28% smaller than Balanced. Lower settings are also where artifacts become more likely, because the quantisation is coarser.
- Resizing beats quality settings. In the same test, saving the portrait 800 px wide instead of 1920 px, still at Balanced quality, made it 92.6% smaller again (27,693 bytes instead of 374,012), and the landscape 73.7% smaller, with no need to lower the quality further.
A large, dark, noisy photo shows the effect of the size limit even more clearly. Our 5000 × 3333 night street scene (2,282,830 bytes) came out 92% smaller at High, 95.2% at Balanced and 96.5% at Smallest, mostly because our pipeline scales anything larger than 1920 px down to that size: at 1920 × 1280 it keeps about 15% of the original pixels.
One honest limit: these figures are file sizes only. We did not score visual quality with a metric, so we are not claiming any setting is "artifact-free". Artifacts depend heavily on the content: a detailed landscape hides them better than a clear blue sky or a screenshot with text.
Re-saving makes it worse
Each time a JPEG is opened, edited and saved as a JPEG again, it goes through the lossy steps above once more. Errors from earlier saves get compressed again, and the damage builds up. This is often called generation loss. You see it in memes and screenshots that have been shared, re-saved and re-uploaded many times.
Common ways it happens without you noticing:
- Editing a photo in several sessions and saving as JPEG each time.
- Downloading an image from a chat app (which already compressed it) and uploading it somewhere else that compresses it again.
- Uploading to any service that re-encodes images. That includes ours: PictureToLink re-encodes every upload to strip metadata and compress it. If you are uploading a JPEG that has already been compressed heavily, choose the High quality preset to minimise the extra loss.
Fixes and prevention
Prevention (the reliable route)
- Go back to the original. Always compress from the highest-quality source you have, not from a copy of a copy.
- Resize first, then compress. Shrinking a 4000-pixel photo to the size it will be displayed at removes far more bytes than lowering quality, and smaller images hide artifacts better.
- Keep quality moderate. Our measurements above show most of the saving on camera JPEGs comes from resizing; very low quality settings buy extra savings at a visible cost.
- Edit in a lossless format. If you will edit an image over several sessions, keep the working copy as PNG or in your editor's own format, and export to JPEG once at the end.
- Check at 100% zoom. Look at skies, faces and text before you publish.
You can test settings yourself with our image compressor, which runs in your browser and shows the before and after file size. Its quality slider ranges from 30% to 95%, so you can find the lowest setting that still looks clean for your image.
Fixing an image that already has artifacts
If the original is lost, you can reduce, but not truly reverse, the damage:
- Display it smaller. Downscaling an image makes 8 × 8 blocks much less visible.
- Use a gentle noise reduction or "JPEG artifact removal" filter in a photo editor. These smooth out blocking and ringing, at the cost of some softness.
- Re-save at a higher quality setting only after cleaning it up. Re-saving a damaged image at high quality does not restore detail; it just stops further loss.
When to use PNG or WebP instead
JPEG is designed for photographs. For other kinds of images, a different format avoids artifacts entirely or produces smaller files at the same quality.
- Screenshots, text, charts, logos and line art: use PNG, which is lossless, or WebP. In our measurements, a 1366 × 900 PNG screenshot shrank from 2.3 MB to 712 KB with lossless PNG optimisation (our Balanced preset), and to 105 KB when converted to WebP.
- Photos for the web: WebP is worth considering. MDN notes that lossy WebP images are "on average 25–35% smaller than JPEG images of visually similar compression levels", and Google's WebP documentation gives 25–34% at equivalent SSIM quality. In our test, with both versions stored at 1920 px at our Balanced setting, the landscape photo was 34.5% smaller as WebP than as JPG, but the portrait was 51% larger as WebP, so results vary by image.
- Images that need transparency: PNG or WebP, since JPEG does not support an alpha channel.
Next step
If a photo looks blocky, find the original and export it again: resize it to the size you actually need, then compress it once at a moderate quality. Try it in the image compressor and compare the result at full zoom before you share it.
