Compress images without visible loss

You can often cut an image's file size in half and nobody will notice. The trick is to know the point where lowering quality stops being free and starts to show.

How lossy compression works

Lossy formats throw away detail your eye is least likely to miss, such as tiny color shifts and fine texture. The lower you set the quality, the more they discard. At some point, artifacts become visible.

The goal is to stay just above that point.

Resize before you lower quality

Pixel dimensions often matter more than the quality slider. A 4000 pixel camera photo shown at 1000 pixels holds far more pixels than the page can show. Resize a copy to the largest size it will be shown at, with room for high-density screens. Then adjust compression.

This order protects the detail people can see. Dropping pixels nobody will see does less harm than forcing a codec to squeeze a huge image at a very low quality setting. Keep the full-size original in a separate folder.

Where the sweet spot sits

For most photos, a quality of 80 to 85 percent looks the same as the original at normal viewing size, and the file gets much smaller. Screenshots and line art show damage sooner, so keep their quality higher.

Always preview the result at full size before you use it.

Check the hard parts of the image

Compression errors show up first in the same places: hair, grass, fabric, text on top of photos, smooth skies and sharp color edges. If you only zoom in on a clean subject in the middle, you can miss halos around edges or blocks in dark areas.

Compare the original and the compressed copy at the size people will see. Then look at those hard areas at 100 percent. If the image appears in a responsive layout, check the smallest and largest versions. One export may not work for every screen.

A practical workflow

For a photo saved as JPG or WebP, start at about 82 percent. Check the result. Only go lower if the file really needs to be smaller. Each encoder uses its own quality scale, so treat any number as a starting point.

Keep the original and export one test version at a time. If you need consistent results, write down the final size, format and setting. Don't open and save a compressed file again. Each lossy save can add new artifacts.

Use lossless when the image needs it

Screenshots with small text, diagrams, pixel art and interface graphics can look worse under photo compression, even at a high setting. PNG or lossless WebP usually keeps those edges cleaner. If the image uses only a few colors, a palette-based export can also be very small.

No single format is best for every image. A process that holds up is to sort images by type, resize them, try a modern format and a fallback, and keep the smallest file that still looks right where it will be used.

Note both the file size and the dimensions when you compare results. If a smaller file also changed resolution, it doesn't prove one quality setting beat another. A perfect master file doesn't help a web page that never shows those pixels.

For important images, view the result on more than one screen. Brightness, pixel density and scaling can make faint banding or edge artifacts easier to spot than on the device you exported from.