Image Resizer — Exact Dimensions with Canvas
Resize a browser-supported image to exact pixel dimensions or by percentage. The tool loads the file locally, draws it onto a new HTML canvas at the target size, and creates a downloadable JPG or PNG copy. The aspect-ratio lock keeps proportions intact, while percentage presets make common reductions quick. The browser's Canvas implementation chooses its own smoothing behaviour; if you specifically need Lanczos3 upscaling, use the separate Image Upscaler tool. Files are processed in your browser and are not uploaded.
How to resize an image
- Drop your image onto the tool or click to browse. Source decoding happens locally via the browser's built-in JPG / PNG / WebP / AVIF / HEIC decoder.
- Enter the target width and/or height in pixels, or pick a percentage scale (25% / 50% / 75% presets are common downscale targets).
- Keep the aspect-ratio lock on to preserve proportions — the matching dimension auto-calculates so the subject does not stretch or squash.
- The tool draws the image onto a new canvas and creates a downloadable copy via HTMLCanvasElement.toBlob().
- Download the resized copy. The original is left untouched on disk; nothing is uploaded.
Common use cases
- Down-scaling camera photos to web-friendly dimensions before uploading to a blog or CMS that has a per-image weight budget.
- Matching a product photo to a CMS slot's exact pixel dimensions to avoid the platform's centre-crop or letterbox pass.
- Producing smaller preview copies of a large master image for thumbnail or hover-preview use without re-exporting from a desktop editor.
- Ensuring social-post photos land at the expected platform dimensions without stretch or crop (use the social-media-resizer sister tool for one-click platform presets).
- Generating responsive image variants (1× / 2× / 3× srcset entries) from a single source by running consecutive percentage scales.
Frequently asked questions
Should I keep aspect ratio locked?
Almost always yes. Stretching an image to a non-matching ratio distorts the subject — the human visual system registers any non-uniform scale of faces or bodies as 'wrong'. If you need a different ratio, crop with the aspect-ratio-crop tool first to recompose, then resize. The lock is on by default for that reason.
Which resampling algorithm does the tool use?
This page uses the browser's Canvas drawImage() pipeline. The exact smoothing algorithm is implementation-defined and is not advertised here as Lanczos. For explicit Lanczos3 upscaling, use the separate Image Upscaler tool.
Can I upscale here?
You can enlarge an image here, but browser interpolation cannot invent detail. For a dedicated Lanczos3 upscaling path, use Image Upscaler.
Does resizing lose quality?
Any resize changes the pixel grid. Downscaling discards detail that cannot fit at the smaller resolution, and enlarging interpolates existing pixels. PNG input produces PNG output; other supported inputs produce a JPG copy at the tool's current quality.
What about HDR or wide-gamut source images?
The Canvas 2D path operates in sRGB at 8-bit precision per IEC 61966-2-1:1999. HDR sources (Display P3 wide-gamut, BT.2020 with PQ or HLG transfer) are tone-mapped to SDR sRGB during the drawImage step, losing wide-gamut and high-dynamic-range information in the resized output. For HDR-aware workflows, resize in a desktop editor that preserves the colour profile (Photoshop, Affinity Photo, GIMP 3.0+) and export at the end.
How browser-side resizing actually works — and why aspect-ratio matters
The tool decodes the selected image, draws it to a new canvas at the requested width and height, and serialises the result with toBlob(). Locking the aspect ratio avoids accidental stretching. Downscaling removes detail that cannot fit at the smaller resolution; enlarging interpolates existing pixels and cannot create new detail. The browser chooses the exact smoothing implementation. The current output follows the tool behaviour: PNG input produces PNG, while other supported inputs produce a JPG copy. Files stay in the browser.
- Resize by exact pixels or percentage scale
- Aspect-ratio lock to preserve subject proportions
- Quick percentage presets (25% / 50% / 75%) for fast downscale workflows
- Browser Canvas resizing with local JPG/PNG output
- Output follows the current tool behaviour: PNG input produces PNG; other supported inputs produce JPG
- Aspect-ratio lock to avoid accidental stretching
- Files processed locally in the browser — no upload
Free. No signup. No file uploads. Ads via AdSense (consent required).
Sources (4)
- WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage() + imageSmoothingQuality. html.spec.whatwg.org/#dom-context-2d-drawimage — browser resampling mechanism: drawImage(source, dx, dy, dw, dh) scales the source bitmap to the destination rectangle; imageSmoothingQuality property accepts 'low' (default) / 'medium' / 'high' and requires imageSmoothingEnabled = true.
- Mozilla Developer Network (MDN) (live). CanvasRenderingContext2D.imageSmoothingQuality. developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality — documents the browser-controlled smoothing hint; the exact algorithm remains implementation-defined.
- ITU-T (CCITT) Study Group VIII & ISO/IEC JTC 1/SC 29/WG 10 (JPEG) (1992). Information technology — Digital compression and coding of continuous-tone still images: Requirements and guidelines. ITU-T Recommendation T.81 (18 September 1992) / ISO/IEC 10918-1:1994 — JPEG baseline DCT bitstream; Annex K quantisation tables apply when the resized result is re-encoded as JPG.
- International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in; resampling occurs in the canvas pixel buffer's sRGB encoding regardless of the source image's colour profile.
These are the W3C, ISO/IEC, ITU-T, and IETF specifications the tool implements or builds on. Locate them on w3.org, iso.org, itu.int, or datatracker.ietf.org.
Related guides
- Image Compression for Core Web Vitals — What Actually Moves the NeedleThe image optimization changes that actually improve LCP, CLS, and INP — with real numbers. Skip the myths, ship the ones that move scores.
- How to Remove Image Backgrounds Without Quality LossA practical guide to removing image backgrounds cleanly — edge handling, alpha channels, PNG vs WebP output, and when AI tools actually help versus hurt.
- Responsive Images with srcset — Explained Properlysrcset and sizes without the confusion. How the browser actually picks an image, what w vs x descriptors do, and the patterns that work in production.