Compression Artifacts: Why Text Gets Blotchy in Images

Compression artifacts are blotches, halos, and blocky patterns around text caused by lossy compression algorithms like JPEG discarding too much image data to reduce file size.

Quick Answer

Compression artifacts are visible distortions like blotches, halos, and blocky patterns that appear around text and sharp edges in images. They occur when lossy compression algorithms deliberately discard image data to reduce file size, but discard too much information, making the quality loss noticeable as fuzzy rings, square blocks, or color bleeding around high-contrast areas like text.

Key Takeaways

Compression artifacts are most visible around text, logos, and sharp edges where lossy formats like JPEG struggle
The four main types are mosquito noise (fuzzy halos), blocking (8x8 pixel squares), color bleeding, and banding
PNG and WebP lossless avoid artifacts entirely, while JPEG quality above 75-80 minimizes them
Modern formats like WebP can achieve 25-34% smaller files than JPEG at the same visual quality
Re-saving compressed images multiple times creates generation loss and stacks artifacts

What Are Compression Artifacts?

Have you ever noticed fuzzy blotches, rings of discoloration, or blocky pixels surrounding text in an image? These visual distortions are called compression artifacts. They occur when lossy compression algorithms (like those used in JPEG files) discard too much image data to make the file size smaller.

While compression works wonders on complex digital photographs (where subtle details blend together naturally), it struggles on sharp lines, text, and flat logos. JPEG is generally suitable for photographs because its loss of fine detail is less noticeable in complex, noisy scenes, but it is a poor choice for text, logos, and UI graphics where sharp edges and flat colors make compression artifacts highly visible.

Understanding these artifacts will help you choose the right format and settings to avoid them entirely. The key insight is that lossy compression works by discarding information that is considered less important to human perception - but if too much data is discarded through low quality settings or aggressive file size targets, the encoder cannot preserve enough detail, leading to obvious artifacts even though the file is smaller.

Why Do Compression Artifacts Happen Around Text?

Text and sharp graphics present a unique challenge for lossy compression algorithms. Unlike photographs with gradual color transitions and natural noise, text creates high-frequency transitions - think of a black letter against a white background. These sharp contrast boundaries require substantial data to render cleanly.

JPEG uses an 8×8 block-based discrete cosine transform (DCT) followed by quantization. When aggressive compression is applied, the algorithm splits your image into tiny 8x8 pixel squares and compresses each block independently. The problem arises when differences between neighboring blocks become visible as 'blocking artifacts' or square blotches, especially around sharp edges and text.

The blotchy halos or squares that appear around text in many web images are often these DCT block artifacts from JPEG compression. High-frequency detail around text gets heavily quantized, causing edges to smear across blocks and creating visible patterns and color shifts rather than clean lines.

A Field Guide to the 4 Main Compression Artifacts

1. Mosquito Noise (Edge Halos)

What it looks like: Fuzzy, dotted halos or "mosquitoes" hovering around the edges of text, lines, or sharp contrast borders.

Why it happens: High-frequency transitions (like a black letter on a white background) require a lot of data to render sharply. When compressed, the algorithm discards high-frequency detail, causing a mathematical ripple effect that translates into visual fuzziness. This ringing effect is particularly noticeable around text because our eyes are highly sensitive to letter shapes and edge quality.

2. Blocking (JPEG Macroblocks)

What it looks like: The image looks like it's made of tiny 8x8 grids of solid blocks, especially visible in smooth backgrounds like skies or around text on solid colors.

Why it happens: The JPEG algorithm splits images into 8x8 pixel blocks and compresses each block individually. When quality is set too low, the boundaries between these blocks become visible, resulting in blocky pixelation. Practical guidance for JPEG suggests a 'sweet spot' quality setting around 75–85: below roughly 75, blocking artifacts and blotchy patterns become clearly visible.

3. Color Bleeding (Chrominance Sub-sampling)

What it looks like: Colors appear to bleed or smear past their sharp borders. For example, bright red text might have a blurry red glow extending onto a white background.

Why it happens: Human eyes are less sensitive to color details (chrominance) than to brightness details (luminance). Compression algorithms exploit this by discarding up to 75% of color information while keeping brightness intact. Under heavy compression, this makes color boundaries look smeared, particularly problematic for colorful text or logos.

4. Banding (Posterization)

What it looks like: Smooth color gradients (like a sunset or shadow) look like distinct steps or stripes of color rather than a smooth transition.

Why it happens: When color depth is reduced to save space, there aren't enough discrete shades available to display smooth gradients, forcing the image to group colors into hard bands. This is especially noticeable in backgrounds behind text or in gradient overlays.

How Modern Image Formats Compare

Understanding format differences is crucial for avoiding compression artifacts, especially around text and graphics. Each format handles the quality-versus-size tradeoff differently.

PNG: The Artifact-Free Choice

PNG is a lossless image format based on DEFLATE compression; it does not introduce lossy compression artifacts like blocking or ringing. Because all pixel information is preserved, PNG files can be significantly larger than JPEG or WebP for photographic content. However, PNG is often preferred for images with text, icons, and sharp UI elements where any distortion is noticeable.

WebP: The Modern Alternative

WebP is a modern image format that provides both lossy and lossless compression and can replace JPEG, PNG, and GIF for most web use cases. Google's research shows impressive results: experimental studies demonstrate that WebP achieves 25–34% smaller file sizes than JPEG for the same structural similarity index (SSIM), meaning WebP maintains comparable perceived image quality while using fewer bits.

Even more impressive, a large-scale comparative study over about one million images found that WebP achieved roughly 41% average compression at a target PSNR, outperforming both re-encoded JPEG and JPEG 2000. This superior rate-distortion performance means fewer visible artifacts at any given file size.

