Image Resize & Compress

Resizing and compressing in the browser

Resizing changes an image's pixel dimensions; compression reduces the file size for a given set of dimensions. Doing both locally means the image is drawn to a canvas and re-encoded in your browser, so the file never leaves your machine. That is faster for a one-off and keeps private screenshots off a third-party server.

Downscale, do not upscale

Shrinking an image discards pixels and looks clean. Enlarging invents pixels and always softens, because there is no detail to recover. Export your source at the largest size you will actually display, then scale down from there. For responsive sites, generate a couple of widths rather than serving one huge file to every device.

Example

Source:  4000 x 3000, 6.2 MB JPEG
Resize:  1600 x 1200  (fits a content column)
Quality: 0.8 JPEG
Result:  ~380 KB, visually identical on screen

The big win is usually the resize, not the quality slider. A 4000px photo shown in a 1600px column wastes most of its data before any compression even runs.

Pitfalls

JPEG re-encoding is lossy every time, so repeatedly resizing the same file compounds artifacts; always go back to the original. Keep the aspect ratio locked unless you intend to distort, which is where an aspect ratio calculator helps you pick matching dimensions. If you need a different format afterward, the image format converter handles that step.

FAQ

What quality setting should I use? For photos, 0.75 to 0.85 JPEG is usually indistinguishable from the original at normal viewing sizes. Flat graphics do better as PNG or WebP.

Does resizing in-browser lose EXIF data? Re-encoding typically strips metadata like location and camera info, which is often a privacy benefit.

Why is my PNG not shrinking much? PNG is lossless; for photographic content switch to JPEG or WebP, which compress tonal gradients far better.