Compress and Optimize Image File Sizes for Web

Images account for roughly 50% of total page weight on the average website. Unoptimized images are the most common cause of slow page loads, inflated bandwidth costs, and poor Lighthouse performance scores. Compressing images properly can cut total page weight by 40-70% without visible quality loss.

Modern Image Formats

WebP

WebP provides 25-35% smaller file sizes than JPEG at equivalent visual quality, with support for transparency (replacing PNG). Browser support is universal across all modern browsers.

AVIF

AVIF achieves 50% smaller file sizes than JPEG, making it the most efficient format available. Browser support covers Chrome, Firefox, and Safari 16+. Use AVIF as the primary format with WebP as a fallback:

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

Target File Sizes

Use these benchmarks when auditing image optimization:

Total image payload for a page should stay under 500KB. Pages exceeding 1MB of images almost always fail LCP.

Responsive Images with srcset

Serve appropriately sized images based on the user's viewport. A 1920px-wide hero image is wasted on a 375px mobile screen:

<img
  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w, /hero-1920.webp 1920w"
  sizes="100vw"
  src="/hero-1200.webp"
  width="1920"
  height="960"
  alt="Responsive hero image"
>

The browser selects the smallest image that covers the rendered size, accounting for device pixel ratio.

Compression Tools

Command-Line Tools

# Convert to WebP with quality 80 (good balance of size and quality)
cwebp -q 80 input.png -o output.webp

# Convert to AVIF with quality 60
avifenc --min 30 --max 60 input.png output.avif

# Optimize JPEG losslessly
jpegtran -optimize -progressive input.jpg > output.jpg

# Batch convert with ImageMagick
mogrify -format webp -quality 80 *.png

Build Pipeline Integration

Automate image optimization in your build process so no unoptimized image reaches production:

// Example: Sharp in a Node.js build script
const sharp = require('sharp');

await sharp('input.jpg')
  .resize(1200, 600, { fit: 'cover' })
  .webp({ quality: 80 })
  .toFile('output.webp');

CDN-Level Optimization

Most CDNs (Cloudflare, Imgix, Cloudinary) offer automatic format negotiation. The CDN detects the browser's Accept header and serves AVIF, WebP, or JPEG accordingly. This eliminates the need for <picture> elements entirely:

# Cloudflare Polish: auto-optimize images
# Enable in dashboard > Speed > Optimization > Image Optimization

Common Mistakes

• Serving PNG for photographs. PNG is for graphics with flat colors and transparency. Use WebP or AVIF for photos.
• Not resizing before compression. Compressing a 4000px image down to 100KB still forces the browser to decode 4000px. Resize first, then compress.
• Using CSS to resize images. A 2MB image scaled to 200px with CSS still downloads the full 2MB. Serve the correct size from the server.
• Ignoring EXIF data. Camera metadata can add 50-100KB per image. Strip EXIF during optimization.

Auditing with Lighthouse

Lighthouse flags oversized images in two audits: "Properly size images" (checks if images are larger than their rendered dimensions) and "Efficiently encode images" (checks if further compression is possible). Address both to maximize savings.