PNG Sharpener

Uploads a PNG, decodes it onto an off-screen canvas, and applies a 3x3 convolution sharpening kernel that boosts local contrast at an adjustable amount, then lets you download the sharpened PNG. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-26

Overview

Introduction

This tool sharpens a PNG using a small convolution kernel applied pixel-by-pixel, boosting the contrast between each pixel and its immediate neighbors.

Everything runs client-side on a plain pixel buffer, so nothing you upload is sent anywhere.

What Is PNG Sharpener?

A convolution-based sharpening tool: for every pixel, it computes a weighted combination of that pixel and its four orthogonal (up/down/left/right) neighbors.

The weighting is controlled by an amount value, letting you dial the effect from none up to a strong sharpen.

How PNG Sharpener Works

Each output channel is computed as `center * (1 + 4k) - k * (up + down + left + right)`, where k scales with the chosen amount. This is the classic unsharp-mask 'plus' kernel.

Pixels at the image edge clamp to the nearest in-bounds neighbor instead of sampling outside the buffer, avoiding a dark or transparent fringe around the border.

When To Use PNG Sharpener

Use it on a slightly soft photo, a screenshot that lost detail from resizing, or any image where edges look mushy rather than crisp.

It's most effective on images that are only mildly blurry; it can't invent detail that isn't there.

Features

Advantages

  • Runs entirely client-side; nothing you upload leaves your device.
  • A single amount control scales smoothly from no effect to a strong sharpen.
  • Edge pixels are handled cleanly via clamped sampling instead of artifacts at the border.

Limitations

  • Sharpening amplifies existing noise as well as real edges, so noisy source images can look worse, not better.
  • It cannot recover detail lost to severe blur; sharpening only boosts contrast at whatever edges remain.

Examples

Mild sharpen on a photo

Input

A slightly soft 800x600 photo, amount 60

Output

The same 800x600 photo with subtly crisper edges

A moderate amount boosts edge contrast without introducing visible halos.

Strong sharpen on an icon

Input

A 128x128 PNG icon, amount 180

Output

A 128x128 PNG with pronounced edge contrast and some haloing

High amounts trade a more aggressive sharpen for visible light/dark fringes at edges.

Best Practices & Notes

Best Practices

  • Start around amount 50-100 and increase only if edges still look soft.
  • Avoid stacking sharpening with heavy pixelation or blur tools, since sharpening amplifies whatever artifacts those introduce.

Developer Notes

The pure convolution math lives in a lib function operating on a Uint8ClampedArray pixel buffer with clamped edge sampling, so it's fully testable under Node without a canvas; only the surrounding component touches the DOM to decode and encode PNGs.

PNG Sharpener Use Cases

  • Crisping up a slightly soft product photo
  • Restoring some edge definition after a resize
  • Making scanned document text more legible

Common Mistakes

  • Using a very high amount and getting visible halos around edges instead of a clean sharpen.
  • Expecting sharpening to fix a severely out-of-focus or motion-blurred photo.

Tips

  • Compare the result at 100% zoom before downloading; sharpening artifacts are easy to miss at a small preview size.
  • If edges still look soft, try a moderate amount rather than jumping straight to the maximum.

References

Frequently Asked Questions