Resize Image Online — Lanczos / Bicubic Resampler in Your Browser

Image Resizer — Lanczos-class Resampling via Canvas drawImage

Resize any image to exact pixel dimensions or scale by percentage using the WHATWG HTML Living Standard Canvas 2D Context drawImage() pipeline (html.spec.whatwg.org/#dom-context-2d-drawimage). The CanvasRenderingContext2D.imageSmoothingQuality property — 'low' (default, bilinear-class), 'medium' (bicubic-class), or 'high' (Lanczos-class) — controls the resampling filter; the actual algorithm is implementation-defined per WHATWG, but Chrome / Edge / Safari / Firefox all map 'high' to a Lanczos-family kernel for downscaling. The Lanczos filter (Duchon 1979, Journal of Applied Meteorology 18(8):1016-1022) uses the kernel L(x) = sinc(x)·sinc(x/a) for −a ≤ x ≤ a; Turkowski & Gabriel showed Lanczos a=2 is the optimal compromise of aliasing reduction, sharpness, and minimal ringing for 2D image decimation, which is why Pillow's Image.Resampling.LANCZOS (the canonical industry reference, with ANTIALIAS removed in Pillow 10.0.0 on 1 July 2023 after deprecation) and the browser Canvas 'high' path both use it. Aspect-ratio lock keeps the proportions intact so the subject does not stretch or squash; resizing happens in the canvas pixel buffer's sRGB encoding (IEC 61966-2-1:1999) regardless of the source image's colour profile. Files never leave the device — the canvas reads bytes locally and serialises the resized output via HTMLCanvasElement.toBlob() back into JPG / PNG / WebP.

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 calls drawImage() with imageSmoothingQuality = 'high' (Lanczos-class kernel) and serialises the result via HTMLCanvasElement.toBlob() in your chosen output format.
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?

The tool calls Canvas drawImage() with imageSmoothingQuality = 'high', which Chrome / Edge / Safari / Firefox all map to a Lanczos-class kernel (Duchon 1979). Lanczos a=2 is the industry-standard downscale filter — Turkowski & Gabriel showed it gives the optimal compromise of aliasing reduction, sharpness, and minimal ringing for 2D image decimation, and it's what Pillow's Image.Resampling.LANCZOS uses (the canonical Python reference; ANTIALIAS was an alias for LANCZOS until removed in Pillow 10.0.0, 1 July 2023). The actual algorithm is implementation-defined per the WHATWG spec, but the practical result is consistently Lanczos-grade across browsers.

Can I upscale here?

For mild enlargements (under 2×) Canvas Lanczos works fine. Beyond 2× use the image-upscaler tool, which applies a different class of algorithm tuned for the upscale direction (super-resolution / edge-aware reconstruction) rather than band-limited interpolation. No interpolation method invents detail that was not in the source — they only redistribute the existing samples.

Does resizing lose quality?

Downscaling is effectively lossless within the new resolution's perceptual budget — Lanczos band-limits the source so high-frequency content that cannot survive at the lower sample rate is filtered out cleanly, avoiding moiré and aliasing. Upscaling cannot invent detail; it only interpolates between existing samples. Re-encoding to JPG after resize introduces lossy quantisation per ITU-T T.81 Annex K (use PNG or WebP lossless if you need pixel-exact preservation of the resized result).

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

Resizing in a browser is a two-step bitmap operation: decode the source file to an ImageBitmap, then drawImage() it to a new canvas at the target width × height, where the smoothing filter governed by imageSmoothingQuality interpolates between source pixels. (1) Downscaling is the well-behaved direction: a properly band-limited filter like Lanczos a=2 removes high-frequency content that cannot survive at the lower sample rate, avoiding moiré and aliasing. The result is visually equivalent to the source within the new resolution's perceptual budget — quality is not 'lost' so much as 'no longer needed'. (2) Upscaling cannot invent detail: bilinear gives a soft result, bicubic adds artificial edge sharpening that often looks waxy, and Lanczos reproduces the original frequencies cleanly but cannot generate detail that was not in the source. Beyond 2× use the image-upscaler tool which applies a different class of algorithm tuned for that direction. (3) Aspect-ratio lock is almost always the right default — the human visual system is sensitive to face/body proportion and any non-uniform scale (e.g. 1080 → 1200 wide while keeping 1080 tall) registers as 'wrong'. If you need a different ratio, crop with aspect-ratio-crop first to recompose, then resize. (4) The canvas resampling step normalises everything to sRGB at 8-bit precision per IEC 61966-2-1:1999; HDR sources (Display P3, BT.2020) are tone-mapped to SDR sRGB during the drawImage step. (5) Output format defaults to the source's MIME type but you can switch to JPG / PNG / WebP via toBlob() — no upload, no server round-trip.

Resize by exact pixels or percentage scale
Aspect-ratio lock to preserve subject proportions
Quick percentage presets (25% / 50% / 75%) for fast downscale workflows
Lanczos-class resampling via Canvas imageSmoothingQuality = 'high' (default 'low' = bilinear)
Resampling pipeline: WHATWG Canvas drawImage (html.spec.whatwg.org/#dom-context-2d-drawimage) → toBlob
Output JPG / PNG / WebP — input format preserved by default, switchable on download
Operates in sRGB (IEC 61966-2-1:1999) at 8-bit precision; HDR sources tone-mapped during resize
Files processed locally via the browser canvas — no upload, no server round-trip

Free. No signup. No file uploads. Ads via AdSense (consent required).

Sources (6)

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 — Chrome / Edge / Safari / Firefox map 'high' to a Lanczos-class filter, 'medium' to bicubic, 'low' to bilinear; the actual algorithm is implementation-defined per the WHATWG spec.
Duchon, C. E. (1979). Lanczos Filtering in One and Two Dimensions. Journal of Applied Meteorology, 18(8):1016-1022 (August 1979) — original Lanczos resampling derivation; kernel L(x) = sinc(x)·sinc(x/a) for −a ≤ x ≤ a, named after Cornelius Lanczos's sigma approximation; Turkowski & Gabriel later showed Lanczos a=2 is the optimal compromise of aliasing reduction, sharpness, and ringing for 2D image decimation.
Python Imaging Library (PIL Fork) — Pillow contributors (2023). Pillow 10.0.0 — Image.Resampling enum (NEAREST / BILINEAR / BICUBIC / LANCZOS). pillow.readthedocs.io/en/stable/releasenotes/10.0.0.html (released 1 July 2023) — industry reference for resampling algorithm naming; ANTIALIAS removed in 10.0 after deprecation, was always an alias for LANCZOS since Pillow 2.7.0 (31 December 2014).
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.