Image Optimization Guide

According to HTTP Archive data from 2025, the median web page weighs over 2.3 MB, with images accounting for approximately 1.1 MB — nearly half the total. This has a direct, measurable impact: • Page load speed: Google's research shows that 53% of mobile users abandon sites that take longer than 3 seconds to load. Every 100KB of unnecessary image data adds roughly 200ms to load time on a 4G connection. • SEO rankings: Google's Core Web Vitals (LCP, CLS, FID) directly measure user experience, and images are the primary factor in Largest Contentful Paint (LCP). Pages with poor LCP scores rank lower in search results. • Bandwidth costs: For high-traffic sites, unoptimized images can add thousands of dollars in monthly bandwidth costs. For users on metered mobile connections, extra data consumption affects their wallet too. • Conversion rates: A study by Portent found that pages loading in 1 second have a 3x higher conversion rate than pages loading in 5 seconds. Image optimization is often the single biggest lever for improving load times.

Choosing the right format is the first and most impactful optimization decision: JPEG (Joint Photographic Experts Group) • Best for: Photographs, complex images with many colors • Compression: Lossy — removes visual details humans can't easily perceive • Typical savings: 60-80% reduction from uncompressed • Limitation: No transparency support, visible artifacts at high compression PNG (Portable Network Graphics) • Best for: Graphics with transparency, screenshots, text-heavy images • Compression: Lossless — preserves every pixel perfectly • Limitation: Much larger file sizes than JPEG for photographs WebP (Developed by Google) • Best for: Most web use cases — the best general-purpose format • Compression: Both lossy and lossless modes • Advantage: 25-35% smaller than JPEG at equivalent visual quality • Browser support: 97%+ of browsers (2026) AVIF (AV1 Image File Format) • Best for: Maximum compression when latest browser support is acceptable • Compression: Both lossy and lossless, based on AV1 video codec • Advantage: 50% smaller than JPEG, 20% smaller than WebP at equivalent quality • Limitation: Slower encoding, ~92% browser support (2026) SVG (Scalable Vector Graphics) • Best for: Icons, logos, simple illustrations • Type: Vector format — infinitely scalable with no quality loss • File size: Typically 1-10KB for icons, making it the best choice for UI elements

The key to effective image compression is finding the sweet spot between file size and visual quality: Lossy compression removes data that the human eye is less sensitive to. For JPEG, this means high-frequency color variations. Quality levels of 80-85% typically produce images that are visually indistinguishable from the original while achieving 50-70% file size reduction. Lossless compression reduces file size by finding more efficient ways to store the same data. PNG uses DEFLATE compression, while WebP lossless uses predictive coding. You get smaller files with zero quality loss, but the reduction is more modest (10-30%). Progressive JPEG loads in multiple passes, showing a low-quality version first and progressively improving. This improves perceived performance even when the total file size is similar. Resizing is the most overlooked optimization. If your CSS displays an image at 800×600 pixels, serving a 4000×3000 original wastes 96% of the pixels. Always resize to the actual display dimensions — or better yet, use responsive images with the srcset attribute to serve different sizes for different screen widths. Metadata stripping removes EXIF data (camera settings, GPS coordinates, timestamps) that can add 10-50KB to each image. This data is unnecessary for web display and can be a privacy concern.

<!-- Serve modern formats with fallback -->
<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img
    src="image.jpg"
    alt="Descriptive alt text for accessibility"
    width="800"
    height="600"
    loading="lazy"
    decoding="async"
  />
</picture>

Modern browsers provide powerful tools for serving the right image to the right device: The srcset attribute lets you specify multiple image versions at different resolutions. The browser automatically selects the best version based on screen size and pixel density. For example, you can provide 400px, 800px, and 1200px versions of an image, and the browser picks the best one. The picture element enables format negotiation. You can serve AVIF to browsers that support it, WebP as a fallback, and JPEG as the universal fallback. This ensures every user gets the best format their browser can handle. Lazy loading with the loading='lazy' attribute defers off-screen images until the user scrolls near them. This can reduce initial page load by 30-50% on image-heavy pages. Don't lazy-load above-the-fold images — they should load immediately. The aspect-ratio CSS property prevents layout shift (CLS) by reserving space for images before they load. This is crucial for Core Web Vitals scores.

<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg  400w,
    hero-800.jpg  800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 400px,
         (max-width: 1024px) 800px,
         1200px"
  alt="Hero banner showcasing the product"
  width="1200"
  height="630"
/>

Image optimization isn't just about performance — properly optimized images can drive significant search traffic through Google Image Search: Alt text: Write descriptive, keyword-rich alt text for every image. This helps search engines understand the image content and improves accessibility for screen reader users. Be specific: 'Golden retriever puppy playing in autumn leaves' is far better than 'dog' or 'image1'. File names: Use descriptive, hyphenated file names (golden-retriever-puppy-autumn.webp) instead of generic names (IMG_4582.jpg). Search engines use file names as a relevance signal. Image sitemaps: If images are critical to your content, include them in your XML sitemap. This helps Google discover and index images that might not be found through regular crawling. Structured data: Use schema.org ImageObject markup for important images, especially product images. This can result in rich results and image badges in search. Content Delivery Network (CDN): Serve images from a CDN with global edge servers. This reduces latency by serving images from the server closest to the user. Services like Cloudflare, Fastly, and AWS CloudFront offer automatic image optimization at the edge.

<!-- Native lazy loading — no JavaScript needed -->
<img
  src="below-fold-image.webp"
  alt="Product feature screenshot"
  width="600"
  height="400"
  loading="lazy"
  decoding="async"
/>

<!-- Critical above-the-fold images: skip lazy loading -->
<img
  src="hero.webp"
  alt="Main hero image"
  width="1200"
  height="630"
  loading="eager"
  fetchpriority="high"
/>