Browser Image Upscaling: How We Got 4 Super-Resolution 14 Faster — Then Made It Slower on Purpose

Description and use

ClearPix cut 2048 px image upscaling time from 9 s to ~1 s and removed over‑sharpening and JPEG artifacts by adding a tunable 2‑pixel box filter that reduces excess high‑frequency detail.

Problem

Upscaling 2048px photos in-browser was slow (≈9 s) and produced over‑sharpened, artifact‑amplified results.

Outcome

Speed improved from 9 s to ~1 s; sharpening dial (k=0.8) reduced over‑sharpening and increased PSNR/SSIM, making output more faithful to ground truth.

Workflow

• Benchmark per‑stage timing and quality metrics (PSNR, SSIM, high‑frequency ratio).
• Profile stages: model inference 62 %, canvas paste 36 %, format conversion 1 %.
• Remove redundant Math.max/Math.min clamping in pixel copy loop, saving 22 % time.
• Attempt pipeline overlap; find no benefit after clamping fix.
• Test larger tiles; find no GPU benefit.
• Experiment with half‑resolution input + ×2 upscaling; discard due to quality loss.
• Add separable 2‑pixel box filter with gain k; sweep k and select k=0.8 to reduce hallucination and improve metrics.
• Expose k as a slider (0.6–1.0) for user preference.
• Deploy final pipeline: clamp input, tile 256px with 8px overlap, run 2.4 MB fp16 model on WebGPU, paste centers, apply sharpening dial.

Evidence

upscaling a 2048px photo took nine seconds, even on the WebGPU path

Source

the results looked over‑cooked — skin turned plastic, edges grew light halos, and if your source was a JPEG, the compression blocks came back louder than before

Source

model inference was 62% of wall time, sure — but pasting results back into the output canvas was 36%

Source

Deleting the redundant math took three lines and bought 88ms → 68.4ms per image (−22%)

Source

k = 0.8 — giving back 20% of the output's high‑frequency energy — improved PSNR on photos (+0.33dB on people, +0.44dB on texture, +0.27dB on edges)

Source