“Compress without losing quality” is a slightly optimistic phrase, because most compression trades a little quality for a lot of size. The useful goal is to remove weight the eye cannot see while protecting the detail it can. Understanding where an image’s size comes from makes that trade far easier to control.
Where file size actually comes from
Three things dominate an image’s size: its dimensions in pixels, its format, and its quality setting. Dimensions matter most and are the most commonly wasted — a photo saved at 4000 pixels wide but displayed in a 800-pixel column is carrying five times more data than it can ever show. Format decides how efficiently those pixels are stored, and quality controls how aggressively a lossy format discards fine detail. Cutting size effectively means addressing all three, in that order.
Resize before you compress
The single biggest win is usually resizing. Decide the largest size the image will ever display at, allowing for high-density screens, then scale it to roughly that. There is no benefit to storing pixels the layout will only shrink. Resizing first also means every later compression decision works on less data, so the quality setting can stay higher for the same final size.
Lossy versus lossless
Lossless compression rewrites the same pixels more compactly, so nothing is discarded; PNG works this way and suits graphics with flat colour and sharp edges. Lossy compression, used by JPG, WebP, and AVIF, discards detail the eye is least likely to notice, which is why it achieves much smaller files. For photographs, a good lossy setting is almost always the right choice — the trick is finding the point where further compression starts to show.
Finding the quality sweet spot
Every image has a threshold where artefacts — blocky patches, haloing around edges, muddy gradients — become visible. The sweet spot sits just above it. Rather than guessing a quality number, it helps to set a target size or step the quality down while comparing against the original. Photographs with lots of texture hide compression well and can go lower; images with large flat areas or sharp text show artefacts sooner and need a gentler hand.
A simple workflow
Start from the highest-quality original you have. Resize to the real display dimensions. Choose a format that fits the content — a lossy one for photos, a lossless one for graphics. Then compress while comparing to the original, stopping as soon as you can see a difference and stepping back one notch. Keep the original safe, because you can always compress it again later, but you cannot recover detail once it is gone.
Common mistakes
The frequent errors are compressing before resizing, so effort is spent on pixels that get thrown away anyway; pushing quality so low that edges and gradients visibly break down; and repeatedly re-saving the same lossy image, since each save compounds the loss. Avoiding those three keeps images light without the visible damage that “over-compression” usually means.