How to reduce image size without losing quality

Most oversized images are not oversized because they are insufficiently compressed. They are oversized because they contain far more pixels than anyone will ever see, and because they are saved in the wrong format. Fix those two things first and you will usually cut 80% of the file before touching a quality slider.

1. Resize before you compress

This is the biggest win and the most commonly skipped step. A photo straight from a phone is often 4,000 pixels wide. Displayed in a 1,200-pixel column on a 2× screen, it needs 2,400 pixels at most. Everything beyond that is data the browser downloads and then throws away.

File size scales with area, not width, so the saving is quadratic. Halving the width quarters the pixel count before compression does any work at all.

2. Pick the format that matches the picture

Format choice is worth another 25 to 50% on its own, and the rule is simpler than it looks: photographs want a lossy format, graphics with flat colour and hard edges want a lossless one.

• WebP — the default for almost everything. Typically 25–35% smaller than JPG at matching quality, handles transparency, and every current browser supports it.
• JPG — photographs, when you need a file that anything at all can open. No transparency.
• PNG — screenshots, logos, diagrams, anything with text or hard edges. Lossless, so no artefacts around type. Terrible for photographs.
• AVIF — smaller again than WebP, but slower to encode and still awkward in some editing tools. Worth it for large hero images.
• SVG — logos, icons and illustrations. Resolution independent and usually a couple of kilobytes.

The single most common mistake is a photograph saved as PNG. Lossless encoding of photographic noise produces enormous files: a 2 MB PNG photo is frequently 200 KB as WebP with no visible difference.

3. Stop at quality 80

Lossy compression discards detail your eye is bad at noticing. The relationship between the quality setting and the file size is steeply non-linear, and the useful range is narrower than the 1-to-100 scale suggests.

Compare at the size the image will actually be displayed, not zoomed to 400%. Artefacts that are obvious at 4× are invisible at 1×, and optimising against a zoomed view means shipping files two or three times bigger than necessary.

4. Never re-compress an already-compressed file

Lossy compression is not idempotent. Every save discards more detail, and the losses accumulate — this is why images passed through several tools develop a smeared, blocky look. Always start from the original, and if you need several sizes, generate each one from the source rather than from a previously exported copy.

5. Hitting a specific size limit

When a form demands under 1 MB, work in this order: resize to the largest sensible dimensions, convert to WebP or JPG, then lower quality until it fits. Reaching for the quality slider first is what produces a 4,000-pixel image at quality 30 — technically under the limit and visibly awful.

1. 1Cap the longest edge at what the destination actually displays.
2. 2Convert to WebP, or JPG if WebP is not accepted.
3. 3Set quality to 80 and check the size.
4. 4Only if it is still over, step down in fives — 75, 70, 65.

6. Platform-specific sizes

Social platforms re-compress whatever you upload. Giving them an image at exactly the dimensions they expect means their encoder has less work to do and the result looks better. Uploading a 4,000-pixel image to a slot that displays 1,080 hands the platform's aggressive encoder a much harder job.

The short version

• Resize first. It is the biggest and safest saving.
• WebP unless you have a specific reason not to.
• Quality 80. Going higher buys nothing you can see.
• Never re-compress an export. Go back to the original.
• Judge the result at display size, not zoomed in.