How Image Compression Works: Lossy, Lossless and the Quality Slider

Image compression works in one of two ways. Lossless methods such as PNG find a shorter way to describe exactly the same pixels, so nothing is lost. Lossy methods such as JPEG and lossy WebP deliberately discard detail that human eyes are poor at noticing, which is why they can make a file five or ten times smaller. The quality slider in any compressor simply controls how much detail is thrown away.

Lossy versus lossless: two different promises

A lossless format makes a strict promise: decode the file and you get back every pixel with the exact colour value it had before. Think of it like a zip archive. PNG, GIF and lossless WebP work this way. The catch is that photographs compress poorly under this promise. Real-world images are full of noise, subtle gradients and texture, and there is no short way to describe randomness exactly.

A lossy format makes a weaker promise: decode the file and you get back something that looks the same at normal viewing size. The encoder may simplify colours, smooth fine texture and round off values, as long as the result is visually close. JPEG, lossy WebP, AVIF and HEIC all take this route. A 12-megapixel photo stored as raw pixels would be 36 MB; as a good-quality JPEG it is typically 2 to 4 MB.

How the three main formats actually work

JPEG: throw away what the eye cannot see

JPEG starts by converting the image from red, green and blue channels into one brightness channel and two colour channels. This matters because human vision is far more sensitive to brightness than to colour. Most encoders then halve the resolution of the two colour channels in both directions, a step called chroma subsampling. That alone removes half the data before any real compression has begun, and almost nobody notices.

Next, the image is cut into blocks of 8 by 8 pixels. Each block is transformed from a grid of pixel values into a set of frequencies, from the broad average tone of the block down to the finest texture. This is the discrete cosine transform. The fine, high-frequency detail is then divided by numbers from a quantisation table and rounded off. Large divisors crush fine detail to zero; small divisors keep more of it. Finally, the rounded numbers, now mostly zeros, are packed with entropy coding, which is lossless.

Those 8 by 8 blocks are why heavily compressed JPEGs show square artefacts and why sharp edges get a halo of ringing. JPEG has no transparency and no animation.

PNG: predict, then deflate

PNG does not transform pixels at all. Instead, before each row of pixels is stored, it applies a filter that predicts each pixel from its neighbours and records only the difference. In a flat area or a smooth gradient the differences are tiny and repetitive. That stream of small numbers is then compressed with Deflate, the same algorithm used in zip files, which finds repeated patterns and replaces them with short references.

This is why PNG is superb for screenshots, interface graphics and logos, where large areas repeat exactly, and so poor for photographs, where almost nothing repeats. PNG supports full 8-bit transparency, which JPEG cannot do. Some tools offer a "lossy PNG": they reduce the image to a palette of 256 colours, which is lossy, then store that losslessly. On flat graphics it can cut the file by 60 to 70 per cent with little visible change.

WebP: both approaches in one container

WebP, developed by Google, has a lossy mode and a lossless mode. The lossy mode borrows from the VP8 video codec. Rather than treating each block in isolation, it predicts each block from the blocks already decoded around it and stores only the difference, then transforms and quantises that residual. Better prediction means fewer bytes. In Google's own tests, lossy WebP files are roughly a quarter to a third smaller than JPEGs of comparable quality.

Lossless WebP uses a richer set of predictors than PNG, a cache of recently used colours and LZ77 matching, and is typically 20 to 30 per cent smaller than an optimised PNG. Both modes support transparency and animation, and every current browser has supported WebP since 2020. AVIF, built from the AV1 video codec, compresses even harder but is slower to encode and less widely supported in older software.

What the quality slider actually controls

The quality value, usually 0 to 100, is not a percentage of the original. It scales the quantisation tables. Quality 100 uses divisors close to 1, so almost nothing is rounded away, though the file is still lossy because of chroma subsampling and rounding inside the transform. Quality 50 uses much larger divisors and discards most fine texture. The scale is not linear: dropping from 100 to 90 saves a huge number of bytes, while dropping from 60 to 50 saves few and costs a lot of visible quality.

Here is a typical result for a 4000 by 3000 pixel phone photo re-encoded at different settings. Your figures will differ, but the shape of the curve is the same for almost any photograph.

