Resize or Compress? The Right Order to Shrink Images

"Reduce image size" can mean two very different things: making the image's dimensions smaller (resizing) or making the file lighter at the same dimensions (compressing). Understanding the difference — and the right order to apply them — is the key to small files that still look good.

What resizing does

Resizing changes the pixel dimensions, for example from 4000×3000 down to 1200×900. Because file size grows with the number of pixels, cutting dimensions has a huge effect. Halving both width and height removes about 75% of the pixels — and usually most of the file size.

What compressing does

Compression reduces the bytes needed to store the same pixels, either by discarding detail the eye barely notices (lossy) or by packing data more efficiently (lossless). It lowers file size without changing the dimensions, at the cost of some quality for lossy formats.

Which should you do first?

Resize first, then compress. There is no point in carefully compressing millions of pixels you're about to throw away. Resize the image to the largest size it will actually be displayed at, and then apply compression to that smaller image. Doing it in this order gives the smallest file for a given quality.

A simple rule of thumb

• Decide the maximum display size (add ~2x for retina screens)
• Resize the image down to that size
• Convert to WebP or AVIF and set quality around 75
• Compare before/after and adjust if needed

Combine them for the best result

The biggest wins come from doing both. A 5 MB photo displayed in a small blog column might drop to well under 100 KB after resizing to the right width and compressing to WebP — with no visible difference. Scrunch focuses on the conversion and compression step, so pair it with a sensible display size and your images will be as light as they can be.

Frequently asked questions

Does resizing hurt quality?

If you resize down to roughly the display size rather than smaller, the image actually looks sharper on screen. It only looks blurry if you shrink it below the space it occupies, so use the display size (about 2x for retina) as your target.

Isn't compression alone enough?

If the original dimensions are far larger than the display size, compression alone has limits — you're compressing pixels you don't need. Reducing the pixel count with a resize first yields much bigger savings.

Can I resize and compress in one go?

Yes. Apply the two steps in order: resize to the display size, then compress to WebP or AVIF. As long as you keep that order, you get the smallest file at a given quality.

What width should I resize to?

Use the maximum width the image is actually displayed at. If your content column is 800 pixels wide, around 1600 pixels covers retina screens. Larger than that just wastes bandwidth; smaller than that looks blurry on screen.