Resize Image

Image Resizing for the Web

Oversized images waste bandwidth and slow down pages. A 4000-pixel-wide photograph displayed in a 800-pixel column forces the browser to download far more data than it needs. Resizing images to the dimensions they will actually be displayed at is one of the simplest performance wins available.

When to Resize

Resize before uploading to a CMS, sending via email, or posting to social media. Most platforms re-encode images anyway, but starting with sensible dimensions avoids unnecessary quality loss from double compression. For retina displays, export at twice the CSS dimensions, for example 1600 pixels wide for an 800-pixel layout column.

How This Tool Works

This resizer uses the HTML Canvas API with high-quality bicubic-like smoothing (the browser's built-in imageSmoothingQuality: high setting). The image is drawn onto an off-screen canvas at your chosen dimensions and then exported in your selected format. No data leaves your machine and there are no file size limits beyond what your browser can handle.

Choosing a Format

JPEG is best for photographs due to its efficient lossy compression. PNG preserves transparency and is ideal for graphics, logos and screenshots. WebP offers better compression than both JPEG and PNG in most cases but is not supported by every application outside the browser. GIF input is supported but will be exported as a single frame in your chosen format.