How to Compress Images for Websites
Last updated
Practical targets for image dimensions, formats and quality settings that make pages load faster without visible quality loss.
Images are usually the heaviest part of a web page. Optimizing them is one of the most effective ways to improve load time and Core Web Vitals such as Largest Contentful Paint.
1. Resize first
A photo straight from a phone is often 4000 × 3000 pixels. If it displays at 800 px wide, the extra pixels are wasted. Export at the largest size it will be shown — about 2× the CSS width for sharp high-density screens. For a full-width hero, 1600–2400 px wide is usually plenty; for a blog image in a 700 px column, around 1400 px. Use Image Resizer with “Fit within a maximum size”.
2. Choose the right format
- Photos: WebP or JPEG.
- Logos, icons, screenshots, flat graphics: PNG (or SVG for true vector artwork).
- Transparency: WebP or PNG — JPEG cannot store it.
3. Pick a quality setting
For JPEG and WebP, quality 70–80 is a good starting point for photos. Lower values shrink files further but start showing blocky artifacts and color banding, especially in skies and gradients. Always compare before and after.
4. Reduce PNG colors where possible
Screenshots and graphics rarely need millions of colors. Reducing a PNG to 256 colors often cuts its size by more than half with no visible difference.
5. Serve them well
- Set
widthandheightattributes so the browser reserves space and the layout doesn’t shift. - Add
loading="lazy"to images below the fold. - Use
srcsetto serve smaller files to smaller screens.
Image Compressor handles steps 1–4 in one pass, shows the real size change for each file, and removes metadata such as GPS location as a side effect of re-encoding.
