How to Resize and Crop Images for the Web

Resizing and cropping sound like the same thing, but they solve different problems — and using them well is often a bigger speed win than compression alone. This guide explains the difference, why oversized images hurt, and how to size images correctly for the web.

Resize vs. crop

• Resizing changes the dimensions of the whole image, keeping all of it — you're scaling it up or down.
• Cropping cuts away part of the image to keep only a region — you're changing what's in frame, not just its size.

A profile picture is a good example: you crop to a square around the face, then resize that square down to the display size.

Why oversized images slow pages down

A photo straight from a phone might be 4,000 pixels wide. If it's displayed in an 800-pixel column, the browser downloads five times more pixels than it can ever show, then shrinks them on the fly. That's wasted bandwidth and a slower page for zero visual benefit. Resizing the image to roughly the size it's displayed at is frequently the single biggest file-size saving available — often more than compression.

Keep the aspect ratio

The aspect ratio is the proportion of width to height. Resize both dimensions by the same factor and the image stays undistorted; change only one and it stretches or squashes. Most tools “lock” the ratio by default — keep it locked unless you specifically want to distort. If you need a different shape (say, a wide banner from a tall photo), crop to the new ratio rather than stretching.

How big should images be?

• Match the image width to the space it fills — measure the container.
• For sharp display on high-density (Retina) screens, export at roughly 2× the display size, then compress.
• Don't upscale — enlarging a small image just adds blur; it can't invent detail.

Putting it together

A good order of operations is crop → resize → compress. The image resizer handles cropping and resizing in one pass with the aspect ratio locked, then hand off to the image compressor to bring the file size down. Read the compression guide for how far to push quality, and image formats explained for choosing the right format first.