Are these real JPEG artifacts, or a simulated blocky filter?

Real. The tool actually re-encodes your image through the browser's JPEG encoder at a genuinely low quality (roughly 0.1-0.3 depending on the intensity you pick), so the blockiness and banding you see are authentic encoder byproducts, not a hand-drawn approximation.

Why would I want to make an image look worse?

Common reasons include testing how an image pipeline or CDN handles heavily-compressed input, demonstrating to a client or teammate what over-compression looks like, or deliberately going for a lo-fi, degraded aesthetic.

How does intensity map to quality?

Intensity 1 maps to quality 0.3 (mildest) and intensity 100 maps to quality 0.1 (harshest); the relationship is linear in between, and the exact quality value used is shown in the tool's description text.

Can I undo this afterward?

Not perfectly. Once artifacts are baked into the pixels by a low-quality encode, that detail is genuinely gone. Keep your original file if you might need it again; use jpg-artifacts-remover afterward only for a mild smoothing pass, not a true reversal.

JPG Artifacts Adder - Exaggerate Real JPEG Compression Artifacts

Overview

Introduction

This tool intentionally re-encodes a JPG at a very low quality to make blocky JPEG compression artifacts obvious, entirely in your browser.

It's built for testing and demonstration purposes: a deliberate degrade, not a mistake to fix.

What Is JPG Artifacts Adder?

A client-side JPEG re-encoder that maps a 1-100 'intensity' slider onto a real, deliberately harsh encoder quality between 0.3 and 0.1, then re-encodes and decodes the image so the preview shows genuine compression damage.

Because JPEG's blockiness is a real side effect of its own lossy encoder, this tool produces it the honest way, by actually running that encoder, rather than hand-painting a blocky filter on top of untouched pixels.

How JPG Artifacts Adder Works

The intensity value is linearly mapped to a quality between 0.3 (intensity 1) and 0.1 (intensity 100), then passed to canvas.toBlob("image/jpeg", quality) for a real re-encode.

The resulting blob is decoded back into pixels via createImageBitmap so what you see and download reflects the actual encoder output, artifacts included.

When To Use JPG Artifacts Adder

Use it to test how an image processing pipeline, thumbnail generator, or CDN handles heavily-degraded input.

It's also handy for demoing to a client or teammate exactly what 'the image got over-compressed' looks like, or for a deliberate lo-fi visual effect.

Often used alongside JPG Artifacts Remover, JPG Quality Changer and PNG Artifacts Adder.

Features

Advantages

Produces genuine JPEG compression artifacts via a real encoder pass, not a simulated filter.
Runs entirely client-side; your image is never uploaded anywhere.
Adjustable intensity lets you dial in exactly how degraded the result should be.

Limitations

This is a one-way, lossy operation: the detail lost at low quality can't be perfectly recovered.
Not intended as a normal export path; if you actually want a smaller usable JPG, use jpg-compressor or jpg-optimizer instead.

Examples

Mild artifact demo

Input

A clean photo, intensity 20 (quality 0.26)

Output

Subtle blockiness visible mainly in flat-color areas and sharp edges

Low intensity still produces a real, if mild, compression signature.

Extreme degrade for testing

Input

Any JPG, intensity 100 (quality 0.1)

Output

Heavy 8x8 blockiness and color banding across the whole image

Maximum intensity pushes the encoder to its harshest practical setting.

Best Practices & Notes

Best Practices

Keep a copy of your original file before experimenting, since this tool's whole purpose is a destructive, visible degrade.
Use a moderate intensity first if you want a demo that's obviously degraded but not illegible.

Developer Notes

resolveJpgArtifactIntensity is the pure validation/mapping half (1-100 intensity to a 0.1-0.3 quality range); the actual canvas.toBlob re-encode and decode-back happen in the component, matching the DOM-boundary split used by jpg-quality-changer and jpg-compressor.

JPG Artifacts Adder Use Cases

Testing how an image pipeline handles heavily-compressed input
Demonstrating visible over-compression to a client or teammate
Creating a deliberate lo-fi or degraded visual effect

Common Mistakes

Using this expecting a normal, usable compressed export; for that, use jpg-compressor or jpg-optimizer instead.
Losing the only copy of the original file before running an intentionally destructive test.

Tips

Try a few intensity values side by side to find the exact degree of visible degradation you're after.
Pair with jpg-artifacts-remover afterward only if you want a mild smoothing pass, not a true undo.

JPG Artifacts Adder