Overview
Introduction
This tool blurs a JPG entirely client-side using a fast, separable box-blur algorithm.
It's a quick way to soften a photo's detail, whether for a background, a privacy-friendly preview, or a stylistic effect.
What Is JPG Blurrer?
A client-side JPG blurring tool that reads an uploaded photo's pixel data and applies a two-pass box blur: a horizontal averaging pass followed by a vertical one.
The blur radius is fully adjustable, controlling how far each pixel's neighborhood extends.
How JPG Blurrer Works
The tool first averages each pixel with its horizontal neighbors within the given radius, producing an intermediate result, then averages that intermediate result's vertical neighbors to finish the blur.
Doing it in two passes (horizontal, then vertical) is mathematically equivalent to a full 2D box blur but much cheaper to compute, since it avoids nested loops over every neighbor pair.
When To Use JPG Blurrer
Use it to soften a busy background photo before overlaying text, create a quick privacy-friendly low-detail preview, or add a dreamy soft-focus effect.
It's also a fast way to generate a blurred placeholder image while a full-resolution photo loads elsewhere.
Often used alongside JPG Sharpener, JPG Artifacts Remover and PNG Blurrer.
Features
Advantages
- Runs entirely client-side; nothing is uploaded to a server.
- Fast, separable algorithm even at larger radii.
- Simple single-parameter control (radius).
Limitations
- A box blur's falloff isn't as smooth as a true Gaussian blur, and can show faint boxy edges at very high radii.
- Blurs the whole image uniformly; it has no concept of selective/regional blurring.
Examples
Best Practices & Notes
Best Practices
- Use a small radius (2-6px) for subtle softening and a larger radius (15px+) for strong background-blur effects.
- Blur before adding text overlays, not after, so the text itself stays crisp.
Developer Notes
blurJpg performs a horizontal box-blur pass into a Float32Array intermediate buffer, then a vertical pass back into a clamped Uint8ClampedArray PixelBuffer; both passes clamp sampling at the image edges rather than wrapping or reading out of bounds.
JPG Blurrer Use Cases
- Softening a busy background before adding text
- Creating a quick low-detail placeholder preview
- Adding a dreamy soft-focus stylistic effect
Common Mistakes
- Expecting a perfectly smooth Gaussian falloff from a box blur at very high radii.
- Trying to blur just one region: this tool always blurs the whole image.
Tips
- Pair a moderate blur with the brightness or contrast tools for a soft, hazy aesthetic.
- If you need the blur radius to look consistent across different image sizes, scale the radius proportionally to the image's largest dimension.