Lossy vs Lossless Compression, Explained
Every image format makes a trade between file size and fidelity, and that trade comes down to one choice: lossy or lossless compression. This guide explains what each one actually does to your pixels, which formats use which, and how to pick the right one so your images stay sharp without bloating your page.
Key takeaways
- Lossless compression shrinks a file while keeping every pixel identical; lossy compression discards data you are unlikely to notice to shrink it much further.
- PNG, GIF and WebP-lossless are lossless; JPG and standard WebP are lossy. WebP and AVIF can do either.
- Use lossless for screenshots, logos, line art and transparency; use lossy for photographs and large web images.
- Lossy is generationally destructive - re-saving the same JPG repeatedly degrades it, so always edit from the original.
What compression actually does
An uncompressed image stores a colour value for every single pixel, which is huge - a plain 12-megapixel photo is around 36 MB of raw data. Compression is the maths that squeezes that down to a sensible file size. There are two fundamentally different strategies. Lossless compression finds and removes redundancy - long runs of the same colour, repeated patterns - so the file is smaller but, when reopened, reconstructs the original exactly, pixel for pixel. Lossy compression goes further: it permanently throws away information the human eye is least likely to miss, trading a little fidelity for a much smaller file. Both happen automatically when you save or convert an image, for example through the image converter, but knowing which one a format uses tells you what you are gaining and giving up.
How lossless compression works
Lossless methods rely on the fact that real images are full of repetition. Algorithms like DEFLATE (used by PNG) and LZW (used by GIF) scan for repeated sequences of pixels and store them as compact references instead of writing the same data over and over - a flat blue sky becomes "this blue, 4,000 times" rather than 4,000 separate entries. Because nothing is discarded, you can compress and decompress endlessly with zero quality loss. The catch is that photographs, which have subtle variation in almost every pixel, contain little obvious repetition, so lossless files of photos stay large. That is why a screenshot of solid-colour UI shrinks beautifully as a PNG while a beach photo barely shrinks in the same format. See it yourself by running an image through JPG to PNG and comparing sizes.
How lossy compression works
Lossy compression accepts that the eye is imperfect. JPG, the classic example, breaks an image into small blocks, converts each to frequency data, and then discards the high-frequency detail our vision struggles to perceive - especially fine colour variation, which we notice far less than brightness changes. A quality slider (typically 0-100) controls how aggressive this is: 90 looks visually identical to most people, while 40 introduces visible blocky "artifacts" and smudged edges. The payoff is dramatic - a lossy file is often five to ten times smaller than the lossless version of the same photo. The trade is that the discarded detail is gone forever, which matters most for hard edges, text and flat colour. For a plain-language refresher on terms like artifacts and alpha, the AI image editing glossary is a handy companion.
Which formats use which
Knowing a format's compression type tells you most of what you need:
- JPG/JPEG - lossy only. Built for photographs; no transparency.
- PNG - lossless. Keeps every pixel and supports an alpha (transparency) channel. Ideal for logos, screenshots and graphics.
- GIF - lossless but limited to 256 colours; mainly used for simple animation.
- WebP - can do either. Lossy WebP beats JPG on size; lossless WebP beats PNG, and both support transparency and animation.
- AVIF - newer, also supports both modes with excellent compression, though browser and tooling support is still catching up.
Choosing the right one
The decision is mostly about content, not preference. Choose lossless for anything with sharp edges, text or flat colour - screenshots, logos, icons, line art, diagrams - and for any image that needs transparency, since JPG cannot store an alpha channel. Choose lossy for photographs and large hero images where a slightly smaller file matters more than perfect pixels, which describes most photos on a typical website. A common and effective workflow is to keep a lossless master (PNG or the camera original) for editing, then export a lossy copy for publishing. If you have a heavy PNG photo slowing a page down, converting it with PNG to JPG usually cuts the size by 70-90% with no visible difference.
Compression and page speed
Image weight is one of the biggest factors in how fast a page loads, and load speed feeds directly into Google's Core Web Vitals - particularly Largest Contentful Paint, which is often the hero image itself. Serving an oversized lossless photo where a well-tuned lossy file would do can add hundreds of kilobytes and visibly delay rendering, hurting both user experience and search ranking. The practical playbook: serve photographs as lossy WebP (or AVIF) at quality 75-85, keep graphics and screenshots lossless, resize images to the dimensions they actually display at, and never re-save the same JPG repeatedly, since each lossy save compounds the quality loss. To squeeze the smallest web-ready files, run your photos through PNG to WebP before publishing.