Image Resizer

Upscaling vs. downscaling

These two operations have very different quality implications:

• Downscaling (making an image smaller) is a lossy-quality operation that generally produces excellent results - averaging nearby pixels creates a clean, sharp smaller image.
• Upscaling (enlarging an image) is fundamentally limited by the original pixel data. The browser's bilinear interpolation algorithm produces blurry results beyond about 2× enlargement. For high-quality enlargements, AI-powered upscaling tools (Topaz Gigapixel, Waifu2x, Adobe Super Resolution) use machine learning to reconstruct detail.

Target size guide for common platforms

Which resize mode should I use?

The three resize modes handle the case where your target dimensions have a different aspect ratio to the original image:

• Fit: scales the image to fit within the target dimensions while preserving the original aspect ratio. The output canvas matches the scaled image exactly, so the result may be smaller than the target box. This is the safest option for general resizing without any cropping or distortion.
• Fill: scales the image so it covers the entire target canvas, then center-crops any overflow. The output is always exactly the target dimensions. Use this when you need a precise crop for thumbnails or social media images.
• Stretch: forces the image to exactly match the target dimensions, ignoring the aspect ratio. This will distort the image if the proportions differ. Use it only when distortion is acceptable (e.g. texture maps).

JPEG vs PNG vs WebP: which format to choose?

After resizing, you can keep the original format or convert to a different one. Here is a quick guide:

• JPEG: lossy compression optimised for photographs. Produces small files at the cost of subtle quality loss. Does not support transparency.
• PNG: lossless compression ideal for screenshots, logos, and images with sharp edges or text. Supports full transparency. Files are larger than JPEG for photos.
• WebP: modern format that typically outperforms both JPEG and PNG in file size while maintaining similar quality. Supports transparency and is supported in all modern browsers.

Tips for high-quality resizing

The browser's built-in Canvas drawImage performs bilinear interpolation, which is fast and generally adequate. For the best results when downscaling large images:

• Use PNG output for lossless quality (no compression artefacts).
• Use JPEG or WebP at quality 90–100 for near-lossless output.
• Avoid upscaling beyond 2×: enlarging a small image will always result in blur or pixelation regardless of the algorithm used.