Reducing Image File Size Without Losing Quality

"Compress this image, but don't make it look worse" sounds like a contradiction. It usually isn't. Most images on the web are far larger than they need to be for reasons that have nothing to do with visual quality, and removing that waste costs you nothing at all.

This guide works through the savings in order, from the ones that are genuinely free to the ones where you start trading quality for bytes — and shows you where that trade stops being worth it.

What "losing quality" actually means

Compression comes in two kinds, and confusing them is the source of most bad advice.

Lossless compression stores the same pixels more efficiently. Decompress the file and you get back byte-for-byte what you started with. PNG, and the metadata stripping described below, are lossless. There is no quality question — the image is mathematically identical.

Lossy compression throws information away permanently, choosing details your eye is least likely to notice. JPEG, and WebP and AVIF in their usual modes, are lossy. Quality is a dial, not a yes or no.

Step 1: Strip metadata (completely free)

Photos from cameras and phones carry EXIF data: camera model, lens, exposure settings, timestamps, GPS coordinates, and often an embedded thumbnail of the image itself. Files exported from design tools carry colour profiles, editor namespaces and generator comments.

None of it changes a single pixel a visitor sees. On a typical photograph it is a few percent of the file; on a small image it can be a surprisingly large share, because the metadata does not shrink when the image does.

There is a second reason to strip it. GPS coordinates in a holiday photo tell anyone who downloads it exactly where you were standing. Publishing an image without removing EXIF publishes that too.

Step 2: Fix the dimensions (usually the biggest win)

This is the saving people most often skip, and it is almost always the largest one available.

A modern phone camera produces images around 4000 pixels wide. If that image is displayed in a 800-pixel-wide column, roughly 96% of the pixels you sent are discarded by the browser before anything appears on screen. You paid for every one of them in bandwidth and decode time.

Resizing an image to the size it is actually displayed at is not a quality loss in any meaningful sense — the browser was going to scale it down regardless. You are simply doing the work once, on a server, instead of on every visitor's device.

Step 3: Choose a format that suits the content

Using the wrong format can cost more than any quality setting. The classic mistake is a photograph saved as PNG: because PNG is lossless, it stores every subtle gradient in a photo exactly, and the result is often five to ten times larger than the same photo as JPEG at quality no one could distinguish.

The reverse mistake is a logo or screenshot saved as JPEG. Lossy compression handles sharp edges badly, producing visible halos around text and hard boundaries — the one case where compression artifacts are genuinely obvious.

If you are unsure which applies to your files, our format comparison guide works through each one in detail.

Step 4: Find the quality sweet spot

Only now do you reach an actual trade-off — and it is far more forgiving than most people expect.

Cameras and design tools typically save at quality 95 or higher. That is well past the point of diminishing returns: the file grows steeply while the visible improvement approaches nothing. Dropping to the mid-80s often removes half the file size with no difference you can see at normal viewing distance.

The relationship is not linear. Between quality 100 and 85 you shed a great deal of file size for almost no perceptible change. Between 85 and 70 you continue saving with slight softening in fine detail. Below about 60, artifacts become genuinely visible — blocking in smooth areas and mushiness in texture.

Step 5: Let flat graphics use a palette

Here is a case where a technically lossy technique is visually free. A PNG stores up to 16.7 million possible colours per pixel, but a logo might use eight. Reducing the stored palette to only the colours actually present routinely halves the file with no visible change whatsoever — and when an image has 256 or fewer distinct colours, the conversion is exactly lossless.

The technique works beautifully on logos, icons, screenshots and flat illustrations. It works badly on photographs, where thousands of subtle shades get collapsed into a limited palette and produce visible banding across skies and skin tones. Good tools detect the difference rather than applying it blindly. You can try it on your own files with our PNG compressor.

Step 6: Send different sizes to different devices

Step 2 asked you to resize to the dimensions you display. But you do not display one size — a phone might show an image at 400 pixels wide where a desktop shows it at 1200. Export a single file and you are choosing which group to waste bandwidth on.

The srcset attribute solves this by offering the browser several files and letting it pick. It knows the viewport size and pixel density before the image loads, so its choice is better than any guess you could make server-side.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Descriptive alt text"
  loading="lazy"
  width="800" height="600">

A phone downloads the 400-pixel version and a desktop the 800, from the same markup. On image-heavy pages this routinely beats every compression setting combined, because it stops sending pixels nobody will ever see.

Two details in that snippet matter beyond file size. loading="lazy" defers images below the fold until the visitor scrolls toward them. And the explicit width and height let the browser reserve the right space before the image arrives, which prevents the page from jolting as it loads — a shift Google measures and penalises.

How to check you haven't lost quality

Judging compression by eye is harder than it sounds, because you are usually looking at two images that are almost identical.

• Compare at 100% zoom, not fit-to-window. Scaling hides artifacts that will be plainly visible on a phone.
• Look at the hard cases specifically: smooth gradients such as skies, areas of flat colour, sharp text edges, and fine repeating texture.
• Flip between the two images in the same position rather than viewing them side by side. Differences that are invisible side by side jump out when they blink.
• Check on a phone. Most of your visitors are on one, and it is a smaller, brighter, higher-density screen than your desktop monitor.

If you cannot tell the difference under those conditions, your visitors will not either — and they get a page that loads faster, which they very much will notice.

Four mistakes that genuinely do cost quality

Everything above is either free or a controlled trade. These are the ways people actually damage their images.

1. Compressing an already-compressed file

Every lossy save discards a little more detail, permanently. Re-saving the same JPEG repeatedly degrades it cumulatively, a problem known as generation loss. Always compress from your original file, never from a copy that has already been through the process.

2. Upscaling

Enlarging a small image does not add detail that was never captured. It adds file size and softness. If you need a larger image, go back to the source.

3. Quantising photographs to a palette

The palette trick from step 5 is visually free on graphics and destructive on continuous-tone photographs. Applied indiscriminately it produces obvious banding — most noticeable in skies, skin tones and any slow gradient.

4. Chasing the smallest possible number

It is easy to treat file size as a score to minimise. Past a certain point you are trading real visual quality for savings your visitors will never perceive as speed. A page that loads in 1.2 seconds instead of 1.3 is not worth a hero image that looks blotchy.

Putting it together

Applied in order, the steps compound. Strip metadata, resize to the dimensions you actually display, pick a format that suits the content, then set quality somewhere in the 75–85 range. Most images end up 30% to 60% smaller with nothing visible given up.

And the payoff extends past bandwidth. Images are typically the heaviest thing on a page, so they dominate loading performance — which Google measures directly and factors into rankings. We cover that relationship in detail in image optimization for website speed and SEO.