Image compression explained: lossy vs lossless for websites

Images are usually the heaviest part of a web page, and compression is the main reason one 400 KB photo can look just as good as another at 4 MB. But "compress your images" is vague advice until you understand what compression does to a picture. The choice between lossy vs lossless compression decides whether data is permanently discarded or merely stored more efficiently, and picking the wrong one either bloats your pages or damages logos and screenshots. This explainer covers how each approach works so you can make that choice with confidence.

What an image file actually stores

A digital image is a grid of pixels, and each pixel holds colour values, typically red, green and blue, often with a fourth value for transparency. A 1,600 × 900 photo has 1.44 million pixels. Stored raw at three bytes per pixel, that is over 4 MB before anything else.

Compression reduces that size by finding patterns and redundancy. The two families differ in one crucial way: whether the original pixel values can be perfectly rebuilt when the image is opened.

How lossless compression works

Lossless methods shrink a file without discarding any information. Decompress it and you get back exactly the same pixels, bit for bit.

They rely on techniques similar to those in ZIP files. If a row contains 200 pixels of identical white, the encoder can record "white, 200 times" rather than repeating the value. PNG also applies filters that predict each pixel from its neighbours and store only the small difference, which compresses well when neighbouring pixels are similar.

Where lossless shines

• Logos and icons with flat areas of colour and sharp edges
• Screenshots of software, dashboards or text
• Diagrams, charts and infographics
• Images needing crisp transparency against different backgrounds
• Master copies you plan to edit and re-export later

Where lossless struggles

Photographs are full of subtle variation: noise, gradients, textures, shadows. Almost no two neighbouring pixels are identical, so there is little redundancy to exploit. A lossless PNG of a product photo is often several times larger than a good-quality JPEG of the same image, with no difference a visitor could see.

How lossy compression works

Lossy methods permanently throw away information the human eye is unlikely to notice. The file that comes back is an approximation, not a copy.

JPEG, the classic example, works in stages. It separates brightness from colour, because our eyes are more sensitive to brightness detail, and often stores colour at reduced resolution, a step called chroma subsampling. It then splits the image into small blocks and converts each into frequency components using a mathematical transform. Fine, high-frequency detail is rounded off more aggressively than broad shapes and tones. That rounding step, known as quantisation, is where data is lost and where most of the size saving comes from.

Newer formats such as WebP and AVIF use more advanced prediction and transforms, which is why they can often reach similar visual quality in smaller files.

What the quality setting really controls

Export dialogs usually offer a quality slider from 0 to 100. It does not mean "percentage of the original retained". It controls how coarsely detail is rounded off during quantisation.

• High settings (around 90–100): minimal rounding, large files, and diminishing returns. The jump from 90 to 100 can add a lot of weight for almost no visible gain.
• Mid-range settings (roughly 70–85): where most web photos land. Differences from the original are hard to spot at normal viewing size.
• Low settings (below about 60): artefacts start to appear, such as blocky patches in smooth skies, smearing on skin and halos around sharp edges.

Numbers are not comparable between tools or formats. Quality 80 in one encoder may look different from quality 80 in another, and a WebP at 75 is not equivalent to a JPEG at 75. Always judge by eye.

Recognising compression artefacts

Knowing what damage looks like helps you set limits. Zoom to 100 percent and check for:

• Blocking: visible square tiles, especially in skies and plain walls
• Ringing: faint ripples or halos beside text and hard edges
• Banding: smooth gradients breaking into visible stripes
• Colour bleeding: red or blue edges smudging into neighbouring areas, a side effect of chroma subsampling

Text inside images suffers most. A banner with a lossy-compressed price or phone number can look fuzzy even when the photo part looks fine, which is a good reason to keep text as real HTML where possible.

Why saving a lossy file repeatedly makes it worse

Each time you open a JPEG, edit it and export it again as a JPEG, the encoder rounds off detail from an already approximate image. The losses stack up, a problem sometimes called generation loss. Downloading a photo from WhatsApp, which recompresses media, and then compressing it again for your site is a common way to end up with muddy product photos.

Keep an original, high-quality master of every important image, and always export web versions from that master.

Typical savings you can expect

Exact figures depend on the image, so be wary of anyone promising a fixed percentage. As a general pattern, a photograph straight from a modern phone or camera is often several megabytes, and resizing it to web dimensions and applying moderate lossy compression commonly brings it down to a few hundred kilobytes or less. Lossless optimisation of an existing PNG usually saves a more modest amount, because it can only repack data more efficiently rather than discard any.

Some formats offer both modes. WebP supports lossy and lossless encoding, and a lossy WebP can still keep transparency, which is useful for product cut-outs that would otherwise need a heavy PNG.

Choosing the right method for each image

1. Is it a photograph or photo-like image? Use lossy compression.
2. Is it a logo, icon or simple illustration? Prefer SVG if available; otherwise lossless.
3. Is it a screenshot or image containing small text? Start with lossless, and try careful lossy only if the file is very large.
4. Does it need transparency? Use PNG, or WebP/AVIF which support transparency in smaller files.
5. Will you edit it again later? Keep a lossless or original master, and compress only the exported copy.

Getting this right across hundreds of product and gallery images is easier when the website handles it automatically on upload. If you are planning a new build, our website development projects can include that kind of image handling from day one.

Frequently asked questions

Is PNG always better quality than JPEG?

PNG never loses detail, but for photographs a well-compressed JPEG looks the same to most viewers at a fraction of the size. PNG is the better choice for logos, screenshots and graphics with sharp edges.

Can I convert a JPEG to PNG to get the quality back?

No. Converting only stores the already-compressed pixels losslessly. The detail discarded by the JPEG is gone, and the new file will simply be larger.

What does "metadata stripping" mean in image optimisers?

It removes extra information such as camera model, date and sometimes GPS location stored in the file. This saves a little space and can protect privacy, without changing how the image looks.

Does image compression affect SEO?

Indirectly. Smaller images help pages load faster, which supports a better user experience. Image search visibility depends more on relevant file names, alt text and surrounding content than on compression method.