Image Resizer

You need a thumbnail at exactly 400×300, or a profile photo at 512×512, or a banner at 1200×630 — and you don’t want to open Photoshop. Drop your image here, set the dimensions, and download the resized version in seconds. All processing happens in your browser using the Canvas API.

How Browser-Based Image Resizing Works

The HTML5 Canvas API provides a drawImage() method that draws an image onto a canvas at any destination size, performing bilinear interpolation on the pixel data. The resized canvas is then exported via canvas.toBlob() to a PNG or JPEG file.

The quality of the downscaling depends on the browser’s image smoothing algorithm. All modern browsers use bilinear or bicubic interpolation when imageSmoothingEnabled is true, which produces good results for photographic images. For pixel art or icons, disabling smoothing preserves crisp edges.

Input and Output Formats

Accepted inputs: PNG, JPEG, GIF, WebP, AVIF, SVG, BMP — any format the browser can decode via <img>.

Output formats:

• PNG — lossless, supports transparency, larger file size
• JPEG — lossy, no transparency, smaller file size, configurable quality
• WebP — modern format, smaller than PNG/JPEG, supports transparency

Resizing Strategies

Maintain Aspect Ratio (recommended)

Set only width or height and the other dimension is calculated automatically. This prevents distortion. Use this for thumbnails, social media images, and anywhere the image must look proportional.

Fit Within Bounds

Set both width and height as maximum bounds. The image is scaled down proportionally until both dimensions fit inside the target rectangle. No cropping occurs.

Exact Dimensions

Set both width and height explicitly. The image is stretched to fill the exact dimensions, which may distort the aspect ratio. Use only when exact pixel dimensions are required by a specification (e.g. a 16×16 favicon).

Common Use Cases

Resizing Images in Code

JavaScript / Canvas API

function resizeImage(file, targetWidth, targetHeight) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      const ctx = canvas.getContext('2d');
      ctx.imageSmoothingEnabled = true;
      ctx.imageSmoothingQuality = 'high';
      ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
      canvas.toBlob(resolve, 'image/jpeg', 0.9);
    };
    img.src = URL.createObjectURL(file);
  });
}

Python (Pillow)

from PIL import Image

img = Image.open('input.jpg')
img.thumbnail((800, 600), Image.LANCZOS)  # fit within bounds
img.save('resized.jpg', quality=90)

# Or exact dimensions (may distort):
img = img.resize((800, 600), Image.LANCZOS)

Frequently Asked Questions

Does resizing reduce image quality? Downscaling (making an image smaller) always discards pixel information — the quality loss is usually invisible at normal viewing sizes. Upscaling (making an image larger) interpolates new pixels and can produce blurry results. For JPEG output, the quality slider controls the compression level.

Why is the PNG output larger than the original JPEG? PNG is lossless and uncompressed per-channel, while JPEG is lossy and highly compressed for photographic content. A JPEG that looks identical to a PNG at screen resolution is typically 3–10× smaller. Use JPEG output for photos and PNG for images with transparency or text.

Is my image sent to a server? No. All resizing uses the Canvas API in your browser. The image never leaves your device.

What is the maximum image size? Limited by browser memory. Most browsers handle images up to 32768×32768 pixels. Very large images may be slow to process or cause memory errors.