JPEG quality	File size	Saving versus 100	What you see
100	8.9 MB	0%	Nothing different from the camera original
90	3.4 MB	62%	Indistinguishable at any normal size
80	2.1 MB	76%	Indistinguishable unless you zoom to 200%
70	1.5 MB	83%	Faint softening in fine textures such as hair and grass
50	0.9 MB	90%	Visible blocks in skies and smooth skin
30	0.6 MB	93%	Obvious artefacts; colour banding on gradients

Notice that 90 per cent of the bytes are gone by quality 50, but so is much of the picture. The sweet spot for the web is almost always between 75 and 85. Below that you trade visible damage for small savings; above it you pay many bytes for detail no screen will show.

What "compress without losing quality" really means

You will see this phrase on many compression tools, including ours. It is worth being precise about it, because it can mean three different things.

1. Truly lossless optimisation. A PNG or JPEG can often be made smaller without changing a single pixel: better Deflate settings, removing unused palette entries, stripping metadata, or re-doing the entropy coding stage of a JPEG. Savings are real but modest, usually 5 to 20 per cent.
2. Visually lossless compression. The encoder discards detail, but it is tuned to stay below the threshold where an ordinary viewer would notice. This is what most tools mean. Savings are large, often 60 to 80 per cent on an unoptimised photo.
3. Lossy with a target. Some tools let you set a size limit, such as 200 KB, and lower the quality until the file fits. Quality is whatever the budget allows.

Only the first is lossless in the strict sense. The practical reading of the phrase is: compress so that nobody can tell. Open the original and the compressed version side by side at 100 per cent zoom and look at fine text, hair, foliage and smooth skies. If you cannot find a difference, the setting is fine.

Resizing versus compressing

These are different operations and people often reach for the wrong one. Compressing changes how the pixels are encoded. Resizing changes how many pixels there are. For images that are far larger than they will ever be displayed, resizing saves vastly more than any quality setting can.

The correct order is always resize first, then compress. Resizing a heavily compressed image does not recover the lost detail; it just scales the artefacts. Use the Image Resizer to bring the dimensions down to what the page actually needs, then pass the result through the Image Compressor. Both run in your browser, so the original never leaves your machine.

Metadata: the bytes you did not know you were shipping

A JPEG from a camera or phone carries more than pixels. The EXIF block records the camera model, lens, exposure, date and time, software, and often the GPS coordinates of where the photo was taken. Many files also carry an embedded thumbnail, an ICC colour profile and an XMP block from editing software. Together these commonly add 20 to 100 KB, and files that have passed through desktop editors can carry several hundred kilobytes of history.

For a web image, almost none of this is useful, and the location data is a genuine privacy issue if you are publishing photos of your home or your children. Stripping metadata is a pure win: the file gets smaller and no pixel changes. The one block worth keeping is the colour profile when an image uses a wide-gamut space such as Display P3; for ordinary sRGB images, which is nearly everything on the web, the profile can go too. If you need to keep copyright or attribution, put it in the page around the image, where people can actually read it.

If a photo already exists and you only want the metadata gone, the EXIF Data Remover reports what it found (EXIF, XMP, IPTC, a colour profile, and whether GPS coordinates were present) and saves a clean copy. It does this by redrawing the picture into a new file, so a JPEG is encoded once more at the quality you choose (92 by default). That is a very small change, but it means the result is not guaranteed to match the original pixel for pixel, and any colour profile is dropped along with the rest.

Choosing a format

The format decision comes before the quality decision. A photo saved as PNG will be enormous, and a logo saved as JPEG will have fuzzy edges and no transparency.

Format	Type	Transparency	Animation	Best for	Avoid for
JPEG	Lossy	No	No	Photographs, anything with gradients	Text, logos, screenshots
PNG	Lossless	Yes (8-bit alpha)	No (APNG rarely used)	Screenshots, logos, line art, icons	Photographs
WebP	Both	Yes	Yes	Almost everything on a modern website	Email, very old software
AVIF	Both	Yes	Yes	Large hero photos where every byte counts	Anything that must open everywhere
GIF	Lossless, 256 colours	Yes (1-bit)	Yes	Legacy animations only	Everything else
SVG	Vector	Yes	Yes	Logos, icons, diagrams	Photographs

