What does compression actually remove?
Lossy encoders discard what vision is least sensitive to: the finest texture, part of the color resolution, and tiny variations inside smooth areas. At high and medium quality those changes are smaller than the noise already in the photo, so the eye cannot find them at the size the image is displayed. As the quality drops, the rounding gets coarser until it creates patterns of its own, called artifacts. Lossless encoders discard nothing; they only store the same pixels more compactly. The mechanics are explained in what is image compression.
What do compression artifacts look like?
| Artifact | What you see | Where it shows first | Fix |
|---|---|---|---|
| Blocking | A grid of 8 × 8 squares | Skies, shadows, smooth walls | Raise quality to 75 or more |
| Ringing (mosquito noise) | Halos and specks around sharp edges | Text, logos, screenshots, line art | Use PNG or lossless WebP, or quality 90+ |
| Banding | Smooth gradients turn into visible steps | Skies, vignettes, UI gradients, 256-color PNGs | Raise quality; avoid palettes for gradients |
| Color bleeding | Colors smear past edges, red text looks fuzzy | Small saturated details, colored text | Turn off 4:2:0 subsampling, or use lossless |
| Smearing | Grass, hair and fabric look painted | WebP and AVIF at low quality | Raise quality |
Which images show compression first?
- Text and line art: screenshots, infographics, slides and logos. Their sharp edges are exactly what lossy formats round away.
- Smooth gradients: clear skies, studio backdrops, dark scenes. Small rounding errors become visible steps or blocks.
- Saturated reds and blues: color is stored at a lower resolution than brightness, so thin colored details blur first.
- Images that were already compressed: a JPEG saved by a messaging app or a CMS has little slack left.
- What hides it best: busy, textured photos (foliage, crowds, gravel) and small thumbnails.
How can you check whether compression is visible?
- Compress a copy at quality 80 and keep the original next to it.
- Look at both at the size they will actually be shown, on the kind of device your audience uses.
- Then zoom to 100% (one image pixel per screen pixel) and inspect the hard areas: skin, sky, hair, text edges.
- Switch quickly between the two files in the same window. Differences you only spot by flipping back and forth will not be noticed by a visitor.
- Pick the lowest quality at which you cannot tell them apart at display size, then add about 5 for safety.
Do not judge at 300% zoom: every lossy image looks imperfect up close, and nobody views your page that way. For per-format settings, see the best WebP quality setting and JPEG quality settings explained.
Is resizing an image a loss of quality?
Not at the size it is displayed. If a photo is shown 800 CSS pixels wide, the browser has to shrink a 4000 px original anyway; doing it beforehand to 1600 px (2× for Retina screens) gives the same sharpness and a far lighter file. Resizing down only costs you something if you later need a larger version, for a print or a zoomable product view, so keep the original. Upscaling, on the other hand, does lose quality: it adds pixels without adding detail. See resize images for the web.
What happens if you compress the same image again and again?
Each lossy save rounds the image again, so losses accumulate. This is called generation loss. A single recompression of a good JPEG at 80–88 is usually invisible; ten rounds with edits in between are not. It is also why a picture that went through a messaging app, a social network and a CMS can look noticeably worse than the original: each step recompressed it. Work from the original whenever you can, and go straight from it to the final format.
How far can you compress before quality drops?
- Photos at quality 75–85: no visible difference at normal size. This is where most of the savings are.
- Photos at 60–70: fine for thumbnails and backgrounds; softness shows in fine texture when you look closely.
- Photos below 50: blocks and smearing become visible on most screens.
- Screenshots and text: 90 and above in lossy formats, or lossless PNG or WebP.
- Logos and flat graphics as 256-color PNG: usually indistinguishable from the original; avoid palettes for gradients.
The compressor works either way: set the quality directly, or type a target size in KB and let it find the highest quality that fits. If even a low quality cannot reach the target, it scales the dimensions down step by step instead of crushing the quality further, and if a file cannot get smaller at all, it keeps the original. Pages such as compress to 200 KB open with the target already set.