How to Resize and Compress an Image Online

A 4 MB photo on a web page is almost never a compression problem. It is a dimensions problem: a 6000-pixel-wide image being displayed in a 600-pixel-wide slot. The browser downloads all six thousand pixels and throws away 90% of them.

Fix the dimensions first. Then compress. Then pick the format. In that order.

Step 1: Resize to the size it is actually displayed

Find the largest size the image is ever shown at, then export at roughly 2× that for high-density (retina) screens.

Where it appears	Display width	Export around
Blog body image	700px	1400px
Full-width hero	1400px	2000–2400px
Card thumbnail	350px	700px
Avatar	48px	96px

Going beyond 2× is wasted bytes — the extra detail is below what the eye resolves at normal viewing distance.

In EditMyStuff's image editor you set an explicit width and height, with an aspect-ratio lock so the image cannot be squashed. Setting the width alone and leaving the lock on is the normal case.

Step 2: Compress with a quality setting

Compression quality is a slider, not a switch. For photographs:

• 90–95 — archival, visually lossless. Larger files.
• 75–85 — the sweet spot for the web. Very hard to distinguish from the original.
• 60–70 — visible softening in detailed areas, acceptable for thumbnails.
• Below 50 — blocky artefacts around edges and in gradients.

Start at 80 and look at the result at full size before going lower. Detailed textures — foliage, fabric, hair, fine gradients — degrade first.

An important caveat: quality settings only apply to lossy formats (JPEG, WebP). Saving a PNG at "80" does nothing, because PNG is lossless. If your file is a PNG photo, the format is the problem.

Step 3: Pick the right format

This is where the biggest wins usually are:

JPEG — photographs. Universally supported, no transparency. The safe default for a photo.

PNG — screenshots, logos, line art, anything needing transparency or crisp edges. PNG keeps text and sharp boundaries clean where JPEG smears them. It is a poor choice for photos: a photographic PNG is often several times the size of an equivalent JPEG.

WebP — typically 25–35% smaller than JPEG at comparable quality, supports transparency, and is supported by every current major browser. For web use it is usually the right trade-off between size and compatibility.

A quick decision rule:

• Photo → WebP, fall back to JPEG if you need maximum compatibility
• Screenshot, logo, or transparency → PNG, or WebP if size matters more than universal support
• Anything going into a printed document → PNG or a high-quality JPEG

A worked example

A 3024 × 4032 photo straight off a phone, destined for a 700px-wide blog slot:

1. Original: 3.8 MB, PNG
2. Resized to 1400px wide: ~900 KB
3. Converted to JPEG at quality 80: ~180 KB
4. Converted to WebP at quality 80 instead: ~130 KB

That is roughly a 96% reduction, and at the size it is actually displayed the difference is not visible. Almost all of the win came from steps 1 and 3 — the resize and the format — not from aggressive compression.

Common mistakes

Compressing before resizing. Squeezing a 6000px image to 200 KB gives you a large, soft image. Resize first; you will need far less compression afterwards.

Using PNG for photographs. The single most common cause of oversized images. PNG is lossless, so a photo keeps every bit of sensor noise.

Upscaling. Enlarging a 400px image to 1200px does not add detail, it invents blur. Go back to the original.

Ignoring the aspect ratio. Typing both a width and a height without the lock will stretch the image. Set one dimension and let the other follow.

Stripping nothing. Camera files carry EXIF metadata — location, device, timestamps. Re-exporting generally drops it, which is good for both privacy and size.

Does this hurt quality?

Resizing down is genuinely lossless in the way that matters: you are removing pixels nobody was going to see. Compression is where judgement is needed, and the honest answer is that at quality 80 on a correctly-sized image, most people cannot tell in a side-by-side test — but you should still look at the result before shipping it, particularly for images with large smooth gradients like skies.

Frequently asked questions

Do my images get uploaded to a server?

Not in EditMyStuff's image editor — resizing, compression and format conversion run in your browser, so the file never leaves your device.

What quality setting should I use?

Start at 80 for photographs and inspect the result at full size. Drop to 70 for thumbnails, raise to 90 if you see artefacts in gradients.

Is WebP safe to use now?

Yes, for the web — it is supported by all current major browsers. For a file someone will open in older desktop software, JPEG or PNG remains the safer choice.

Why is my PNG so much bigger than my JPEG?

PNG is lossless: it stores every pixel exactly, including invisible sensor noise. JPEG discards detail the eye is poor at noticing. For photographs that difference is often 5–10×.

How do I know what dimensions I need?

Measure the widest the image is ever displayed, then double it for high-density screens. Anything beyond that is bytes nobody sees.

Wrapping up

Resize to the displayed dimensions, compress at around quality 80, and choose WebP for photos on the web and PNG for anything with sharp edges or transparency. Done in that order, an image usually gets dramatically smaller with no visible cost.

If you are optimising images because your pages are slow, the Core Web Vitals guide covers where image weight actually shows up in your metrics.