How to compress images without visibly losing quality

Start with dimensions, not quality

The single largest saving usually comes before any compression setting is touched. A photograph straight from a phone is commonly 4000px wide; the container it lands in is rarely wider than 1200px on a laptop and 400px on a phone. Serving four times the pixels the screen can display wastes bandwidth no encoder can recover.

Decide the maximum rendered width of the image, double it for high-density screens if the detail matters, and resize to that. A 4000px hero reduced to 1600px loses roughly 84% of its pixel count before a quality slider is involved.

Choose the format by content type

Format choice is the second-largest lever. Modern formats encode the same picture in substantially fewer bytes because they use better prediction and entropy coding.

• Photographs and complex gradients: WebP at quality 75–80, or AVIF where your pipeline supports it.
• Screenshots and flat UI graphics: WebP lossless, or PNG when the image has large uniform areas and hard edges.
• Logos, icons and diagrams: SVG, which is resolution-independent and usually a fraction of the size.
• Animation: WebP or a short muted MP4 rather than GIF, which is limited to 256 colours and very inefficient.

Pick a quality setting you can justify

Encoder quality is not a percentage of visual fidelity; it is a knob on how aggressively detail is discarded. In practice the band between 70 and 80 gives large savings with artefacts that survive scrutiny only when you zoom.

Test by loading the original and the compressed version side by side at the size the page actually uses. If you cannot pick the compressed one at 100% zoom, the setting is fine. Compressing at 50 and hoping nobody notices is how banding appears in skies and gradients.

Compress once, from the original

Lossy compression is generational. Each re-encode discards more information, and the losses compound: a JPEG saved four times through different tools shows blocking that no later step can undo. Keep the original master file and produce every derivative from it.

Reserve the space before the image loads

Compression fixes weight; it does not fix layout shift. Always set explicit width and height attributes, or a CSS aspect-ratio, so the browser can reserve the box before the bytes arrive. This is one of the cheapest available improvements to Cumulative Layout Shift.

Pair that with loading="lazy" for anything below the fold and fetchpriority="high" on the single largest above-the-fold image, which is usually your Largest Contentful Paint element.

A workable checklist

Run through this before any image goes into a CMS:

• Resize to the maximum displayed width (rarely more than 1600px).
• Convert to WebP unless a downstream system cannot read it.
• Encode at 75–80% quality and compare against the original at 100% zoom.
• Keep hero images under roughly 200KB and in-body images under 100KB.
• Add width, height and descriptive alt text.
• Lazy-load everything below the fold.

Frequently asked questions

Tools mentioned

• Image Compressor — Shrink JPEG, PNG and WebP files in your browser with a quality slider.
• Aspect Ratio Calculator — Work out the missing width or height for any target ratio.
• Image to Base64 — Convert an image into a data URI you can paste into CSS or HTML.

Keep reading

• WebP vs JPEG vs PNG: which format to use and when
• What is Base64 encoding, and when should you actually use it?
• Title tags and meta descriptions: what still matters

Related tools and guides

Everything referenced in this article, plus the hubs and guides that go with it.