Web Image Compression
Also known as: web image compression, compress images for web, optimize web images
Web image compression reduces an image file's byte size for faster page loads using lossy or lossless encoding, modern formats like WebP and AVIF, correct dimensions, and responsive delivery — without unnecessary loss of visible quality.
- AVIF and WebP typically beat JPEG for photos at the same visual quality.
- Resizing to the displayed dimensions usually saves more bytes than encoder tuning alone.
- Stripping EXIF metadata and lazy-loading further cut payload and improve LCP.
Lossy vs lossless and choosing a format
Lossy compression (the basis of JPEG, and the lossy modes of WebP and AVIF) discards visual data that the eye is unlikely to notice, giving large savings at the cost of some fidelity. Lossless compression (PNG, lossless WebP) rebuilds the original exactly and suits flat graphics, logos, and screenshots.
For photographic content, AVIF generally produces the smallest files at a given quality, with WebP a widely supported fallback and JPEG the universal baseline. Use PNG or lossless WebP for sharp-edged UI assets. Modern HTML serves several encodings from one `<picture>` element so each browser gets the best format it supports.
Practical optimization steps
Resize before you compress: never ship a 4000px image into a 400px slot — match the image's pixel dimensions to its largest rendered size and use srcset plus sizes for responsive variants. Strip non-essential exif-metadata (camera, GPS, thumbnails) to trim extra bytes.
Tune the quality setting per image rather than using one global value, and lazy-load below-the-fold images. Smaller, well-compressed images improve Core Web Vitals (notably Largest Contentful Paint), which supports both ranking and a faster experience. The same encode-and-resize principles power on-device photo and video-codec cleanup in phone storage tools.