The Right Way to Resize Images for the Web (and Why Most People Get It Wrong)

Most slow websites aren't slow because of code — they're slow because someone uploaded a 4000-pixel-wide photo straight from a phone or DSLR into a 300-pixel space. Browsers download the full image even when they only display a fraction of it. This guide shows the correct way to resize images for the web in 2026.

Common display widths to target

Double the width for retina displays only if the image is critical and you can afford the extra bytes.

Always resize before you compress

Compression removes detail. Resizing changes pixel dimensions. Do them in the right order: resize first, then compress. Compressing a 4000-pixel photo and then resizing it to 800 pixels wastes both time and quality.

Keep the aspect ratio (unless you mean not to)

Stretching an image to fill a box distorts faces and makes products look misshapen. Almost every resizer has a 'lock aspect ratio' option — leave it on by default and only change one dimension.

Cropping vs resizing — pick the right one

• Resize when you want to keep the whole image, just smaller.
• Crop when the subject is off-center or the framing is wrong.
• Use both together for thumbnails — crop to the right aspect ratio first, then resize.

Resize images in your browser for free

Our Image Resizer lets you set exact pixels, percentages or aspect ratios, all client-side.

FAQ