Image Compression: How to Reduce File Size Without Losing Quality

Why Image Size Matters

Images are typically the largest files on any web page, making up 40-60% of total page weight. A 5MB hero image that could have been 200KB costs your visitors time, data and patience. Google's Core Web Vitals explicitly penalise slow-loading images in search rankings. For email, most providers reject attachments over 25MB, and large images slow down every recipient's inbox.

Lossy vs Lossless Compression

Lossy compression (JPEG, WebP) discards some data permanently to achieve smaller files. At high quality settings (70-85%), the difference is invisible to the human eye. At low settings (below 40%), you'll see artefacts — blocky areas and colour banding.

Lossless compression (PNG, lossless WebP) preserves every pixel exactly. File sizes are larger, but the image is bit-for-bit identical after decompression. Essential for screenshots, diagrams, logos and anything with sharp edges or text.

Which Format Should You Use?

Recommended Quality Settings

For websites: JPEG or WebP at 70-80% quality gives the best balance of size and visual quality for photographs. Most users cannot tell the difference between 80% and 100% on a typical screen. For retina/high-DPI displays, you can go even lower (60-70%) because the higher pixel density masks compression artefacts.

For email: Resize images to 1200px wide maximum before compressing. Most email clients won't display larger, so you're sending unnecessary data. JPEG at 75% quality keeps most photos under 200KB.

For social media: Platforms re-compress your images anyway. Upload the highest quality you can (the platform handles optimisation), but keep files under 5-10MB to avoid slow uploads.

The Resize Trick

Before adjusting quality, check the image dimensions. A 4000×3000 photo from your phone is 12 megapixels. If it's going on a website at 800px wide, resizing from 4000 to 800 pixels reduces the file size by roughly 96% before you even touch quality settings. Always resize first, then compress.

WebP: The Modern Choice

WebP (developed by Google) offers both lossy and lossless compression and is typically 25-35% smaller than equivalent JPEG files. It supports transparency (unlike JPEG) and animation (unlike PNG). Every modern browser supports it. If you're building a website today, WebP should be your default format.

AVIF is even newer and offers better compression than WebP, but browser support is still catching up and encoding is slower.

Quick Wins for Website Performance

• Use responsive images — serve different sizes for mobile, tablet and desktop using the srcset attribute
• Lazy load below-the-fold images — add loading="lazy" to img tags
• Use a CDN — serves images from a server closest to your visitor
• Set explicit width and height — prevents layout shifts as images load
• Consider SVG for icons and logos — vector graphics are tiny and scale perfectly