For text and graphics with transparency, WebP supports lossy RGB with a lossless alpha channel, allowing transparent images to be compressed far more efficiently than with PNG, with studies reporting around 60–70% size savings when replacing transparent PNGs with lossy+alpha WebP.

How to Avoid Compression Artifacts

The best strategy depends on your content type and performance requirements. Here's how to minimize or eliminate those pesky blotches around text:

Use PNG for Text and Graphics: PNG is a lossless format. It does not create artifacts and is perfect for logos, screenshots, text documents, and line drawings. When file size isn't critical, PNG guarantees clean text.
Use WebP Lossless: WebP supports lossless compression that is typically 26% smaller than PNG while maintaining pixel-perfect accuracy. This gives you artifact-free text with better compression than PNG.
Keep JPEG Quality Above 80: If you must use JPEG, avoid dropping quality below 80%. Above about 85, file size grows more than perceived visual quality improves, making it an inefficient tradeoff. The sweet spot for most text-containing images is 80-85.
Avoid Repeated Saves: Re-compressing an already compressed JPEG causes generation loss, where each cycle introduces additional artifacts and further degrades quality. Always edit the original high-resolution master file.
Consider Your Image Compression Workflow: Tools like EasyPDFSign's image compressor can help you find the optimal balance between file size and quality, testing different formats and settings to minimize artifacts while meeting your size requirements.

When Should You Prioritize File Size vs Quality?

The decision involves understanding both technical metrics and user perception. Understanding the tradeoff between image quality and size involves both objective metrics like PSNR or SSIM and subjective perception. Encoders aim to minimize artifacts for a target quality, but if you prioritize tiny file sizes too strongly, you will inevitably introduce visible artifacts in high-contrast areas like text.

For web performance, choosing the right format and compression level can dramatically change page weight: using modern formats like WebP instead of older JPEG/PNG, and tuning quality around the perceptual sweet spot, can substantially reduce file size while keeping compression artifacts minor or invisible to most users.

The key is finding your format's sweet spot. Formats with more advanced compression tools (such as WebP compared to baseline JPEG) can achieve smaller file sizes without increasing artifacts, because they allocate bits more intelligently to complex regions and edges, reducing visible blotches around text and detailed areas.

Practical Tips for Web Images with Text

When preparing images containing text for web use, consider these workflow recommendations:

For Screenshots and UI Elements: Use PNG or WebP lossless. The clean edges and flat colors in interface elements make any compression artifacts highly visible. The extra file size is usually worth the quality preservation.

For Mixed Content: If your image contains both photographs and text overlays, try WebP lossy at high quality (85-90). The photographic areas will compress efficiently while text remains readable.

For Email and Sharing: When file size limits are strict, use image compression tools to test different formats and quality levels. Sometimes switching from PNG to high-quality WebP can cut file size in half while preserving text clarity.

For Document Conversion: When converting images to PDF or extracting images from PDFs, maintaining format choice is crucial. Tools like EasyPDFSign's JPG to PDF converter and PDF to JPG extractor preserve your chosen compression settings, preventing additional artifact introduction.

Frequently Asked Questions

What causes those square blotches around text in JPEG images?

These are called blocking artifacts, caused by JPEG's 8x8 pixel block-based compression. When quality settings are too low (below ~75), the boundaries between these compression blocks become visible as square patterns, especially around high-contrast text edges.

Why does PNG not have compression artifacts like JPEG?

PNG uses lossless compression, meaning it preserves all original pixel data without discarding information. Unlike JPEG's lossy compression that creates artifacts to achieve smaller files, PNG maintains perfect image quality at the cost of larger file sizes.

Is WebP really better than JPEG for avoiding artifacts?

Yes, studies show WebP achieves 25-34% smaller file sizes than JPEG at the same visual quality level. WebP's more advanced compression algorithms allocate bits more efficiently, reducing visible artifacts around text and edges while maintaining smaller file sizes.

What's the best JPEG quality setting to avoid visible artifacts?

Keep JPEG quality between 75-85 for the best balance. Below 75, blocking artifacts and blotchy patterns become clearly visible around text. Above 85, file size increases faster than visual quality improves, making it inefficient.

Why do artifacts get worse each time I save a JPEG?

This is called generation loss. Each time you re-save a JPEG, the compression algorithm discards more data and introduces new artifacts on top of existing ones. Always work from the original uncompressed source file to avoid this cumulative degradation.

Should I use PNG or WebP for images with text?

For pure text and graphics, both PNG and WebP lossless provide artifact-free results. WebP lossless typically creates files 26% smaller than PNG while maintaining identical quality, making it the more efficient choice for web use.

Get Better Image Compression Results

Understanding compression artifacts helps you make informed decisions about image formats and quality settings. Whether you're preparing images for web use, email sharing, or document conversion, choosing the right approach prevents those annoying blotches around text.

EasyPDFSign's image compression tool lets you experiment with different formats and quality levels to find the perfect balance for your needs. You can also seamlessly convert between formats using our PDF compression and image conversion tools, all while maintaining the quality your content deserves.

Related Guides

References

Compression artifact - Wikipedia
Compression Techniques | WebP | Google for Developers
WebP Study: WebP vs. JPEG | Google for Developers
Comparative Study: WebP, JPEG, JPEG 2000 | Google for Developers
Compression artifacts in JPEG images
PNG (Portable Network Graphics) Specification
Image Compression for Web Developers: JPEG, PNG, WebP, and AVIF Explained

Those Weird Blotches Around Text (Understanding Compression Artifacts)