Image Compression.

Image compression is the process of reducing the file size of image files (JPEG, PNG, WebP, AVIF, GIF) without (or with minimal) degradation of visual quality. Images typically account for 50–70% of total page weight on consumer websites, making image compression one of the most impactful page speed optimisations available. Two types exist: lossless compression (no quality reduction, smaller savings) and lossy compression (slight quality reduction, larger savings — usually imperceptible to users).

Modern Image Format Choices

WebP, developed by Google, provides 25–34% smaller files than JPEG at equivalent quality. AVIF (AV1 Image Format) achieves 50% smaller files than JPEG and is increasingly supported. For photographs: JPEG or WebP with lossy compression. For graphics with transparency: PNG (lossless) or WebP (lossless or lossy). For animated images: WebP or AVIF instead of GIF. Serving next-gen formats via <picture> with JPEG fallback covers all browsers.

Image Compression in Core Web Vitals

The LCP element is often an image. Uncompressed or oversized images are the single most common cause of poor LCP scores. Tools like Squoosh, ImageOptim, Sharp (Node.js), and Cloudinary automate compression workflows. On WordPress, plugins like ShortPixel, Imagify, and Smush compress on upload. Implementing responsive images — serving different sizes for different screen widths using srcset — ensures mobile users don't download desktop-sized images unnecessarily.