How to Resize an Image Without Losing Quality

People often say "resize" when they mean two different things: changing the dimensions (width and height in pixels) and reducing the file size in kilobytes. They are related but not the same, and mixing them up is why images end up blurry or still too big.

Resizing vs compressing

• Resizing changes the pixel dimensions. Fewer pixels means a smaller file and a smaller display size.
• Compressing changes how the pixels are encoded. Lossy formats such as JPEG and WebP discard detail to shrink the file.
• Best results usually come from resizing to the size you need first, then compressing once.

Rules for keeping quality

1. 1Keep the aspect ratio locked so the image doesn't stretch.
2. 2Only scale down. Enlarging an image can't add detail; it just makes it blurry.
3. 3Resize from the original, not from an already-resized copy.
4. 4Save once in the final format; each lossy re-save loses a bit more quality.

Choosing a format

• JPEG: photos where small files matter. A quality of about 75 to 85 usually looks good.
• PNG: graphics, logos, screenshots, and anything needing transparency; lossless but larger.
• WebP and AVIF: modern formats that are typically noticeably smaller than JPEG at similar quality, and supported by current browsers.

How big should a web image be?

Match the image to the largest size it will be displayed. For a picture shown 800 pixels wide, a 1600-pixel-wide version covers 2x (retina) screens. Serving a 4000-pixel photo for an 800-pixel slot wastes bandwidth and slows the page.

Quick checklist

• Decide the display size, then export at that size (or 2x for sharp screens).
• Pick a format that suits the content.
• Compress, then compare against the original at 100% zoom.
• Keep the original file in case you need a different size later.