Lossy Compression

What is lossy compression?

Lossy compression reduces file size by permanently discarding information the eye or ear is unlikely to miss. You cannot get the original back: decoding produces an approximation. In return files get much smaller than with lossless compression, which is why JPEG, MP3 and most video use it. The quality setting decides how much is thrown away.

How lossy compression works

Lossy codecs follow the same three steps, with different maths inside:

• Transform. The data is converted into a form where detail can be ranked by importance. JPEG, for example, is DCT-based and works on blocks of the image.
• Quantise. Less important detail is rounded off or dropped, guided by a model of human perception (fine colour differences and very high frequencies are the first to go). This is the only lossy step, and the quality setting controls it.
• Entropy-code. What is left is packed with a lossless pass, the same idea used by lossless compressors.

Because the discarded data is gone, re-saving a lossy file as a lossy file again discards more each time. Edit from the original and export once.

Common lossy formats

MDN's image guide gives these size comparisons at visually similar quality: lossy WebP is on average 25 to 35% smaller than JPEG, and lossy AVIF is around 50% smaller than JPEG. Treat them as typical, not guaranteed: results depend on the image and the encoder settings.

Lossy versus lossless

MDN's rule of thumb: for screenshots, diagrams, logos and line art prefer lossless, because blurring and colour fringes around text and sharp edges are very visible. Photographs and other continuous-tone images usually tolerate lossy compression, because the discarded detail is harder to see.

Lossy compression and web performance

Images are often the heaviest files on a page, so the format and quality setting directly affect download time and metrics such as Largest Contentful Paint, one of the Core Web Vitals. Serve photos as lossy WebP or AVIF with a JPEG fallback through <picture>, size them to the space they fill (see image size) and load below-the-fold ones with lazy loading.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="800" alt="Product on a desk">
</picture>

Note that lossy compression applies to the image itself. Text assets such as HTML, CSS, JavaScript and JSON must never be lossy: they are compressed in transit with a lossless encoding. For a practical walkthrough see improving the images on your website.

Common mistakes

• Using lossy for screenshots, logos and text. Edges smear. Use PNG, lossless WebP or SVG instead.
• Recompressing a JPEG again and again. Each lossy save discards more. Keep the original and export from it.
• One quality value for every image. Check the result by eye on the busiest images. A setting that is invisible on a landscape can show blocks on a gradient.
• Skipping the fallback. AVIF and JPEG XL need a fallback for browsers without support.
• Optimising by file size alone. A tiny file that looks bad costs conversions. Aim for the smallest file that looks right.

Checking image weight with LoadFocus

Compression choices only matter if you measure them. LoadFocus page speed monitoring runs Google Lighthouse audits on desktop and mobile from 25 cloud regions and tracks Core Web Vitals over time, so you can see whether a new image format moves your LCP. For a quick one-off check use the free Core Web Vitals checker. MDN has a full overview of image file types.

FAQ: Lossy Compression

Is JPEG lossy or lossless?

JPEG is lossy. PNG and GIF are lossless, and WebP, AVIF and JPEG XL can be either.

Can I undo lossy compression?

No. The discarded data is gone. Keep the original file and export a compressed copy from it.

What quality setting should I use for JPEG?

There is no single right number. Start in the middle or upper-middle of your tool's scale, compare against the original at the size it is displayed, and lower it until you can just see a difference, then step back up.

Is lossy WebP better than JPEG?

Usually smaller at similar visual quality: MDN reports lossy WebP is on average 25 to 35% smaller than JPEG. Check browser support for your audience and keep a JPEG fallback through <picture> where needed.

Does lossy compression hurt SEO?

Not by itself. Smaller images help load speed, which is a ranking and user-experience factor, but blurry or blocky images hurt users. Balance size and visible quality.

Why is my compressed image bigger?

You may have re-encoded an already optimised file at a higher quality, or converted a flat graphic to a photo format. Compare sizes and try a lossless format for graphics.