How to Compress Images for Faster Websites

Images are the number one cause of slow websites. They're also the easiest performance win available, and the optimization that requires the least technical knowledge. Yet most websites still serve images that are 3-5x larger than necessary.

The Simple Math

A 4MB hero image that displays at 1200x600px on the website has about 3.7MB of wasted data — because 1200x600px at 2x for Retina only needs about 400KB. Multiply by the 8-12 images on a typical homepage and you're sending 30MB instead of 4MB. That's a real user impact: on a 10 Mbps connection, 30MB takes 24 seconds to load.

The Three Things to Compress

• Dimensions: Resize to the largest size at which the image will be displayed (accounting for Retina: 2x display size). A 1200px-wide image on a 600px container means a 1200px image, not 4000px from your camera.
• Format: Convert JPEG/PNG to WebP. WebP is 25-35% smaller at equivalent quality with 97%+ browser support.
• Compression: Reduce the quality setting in your export. JPEG at 80 looks nearly identical to JPEG at 100 and is 60% smaller.

For Developers: The <picture> Element

Serve WebP to browsers that support it, JPEG as fallback: the picture element handles this elegantly.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="1200" height="600">
</picture>

Batch Compression Tools for Workflow

• Our online compressor: Best for one-off compression and quick checks.
• Sharp (Node.js): Best for programmatic batch processing and build pipelines.
• ImageOptim (Mac): Drag-and-drop batch compression, good quality preservation.
• Squoosh (Google): Browser-based, good for comparing formats and settings side by side.
• Cloudinary / Imgix: CDN-based image optimization — serve different sizes and formats automatically based on the requesting device.

The Lazy Loading Default

Add loading="lazy" to all img tags below the fold. Modern browsers defer loading these images until the user scrolls near them, reducing initial page weight significantly. Exception: the hero image or LCP element (the main visible image on load) should not be lazy-loaded — it should be loaded immediately and ideally preloaded.