How to Optimize Images for the Web

Images account for nearly half of the average web page's total weight. Unoptimized images slow down load times, hurt your SEO rankings, increase bounce rates, and waste your users' bandwidth. The good news? Image optimization is straightforward once you know what to do.

Why Image Optimization Matters

Google considers page speed a ranking factor, and images are usually the biggest performance bottleneck. Here's what proper image optimization gives you:

• Faster page loads — users expect pages to load in under 3 seconds; optimized images get you there
• Better SEO — Google's Core Web Vitals (LCP, CLS) are directly affected by image loading
• Lower bandwidth costs — smaller files mean less data transfer for you and your users
• Better mobile experience — mobile users on slower connections benefit the most

Step 1: Choose the Right Format

Different image formats serve different purposes. Choosing the right one is the single biggest optimization you can make:

Rule of thumb: Use WebP as your default format for photos and graphics. Fall back to JPEG for photos and PNG for images needing transparency. Use SVG for icons and logos.

Step 2: Resize to the Display Size

One of the most common mistakes is serving a 4000×3000 pixel image that displays at 800×600 on screen. The browser downloads the full file but only uses a fraction of the data. Always resize images to match (or be close to) their display dimensions.

Step 3: Compress Without Visible Quality Loss

After choosing the right format and size, the final step is compression. Most images can be compressed by 50-80% without any visible quality difference. There are two types of compression:

• Lossy compression — removes some image data permanently. JPEG quality 75-85 is usually indistinguishable from 100 for photos. Best for photos and complex images.
• Lossless compression — reduces file size without losing any data. Best for screenshots, text-heavy images, and PNG files where every pixel matters.

Step 4: Implement Responsive Images in HTML

Use the HTML <picture> element and srcset attribute to serve different image sizes to different devices:

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

Always include width and height attributes to prevent layout shift (CLS), and use loading="lazy" for images below the fold.

Image Optimization Checklist

1. Choose the right format (WebP for most, JPEG for photos, PNG for transparency)
2. Resize to display dimensions (don't serve 4000px images at 800px)
3. Compress with quality 75-80 for photos
4. Use responsive images with srcset and the picture element
5. Add lazy loading for below-the-fold images
6. Always set width and height to prevent layout shift
7. Use a CDN to serve images from edge locations
8. Consider AVIF for maximum compression (check browser support)

Key Takeaways

• Image optimization is the fastest way to improve page load speed and Core Web Vitals.
• Format, size, and compression are the three pillars — get all three right for optimal results.
• WebP offers the best balance of quality and file size for most use cases today.
• Free browser-based tools let you optimize images without installing software or uploading to third-party servers.