Image Compression Explained: Lossy vs Lossless

STILL IMAGE GUIDES

In this guide

Understand lossy and lossless image compression, why formats differ, and how to choose quality settings without guessing about file-size savings.

Lossless keeps decoded pixels

Lossless compression stores image information so it can be decoded back to the same pixel values. PNG is a common lossless choice. It works well for graphics with transparency, sharp edges or text. It may not make a detailed photo compact because the image contains many variations that are difficult to represent with lossless coding.

Lossy trades detail for fewer bytes

Lossy encoders discard some visual information to reduce file size. JPG and lossy WebP can work well for photographs, but aggressive settings may create blur, ringing around edges or block patterns. The result depends on the image, dimensions and encoder, so preview the actual output.

Dimension changes are separate

Reducing width and height removes pixels before encoding and often lowers file size substantially. It also changes the maximum detail available when the image is enlarged. Compression quality and pixel dimensions solve different problems; choose them together based on where the image will be used.

Avoid repeated lossy exports

Keep an original or high-quality source and make new exports from it. Reopening a JPG and exporting it again can apply another lossy pass. If a platform needs a second size or format, generate that copy from the source rather than from an already-compressed derivative.

Measure rather than assume

A quality slider does not map directly to a fixed number of kilobytes. The app must encode the file to know its size. Compare the real result and inspect the image; if a strict limit is involved, use a target-size workflow and verify every other dimension and format requirement.

Understand why photos behave differently

A photo contains sensor noise, texture, shadows and many gradual transitions. Lossless encoding preserves all decoded pixel values, but those details can be expensive to store. Lossy encoders simplify information that is less noticeable at ordinary viewing sizes, which is why they often work well for photographs. A flat logo behaves differently: its few colours and hard edges may benefit from lossless PNG instead.

Choose based on what must survive

Use lossless output when exact pixel values, transparency or crisp text matter, such as a diagram or interface capture. Use lossy JPG or WebP when a photographic image needs fewer bytes and a small visual trade-off is acceptable. The correct choice depends on the destination and how large the image will appear. Compare an actual export because the same quality setting can behave differently across images.

Know what dimensions change

Resizing removes or adds samples before encoding. Reducing dimensions can lower file size even when the format stays the same, but it also limits how much the image can be enlarged later. Increasing dimensions interpolates pixels rather than restoring real detail. Compression quality, format and pixel dimensions are separate controls; change them with the final display or print use in mind.

Avoid multiple lossy generations

Each JPEG or lossy WebP export can discard additional information. Opening a compressed file and saving it repeatedly may gradually soften edges and gradients. Keep a source or lossless intermediate, then generate each delivery file from that source. If an editor offers a high-quality original, use it rather than a screenshot or a copy downloaded from a platform that has already recompressed it.

Treat the quality number as a control, not a promise

A quality percentage is an encoder input and does not mean the same number of kilobytes or the same visible result for every format. Still measures the actual Blob returned by Canvas after encoding. Compare the result visually and numerically. For a strict limit, target-size search can test lower quality and smaller dimensions, but review the final pixels and confirm the receiver's rules before sharing.

Recognize common signs of excessive loss

Lossy artifacts can appear as square blocks in smooth shadows, ringing around strong edges, smudged fine hair or colour bands in a gradient. Inspect areas with detail rather than judging only an average colour or the reported file size. If those marks distract from the image's purpose, move the quality setting higher, reduce dimensions less aggressively or choose a format that better suits the graphic.

Remember that lossless does not mean small

Lossless describes whether decoded pixel values are recoverable; it does not guarantee a compact file. A screenshot with flat colours may compress efficiently as PNG, while a detailed photo may need many bytes to preserve every variation. A PNG that is already optimized can also grow when a browser re-encodes it. Measure the actual export and keep PNG when its transparency or precise edges matter.

Use a high-quality source for new derivatives

Each time a lossy image is decoded and saved, subtle information may be discarded. If you need a square crop, a profile image and a full-width photo, make each copy from the source rather than creating the second and third outputs from the first export. Keeping a master avoids generation loss and gives you more freedom to change dimensions when the layout changes.

Keep compression separate from scaling

A quality setting affects encoding, while width and height control the pixel grid. You can preserve high visual quality and still reduce bytes by removing unused resolution when the destination displays a small image. Conversely, a very small pixel count may make the subject visibly soft even with a high-quality setting. Choose dimensions according to the display or print use, then tune compression around that decision.

Make the decision with a measured file

Compare original and output byte counts after the browser finishes encoding. The percentage in a settings panel is not a promise about the resulting size, and different encoders use their own quality scales. Preview the file, confirm that it meets the target's format and dimensions, and keep your source. A tested result is more useful than an assumed saving based on format or slider position.