How to compress images with little visible quality loss: a practical guide

"Compress without losing quality" sounds contradictory. Lossy compression discards data by definition. In practice, a photo is often 50–80% smaller, depending on the image, without changes the human eye notices at standard viewing distances.

Codecs exploit the limits of human perception: they discard high-frequency data your eyes cannot easily resolve while keeping structure intact. Here is how to apply that process cleanly.

Why images are bigger than necessary

Before adjusting quality settings, identify where unnecessary file weight originates:

The image exceeds display dimensions. A smartphone photograph measures roughly 4000 pixels across. A blog article typically displays it at 800 pixels. Storing twenty-five times the necessary pixels inflates file size regardless of encoding efficiency.

The file uses the wrong format. A screenshot saved as JPEG is both larger and less sharp than the same screenshot saved as PNG or lossless WebP. Conversely, saving a photograph as PNG often yields a file ten times larger than an equivalent JPEG.

The file retains unneeded metadata. Camera EXIF records, GPS coordinates, embedded colour profiles, editing history, and thumbnail previews add tens or hundreds of kilobytes.

The file was saved at quality 100. Quality 100 in lossy codecs multiplies file size without adding visual value.

Addressing these four areas can remove a large share of the extra file weight before adjusting compression levels.

How quantization tables work

The quality slider does not scale an abstract fidelity index. In JPEG and WebP encoders, it adjusts a quantization table that determines how coarsely the algorithm rounds high-frequency detail across pixel blocks.

High-frequency content includes fine textures and sharp transitions, such as fabric weaves, foliage, and text edges. Low-frequency content includes broad surfaces, shapes, and gradual colour shifts. Human vision resolves low-frequency structure far more acutely than fine textures. By rounding high frequencies aggressively while preserving low frequencies, lossy codecs shed significant data without altering apparent sharpness.

The size-to-quality curve reflects this asymmetry:

The sharpest drop in file size occurs between 100 and 85, with no visible degradation on standard displays. Below 70, compression artefacts become apparent.

For standard photographic content, quality 75–85 delivers the optimal balance.

The cost of quality 100

Setting quality to 100 in a lossy codec does not make the output lossless. The encoder continues to run discrete cosine transforms and quantization; it merely rounds to finer tolerances. At that setting, the encoder faithfully preserves sensor noise and previous compression artefacts.

You accept double or triple the file size to retain invisible noise while still discarding source data. When pixel-exact reproduction is required, select a true lossless format such as PNG or lossless WebP.

This is also the honest reading of the common phrase "compress without losing quality". It means visually lossless: the decoded pixels differ from the source, and the differences sit below what the eye resolves at a normal viewing distance. Mathematically lossless is a separate guarantee with a separate cost, and it is the right one for masters, archives, and anything that will be edited again.

Resize before compressing

Resizing reduces pixel count, whereas compression lowers the data stored per pixel. Because pixel volume compounds quadratically with dimensions, resizing provides the largest single reduction in total weight.

Consider a 4000 × 3000 pixel photo (3.2 MB) displayed in an article at 800 pixels wide:

• Compressing to quality 80 without resizing: ~900 KB.
• Resizing to 1600 pixels wide (providing 2x density for high-DPI displays) and compressing at quality 80: ~110 KB.

Both look identical on screen, but the resized version downloads eight times faster.

Match target dimensions to deployment contexts:

When processing sets of images, resizing to a uniform width yields the greatest reduction.

Match formats to image structure

Codec selection depends on the underlying visual characteristics of the source file:

• Photographs (continuous tone, subtle gradients, natural variation): JPEG or lossy WebP. AVIF works well for large banner images.
• Screenshots, diagrams, and vector assets (flat colour regions, sharp contours, text): PNG or lossless WebP. JPEG produces mosquito noise and blurred borders around sharp typography.
• Assets with transparency: PNG or WebP with alpha. JPEG does not support alpha channels and flattens transparent pixels to white.
• Logos and simple iconography: SVG when vector source files exist. Vector data scales cleanly at fractions of raster file sizes.

For detailed trade-offs across raster alternatives, see our comparison in WebP vs AVIF vs JPEG.

For mixed assets, such as software screenshots containing embedded photos, test both lossless WebP and quality-80 lossy WebP using an in-browser converter to see which yields a better ratio without smearing text.

Metadata stripping

Excluding unnecessary EXIF data saves file space and protects location privacy. Standard smartphone captures record camera models, lens metadata, timestamps, and GPS coordinates.

Keep two specific metadata properties when applicable:

• Orientation tags, unless your processing tool bakes rotation directly into the pixel grid.
• Embedded colour profiles, if the source uses wide-gamut spaces like Display P3 rather than standard sRGB. Stripping a wide-gamut profile without conversion shifts tones toward muted, desaturated values.

Recommended processing sequence

Executing operations out of order compounds degradation or inflates sizes:

1. Start from the uncompressed master. Re-editing a lossy file introduces generational loss.
2. Apply visual adjustments first. Complete cropping, rotation, exposure correction, and retouching before final compression.
3. Resize to target dimensions.
4. Select the target format based on image type.
5. Encode at quality 80, then inspect at 100% zoom.
6. Strip non-essential metadata, preserving orientation and custom colour profiles where needed.

Compressing before resizing scales up compression artefacts across the newly interpolated pixels.

Inspection checklist at 100% zoom

Inspect output images at 100% scale rather than fit-to-window view. Check four specific regions:

• Subtle gradients: Watch for stepped banding across skies and blurred backdrops.
• High-contrast borders: Check for ringing or mosquito noise around dark typography over light backgrounds.
• Fine textures: Inspect foliage, hair, and woven fabrics for blur or loss of texture.
• Deep shadows: Ensure dark regions do not break into blocky patches.

When a hard size limit is the constraint

Upload forms, email attachments, and application portals impose fixed ceilings, which inverts the problem: the size is given and the quality is whatever fits under it.

Work through the levers in this order, because they cost visual fidelity in ascending order:

1. Cut dimensions first. Halving the width quarters the pixel count. This buys more headroom than any quality setting and costs nothing at the size the image will actually be viewed.
2. Strip metadata. Tens to hundreds of kilobytes, at zero visual cost.
3. Switch format. Moving a photograph from JPEG to WebP at matched quality removes another 25–35%.
4. Lower quality, last. Step down in fives from 85 and inspect each result. Dropping straight to 40 to clear a limit in one move produces a file that meets the requirement and looks it.

A portrait or a document photo deserves particular care here, because compression artefacts on a face read as poor quality to a human reviewer and can fail an automated check.

Batch processing guidelines

When processing large directories of images, the productive unit is a policy rather than a per-image decision. Settings chosen individually drift across a set, and nobody's judgement at image two hundred matches their judgement at image one.

Establish rules across the set:

• Set a uniform maximum width based on your site's widest display template.
• Assign formats by content type: lossy WebP for photos, lossless WebP for screenshots and UI assets.
• Target quality 80 for photographic content.
• Strip metadata while baking orientation into the pixel buffer.

Spot-check the most challenging samples in the batch: the file with the smoothest gradient sky, the one with dense text, and the lowest-key image with deep shadows. If those three maintain fidelity, the remainder of the set is ready for production.

OpusImg's compressor executes WebAssembly codecs locally inside client web workers. Files process on your machine without network transfers, allowing fast iteration across quality settings.