Overview
Introduction
This tool adds a stylized version of lossy-compression blockiness to a PNG, entirely in your browser.
It works on a plain pixel buffer, so nothing you upload is sent to a server.
What Is PNG Artifacts Adder?
A block-artifact simulator that processes the image in 8x8 blocks (the same block size real JPEG compression uses), partially blending each pixel toward its block's average color and coarsening its channel precision.
Unlike a full pixelation effect, the blend is always partial, so some original detail remains visible within each block.
How PNG Artifacts Adder Works
For each 8x8 block, the tool computes the average red, green, and blue value across all pixels in the block, then blends every pixel in that block toward the average by an amount scaled from the chosen intensity.
Each channel is then quantized to a coarser step (also scaled by intensity), reinforcing the blocky, banded look typical of heavily compressed images.
When To Use PNG Artifacts Adder
Use it to give a clean image a deliberately 'low quality, over-compressed' look for stylistic or nostalgic effect.
It's also useful for testing how a UI or design handles imagery with visible compression artifacts before it happens for real.
Often used alongside PNG Pixelator, Glitch PNG Creator and PNG Dithering Adder.
Features
Advantages
- Runs entirely client-side; nothing you upload leaves your device.
- A single intensity control scales smoothly from a subtle effect to heavy, obvious blockiness.
- Uses the same 8x8 block size as real JPEG compression for a visually authentic result.
Limitations
- This is a visual approximation, not a real DCT/JPEG encode-decode cycle; it won't perfectly replicate every real-world compression artifact (like ringing near sharp edges).
- Very high intensity can make images look intentionally degraded rather than subtly aged, which may not suit every use case.
Examples
Best Practices & Notes
Best Practices
- Use a lower intensity (20-40) for a subtle 'retro web' feel, and higher only when you want an obviously degraded look.
- Preview at full size before downloading, since the blockiness is most visible at native resolution.
Developer Notes
The pure block-blending math lives in a lib function operating on a Uint8ClampedArray pixel buffer, computing each 8x8 block's average once and reusing it for both the partial blend and the quantization step, distinct from the pixelator's full block-averaging replacement.
PNG Artifacts Adder Use Cases
- Giving an image a deliberately retro, 'early internet' look
- Mocking up how a design handles heavily compressed imagery
- Adding a stylistic degraded-quality effect to a graphic
Common Mistakes
- Using maximum intensity when only a subtle effect was wanted — start low and increase gradually.
- Expecting a byte-identical result to a real JPEG re-encode; this is a visual simulation, not an actual compression pass.
Tips
- Combine with the dithering adder for an even more authentic 'low quality digital image' look.
- Compare a few intensity levels side by side to find the amount that reads as intentional rather than accidental.