JPEG Artifacts Explained — What Those Blocks and Halos Actually Are

A client emailed that their homepage hero looked "pixelated" on mobile. The source file was 6000 pixels wide. The problem wasn't resolution — it was a JPEG saved at quality 55, then cropped in a CMS, then re-exported by a "optimize images" plugin at quality 60. Three passes of lossy compression stacked until the sky looked like a chessboard.

Artifacts are the fingerprints of those decisions. Once you know what to look for, you stop blaming the screen.

Quick answer

A client emailed that their homepage hero looked "pixelated" on mobile. The source file was 6000 pixels wide. The problem wasn't resolution — it was a JPEG saved at quality 55, then cropped in a CMS, then re-exported by a "optimize images" plugin at quality 60. Three passes of lossy compression stacked until the sky looked like a chessboard.

How JPEG compression creates artifacts

JPEG is lossy. The encoder:

1. Converts color to frequency data (DCT) in 8×8 blocks
2. Quantizes — throws away high-frequency detail it judges unimportant
3. Encodes what's left efficiently

When quantization is aggressive (low quality setting), blocks don't blend smoothly. Edges ring. Gradients staircase. Fine texture turns to mush.

This is physics of the format, not a bug in your export dialog.

The artifact family reunion

Blocking (macroblocking)

Visible squares in areas that should be smooth — blue sky, beige wall, skin shadow. Most obvious at quality below ~70 on large displays.

Fix: Raise quality, switch to WebP at equal bytes, or add subtle real noise in source (rare trick for photographers).

Color banding

Skies shift in discrete stripes instead of smooth gradients. JPEG shares blame with 8-bit color depth; compression makes it worse.

Fix: Higher quality, slight gaussian blur on sky only before export (controversial but used in production), or WebP.

Ringing (halos)

Bright or dark outlines along sharp edges — white shirt against black jacket, text on screenshot saved as JPEG.

Fix: Don't JPEG screenshots with text. Use PNG or WebP lossless. For photos, moderate quality bump.

Mosquito noise

Fuzzy speckles swarming high-contrast edges — hair against sky, tree branches against clouds. Named because it looks like insects.

Fix: Less aggressive compression; avoid sharpening after heavy JPEG.

Color bleeding

Chroma subsampling merges color channels aggressively (common 4:2:0). Red text on white gets pink fringes; fine colored patterns smear.

Fix: Export with 4:4:4 chroma if your tool allows; use PNG for graphics with colored text.

Why artifacts stack

Every Save As JPEG re-quantizes already-quantized data. Social platforms, CMS plugins, and email clients often recompress on upload.

Camera JPEG (Q92) → Canva export (Q80) → CMS "optimize" (Q75) → Instagram re-encode

Each hop adds damage. Workflow rule: one lossy hop from master.

Keep a TIFF or high-quality master. Export web JPEG once via Compress Image. Never re-save the web file.

Step-by-step artifact audit

1. Open suspect image at 100% zoom — not fit-to-window.
2. Pan across sky, shadow, skin, fine pattern — note blocks and banding.
3. Check edges — halos and mosquitoes near contrast boundaries.
4. Trace provenance — how many times was this JPEG saved?
5. Re-export from best master at quality 82–88 (adjust after visual check).
6. Compare bytes — if new file is only 10% larger but artifacts gone, ship it.
7. Disable CMS double compression if plugin re-encodes uploads blindly.

If master is lost and artifacts are severe, reshoot or re-source — denoise AI helps marginally, not magically.

Format comparison when artifacts matter

| Content | Safer format | Why | |---------|--------------|-----| | Photo hero | WebP or JPEG Q85+ | Size vs quality balance | | Screenshot | PNG / WebP lossless | Text edges | | Logo on photo | PNG overlay, don't bake JPEG | Halos on logo edge | | Thumbnail | JPEG Q70–75 | Small display hides sins | | Archival | TIFF / RAW | No generation loss |

See PNG vs JPG Guide for graphics vs photos. WebP vs JPG for modern photo delivery.

Real-world examples

Band poster — fluorescent gradients banded at Q65. Q82 fixed banding; file grew 40 KB. Worth it.

LinkedIn headshot — LinkedIn recompressed; starting from Q95 instead of Q75 kept skin acceptable post-upload.

Blog inline — 1200 px wide, Q80, no visible artifacts on retina phone. Same image at Q60: mosquito noise on hair.

Numbers shift per image. Your zoom test is the spec.

Common mistakes

Saving screenshots as JPEG
Text becomes soup. Use PNG.

Editing JPEGs in layers
Each flatten + save adds a generation. Edit lossless working file.

Assuming high resolution hides low quality
6000×4000 at Q50 still blocks on zoom.

Over-sharpening after compress
Sharpening amplifies ringing halos.

Ignoring resize order
Resize from master, then compress once — not compress then resize the damaged file.

Privacy note

Artifact inspection is local work. Re-exporting through random "JPEG fixer" websites uploads your image. Use browser tools — Compress Image, JPG to PNG for lossless hop if needed — that process on-device.

Alternatives when JPEG won't behave

• WebP lossy — often cleaner at same file size (WebP Converter)
• PNG — UI, diagrams, anything with text
• AVIF — newer, excellent efficiency, check fallback plan
• Serve larger quality once — better one 280 KB clean file than two 140 KB garbage passes

Read how image compression affects quality for the quality slider mindset.

Troubleshooting

What do JPEG artifacts look like? Common signs include 8×8 pixel blocks in flat areas, color banding in skies, ringing halos around sharp edges, and mosquito noise — speckled patterns near high-contrast boundaries. They worsen each time you re-save a JPEG.

Can you remove JPEG artifacts after the fact? You can soften them slightly with denoise tools, but you cannot recover discarded data. Prevention — higher quality on first export and avoiding re-compression — beats repair.

Why does JPEG create square blocks? JPEG divides the image into 8×8 pixel blocks and compresses each separately. At low quality, block boundaries become visible, especially in smooth regions like walls and skies.

Limitations

Browser-based workflows for jpeg artifacts explained depend on file size, browser memory, and how the source file was created. Very large files, password-protected inputs, or unusual encodings may fail without a desktop alternative. Always keep an original copy before batch processing.

When not to use this approach

Skip browser-only processing when compliance requires audit logs, when files exceed practical browser limits, or when you need features your browser tool does not expose (bookmarks, form fields, digital signatures). In those cases, use dedicated desktop software or an approved enterprise pipeline.

Related tools and articles

• How Image Compression Affects Quality — prevention before artifacts appear
• Image Compression for the Web — end-to-end workflow
• Common Mistakes When Resizing Images — resize/compress order
• Compress Image · WebP Converter · JPG to PNG

Key takeaways

• What do JPEG artifacts look like: Common signs include 8×8 pixel blocks in flat areas, color banding in skies, ringing halos around sharp edges, and mosquito noise — speckled patterns near high-contrast boundaries.
• Can you remove JPEG artifacts after the fact: You can soften them slightly with denoise tools, but you cannot recover discarded data.
• Why does JPEG create square blocks: JPEG divides the image into 8×8 pixel blocks and compresses each separately.

Conclusion

JPEG artifacts are blocky skies, banded gradients, halos, and mosquito noise — the cost of aggressive lossy compression and repeated saves. Spot them at 100% zoom, re-export once from a real master, pick the right format for text and UI, and stop letting plugins compress your compress.

You can't polish a third-generation JPEG back to RAW. You can stop making generation four.