Image Resizer

How to Use the Image Resizer

1. Drop or select a file in the upload zone. JPEG, PNG, WebP, and GIF are all accepted, and the tool reads the file with URL.createObjectURL so nothing is uploaded anywhere.
2. Pick a mode: switch between the "Pixels" tab for absolute width and height, or the "Percentage" tab to scale relative to the original.
3. Toggle "Keep aspect ratio" if you want the second dimension to track the first automatically - handy when you only care about hitting a specific width budget.
4. Type in your target values. The current source dimensions and megapixel count are shown above the inputs so you can tell at a glance whether you are downscaling or upscaling.
5. Click "Resize". A fresh HTMLCanvasElement is created at the target size, the source is drawn with drawImage, and the result is encoded as PNG and offered as a download via a blob URL.

What Happens Under the Hood

Resizing a raster image is not free - every new pixel has to be synthesised from the old ones through a resampling filter. The Canvas 2D context applies a single interpolation kernel controlled by imageSmoothingQuality, which browsers map to a bilinear or bicubic resampler. That is good enough for most photos but it is not the Lanczos-3 filter that ImageMagick or libvips reach for when you ask for "-resize" on the command line, so if you zoom in far enough on a heavy downscale you may see subtly softer edges than a desktop pipeline would produce.

We encode the output as PNG through canvas.toBlob('image/png'), which hands the bitmap to the browser's DEFLATE-based PNG encoder (see the W3C PNG specification, second edition). That keeps the output lossless at the new dimensions, which matters when you plan to re-encode the file later or run it through another tool - each round of JPEG re-encoding accumulates DCT artifacts, and PNG sidesteps that entirely.

Real Scenarios Where This Helps

• Shrinking a 24-megapixel phone photo to 1600 px wide before uploading it to a blog, cutting bandwidth by 90% without visibly hurting quality.
• Hitting the exact 1080x1080 square Instagram wants for a feed post without bringing a full editor into the workflow.
• Preparing retina assets at 2x of the CSS size (so a 300 px logo is exported at 600 px) for srcset attributes.
• Downsizing screenshot captures from a 5K display so they fit inside a 1920 px Notion or Confluence embed.
• Generating an Open Graph image at 1200x630 from a larger master without spinning up Figma.
• Trimming an avatar photo to the 512 px maximum most forums and chat platforms enforce.

Edge Cases Worth Knowing

• Upscaling beyond 2x is a fool's errand with a browser kernel - bilinear interpolation produces mushy output. If you actually need to enlarge, a dedicated super-resolution pipeline (waifu2x, Topaz Gigapixel, or server-side ESRGAN) will beat any Canvas API.
• GIF input loses animation. The Canvas renders only the first frame; the animation is not preserved. Use a GIF-specific tool such as ezgif if you need to keep moving pictures.
• EXIF orientation tags are dropped. A phone photo rotated to "Rotate 90 CW" in EXIF but physically landscape on disk will come out landscape after resizing. That is usually what you want, but surprising if you were counting on EXIF to flip things later.
• Very large images can fail. Browsers cap canvas area near 268 million pixels (16,384 squared) on most engines - beyond that drawImage silently paints black.
• Non-integer percentages round down. 33.33% of a 1000 px image is 333 pixels, not 333.33, because pixel counts have to be whole numbers.

A Quick Tour of Raster Resampling

Raster formats like JPEG (JFIF container, ISO/IEC 10918-1), PNG (W3C recommendation), and WebP (RFC 9649) store a fixed grid of pixels. When you change the grid size, every output pixel is computed from a weighted average of source pixels within a small neighborhood. Bilinear sampling looks at the four closest source pixels, bicubic at sixteen, and Lanczos-3 at thirty-six. More samples give sharper edges but cost more CPU and can introduce ringing. Color management also matters: ideally the resampler works in linear RGB rather than in the sRGB-encoded bytes stored on disk, because averaging gamma-encoded values darkens midtones. Browsers have improved here over the last few years, but it is still the reason a downscaled bright photo can look slightly muddier than the ImageMagick equivalent with -colorspace RGB -resize W -colorspace sRGB.

How This Compares to Other Tools

For a one-off resize the browser is faster than opening Photoshop, Affinity Photo, or GIMP, and you do not give up any privacy for the convenience. Against a command-line tool, however, the tradeoffs tilt the other way: magick input.jpg -resize 1600x output.jpg gives you Lanczos by default, preserves ICC profiles and EXIF if you ask it to, and scales linearly across thousands of files with mogrify. libvips (exposed through the sharp Node package) is the go-to for batch pipelines at scale because it streams tiles rather than loading the whole image into memory. For one-shot retouching at the pixel level, squoosh.app offers the same canvas-backed resize but with a true side-by-side comparison slider. Use this tool for speed and privacy; reach for the CLI when you need batch, color accuracy, or exotic resamplers.