For a website today, a sensible default is WebP for every raster image, with a JPEG or PNG fallback only if you must support very old browsers or email clients. The Image Converter switches between PNG, JPEG and WebP in your browser, so you can try a WebP version of a photo and compare sizes in seconds. Logos and icons are nearly always better as SVG, which describes shapes rather than pixels and stays sharp at any size.

A practical workflow for web images

This sequence reliably produces small, sharp images and takes about a minute per image.

1. Decide the display width. Measure the widest the image will ever appear on the page. For a blog column that might be 800 pixels; for a full-width hero, 1600 to 1920.
2. Resize to twice that width, at most. High-density screens draw two device pixels per CSS pixel, so an 800-pixel column deserves a 1600-pixel image. Going beyond 2x is wasted bytes.
3. Choose the container. Photo or gradient: WebP, or JPEG if you need maximum compatibility. Flat graphic, text or transparency: PNG, or lossless WebP. Logo: SVG.
4. Compress at quality 75 to 85. Start at 80. Drop to 70 for large hero images; go up to 85 or 90 for product shots where texture matters.
5. Check at 100 per cent zoom. If you can see blocks or ringing, go up five points and export again.
6. Strip metadata. Leave this on unless you need an embedded colour profile.
7. Set a byte budget. Keep content images under 100 KB, hero images under 250 KB and thumbnails under 30 KB. If an image blows the budget, lower the quality a little before shrinking the dimensions.

Do all of this before uploading to your content system, not after. Most platforms re-encode whatever you give them, and a clean source produces a clean result.

Where to go next. Bring oversized photos down to size with the Image Resizer, then squeeze them with the Image Compressor, and use the Image Converter to try a WebP version and compare. All three run in your browser and nothing is uploaded.

Frequently asked questions

Does compressing a JPEG always reduce its quality?

Re-encoding a JPEG always involves a rounding step, so strictly speaking yes, something is lost each time. In practice, one pass at quality 80 or above on an unoptimised photo produces no visible change at normal viewing size. The damage becomes noticeable when the same image is saved repeatedly, or when quality is pushed below about 60. Keep a lossless master and export from it rather than re-saving the JPEG.

Is PNG or JPEG better for the web?

It depends on the content, not on the website. JPEG is better for photographs and anything with smooth gradients, where it can be a tenth of the size of a PNG. PNG is better for screenshots, logos, text and images with transparency, where it stays perfectly sharp and is often smaller than a JPEG. For most modern sites WebP replaces both, since it handles photos and graphics well and supports transparency.

What JPEG quality should I use for website images?

Between 75 and 85 is the sensible range for almost every web photo. At those settings the file is typically 70 to 80 per cent smaller than quality 100, and the difference is invisible unless you zoom in well past actual size. Use the higher end for product photography and portraits where texture matters, and the lower end for large background or hero images where savings add up quickly.

How much smaller is WebP than JPEG?

In Google's published tests, lossy WebP files are roughly 25 to 34 per cent smaller than JPEGs of comparable visual quality, and lossless WebP is around 26 per cent smaller than PNG. Real results vary with the image: photos with lots of smooth area gain the most, while noisy or highly detailed pictures gain less. Every current browser supports WebP, so it is a safe default for websites.

Should I resize an image before compressing it?

Yes, always resize first. Resizing removes pixels, which saves far more than any quality setting can. A 4000-pixel-wide photo scaled to 1600 pixels has 6.25 times fewer pixels before compression even starts. Compressing first and then resizing scales the artefacts along with the picture and produces a worse result. Size the image to twice its display width for high-density screens, then compress.

Does removing EXIF data reduce image quality?

No. EXIF, XMP and embedded thumbnails are stored alongside the pixels, not inside them, so stripping them changes nothing you can see. It typically removes 20 to 100 KB from a phone photo and also deletes the GPS coordinates that reveal where the picture was taken. The only block worth keeping is an ICC colour profile for wide-gamut images; ordinary sRGB photos do not need it.