How to Compress and Resize Images: A Practical Guide

A single photo from a modern phone can be several megabytes, and three or four of those can easily make a webpage take seconds to load. Image size is the most common performance problem on the web, and it’s also one of the easiest to fix.

This guide explains what “image size” actually means, the trade-off between lossless and lossy compression, and how to compress or resize an image right in your browser.

File size vs. dimensions

People say “image size” to mean two different things:

File size (in KB or MB) — how much space the file takes, and how long it takes to download.
Dimensions (width × height in pixels) — how big the image is in pixels.

These are related but not the same. A 4000×3000 photo is huge in dimensions, but if it’s a simple gradient it might compress to a tiny file. Conversely, a small dimension could still have a large file size if it’s high resolution. When someone says “compress this image,” they usually mean reduce the file size, and that’s the goal for web performance.

Lossless vs. lossy: what the difference buys you

Compression comes in two flavors:

Lossless shrinks the file without throwing away any data. When you view it, it’s pixel-for-pixel identical to the original. The savings are modest.
Lossy throws away some detail that the human eye is unlikely to notice, achieving much smaller files. Re-compressing a lossy image repeatedly degrades it — so always keep an original.

For most use cases, a lossy format with quality tuned to a reasonable level is the right call — it’s what you want for photos and most web images. Lossless makes sense for screenshots, logos, and graphics with sharp edges where artifacts are visible.

Resizing vs. compressing

Resizing and compressing solve different problems. Resizing changes the dimensions, which reduces file size but also changes the image’s appearance. If an image is displayed at 800 pixels wide but is 4000 pixels wide, that extra 3200 pixels are wasted — they download, but nobody sees them.

Compressing reduces the file size without necessarily changing the dimensions. The goal is to keep the quality and cut the weight.

Often you want both: resize to the actual display size, then compress to an efficient format.

How to do it right in your browser

The most practical approach for a web image:

Resize to the display size. If the image is only shown at 800px wide, output an 800px-wide version instead of a 4000px one. Nothing is lost, because the browser can’t show more anyway.
Compress to a web-friendly format. Modern formats like WebP offer much better compression than the same-quality JPEG, and they’re supported by all current browsers — a deeper tour of the trade-offs lives in the image formats guide.
Don’t over-compress. At some point, visible artifacts appear. Stop at the quality level that looks clean enough and no more.

Everything can be done right in your browser, which is convenient and private — your image never has to be uploaded to a server.

Quick Reference

“Image size” means two different things: file size (KB/MB, download time) and dimensions (pixels). Compressing targets file size.
Lossless keeps every pixel (screenshots, logos); lossy drops imperceptible detail for much smaller files (photos, most web images).
Re-compressing a lossy image repeatedly degrades it — always keep the original.
Resize to the actual display size first, then compress to an efficient format, and stop before visible artifacts appear.
It can all happen in your browser — private and fast, with nothing uploaded.

Getting started

If you have a large image that’s slowing down your site or email, the Image Compressor shrinks it by resizing and re-encoding in your browser. If you need to trim the edges, the Image Cropper crops to an exact region. And if you want to switch formats — PNG to JPEG, for example, or to the smaller WebP — the Image Format Converter handles it.