Image Resizer

Four resizing mistakes you've probably made

Resizing looks trivial until an image ships to production looking blurry on one phone and pixel-perfect on another. These are the bugs you'll actually hit.

• Ignoring device pixel ratio (DPR). If you resize a hero image to exactly the CSS size — say 800×450 for a half-width desktop slot — it'll look crisp on a 1x monitor and soft on a phone. Apple shipped 3x Retina on the iPhone 4 in 2010; iPhones today still report window.devicePixelRatio = 3. Export at 2x the CSS size (so 1600×900) and let the browser's srcset pick the right one.
• Downscaling by a non-integer factor without a proper filter. Canvas's default scaler is bilinear, which aliases badly when you drop a 1920-pixel image to 1000 pixels (moiré on fine patterns, jagged diagonals on text). The fix: set ctx.imageSmoothingQuality = 'high' before drawImage, which on Chrome and Firefox switches to a Lanczos-like filter. For the real fix, downscale in two passes (to ~1500 then to 1000) — the perceived sharpness is visibly better.
• AVIF at high DPR surprises. AVIF at quality ~50 often looks great at 1x but reveals chunky "painterly" compression artifacts on retina displays when you zoom in. If you're serving AVIF to iPhones, bump quality to at least 60 and compare against WebP at the same file size — sometimes WebP still wins on high-DPR text.
• Upscaling a 500px image to 2000px and expecting detail. Bicubic or Lanczos can't invent texture that wasn't captured. If you really need to upscale, use a super-resolution model (Real-ESRGAN, or Upscayl desktop) — a Canvas-based tool like this one fundamentally cannot.

One more limit worth naming: browsers cap Canvas dimensions. Safari's limit is 16,777,216 total pixels (about 4096×4096), Chrome allows around 268M, so a 10,000×10,000 source will silently fail on iOS. If that applies, resize in a native tool instead.