Image Compression for Web Performance: A Complete Guide
Images make up most of the weight of the average webpage — often 50% or more. Compressing them is the highest-impact performance fix most sites can make, and it costs nothing.
This guide covers the formats, settings, and techniques that actually work.
Why image size matters
Every kilobyte of image is download time, especially on mobile. Google's research shows that cutting page weight directly improves Core Web Vitals scores and rankings. Small images also cut your bandwidth bill and your carbon footprint.
Choose the right format first
Use WebP as your default, and AVIF for photos when you want the smallest files. Keep PNG only for lossless needs. Format choice matters more than any quality setting.
Use quality sliders, not percentages
A quality of 75–80 for WebP and JPG looks great on screen. Going from 90 to 75 often halves the file size with no visible difference. Always compare the result against the original.
Resize before you compress
Compressing a 4000px photo that displays at 800px wastes most of your bytes. Resize to the largest size you'll display, then compress. The combination typically cuts size by 70–90%.
Use lazy loading and the picture element
Load off-screen images lazily, and use the picture element to serve AVIF or WebP with a JPEG fallback. Together with compression, these make images nearly free.
Compress every image, use WebP or AVIF, resize to display size, and lazy-load. These four habits can cut your page weight in half. Our browser-based compressors do the first two for you in seconds.