How to compress images for the web
Short answer
To compress an image, resize it to the dimensions you actually need, choose the right format (JPG or WebP for photos, PNG for sharp graphics), and lower the quality setting until the file is small but still looks clean.
Lossy vs lossless compression
Lossless compression makes a file smaller while keeping every pixel identical. Lossy compression throws away detail the eye is unlikely to notice in exchange for much smaller files. Photos almost always use lossy formats; sharp graphics, logos, and screenshots often look better with lossless.
Step by step
- Resize before you compressA 4000px photo displayed at 800px wastes most of its data. Reducing dimensions to the real display size is the single biggest size win.
- Pick the right formatUse JPG or WebP for photographs. Use PNG for screenshots, line art, and anything with text or transparency.
- Lower the quality settingFor lossy formats, quality around 75 to 85 percent usually looks identical to the original at a fraction of the size. Drop further only if the file still needs to be smaller.
- Check the resultCompare the preview against the original. Watch for blocky artifacts in skies and gradients, and fuzzy edges around text.
Resize vs compress
These are different operations that work well together. Resizing changes the pixel dimensions; compressing changes how efficiently those pixels are stored. For the smallest result, resize to the needed dimensions first, then compress.
Common mistakes
- Compressing a giant image without resizing it first.
- Re-saving the same JPG many times, which compounds quality loss each time.
- Using PNG for photographs, which produces huge files for little benefit.