Image Optimization for the Web

Images typically account for 50–90% of a webpage's total weight. On a 3 MB page, images are usually 2–2.5 MB. Optimizing images is almost always the single highest-impact performance improvement you can make.

This guide covers every aspect: choosing the right format, understanding compression, sizing correctly, and implementing lazy loading.

Why Image Optimization Matters

Performance: - Google's Core Web Vitals (LCP, FID, CLS) directly measure load speed - 53% of mobile users abandon a page that takes over 3 seconds to load - Every 100ms of latency correlates with ~1% revenue loss (Amazon's finding)

SEO: - Google uses page speed as a ranking signal - Slow image loads hurt Largest Contentful Paint (LCP), a core ranking factor

User experience: - Images that take >1 second to appear feel broken - On mobile, large images burn data allowance

Choosing the Right Format

JPEG

Use for: Photographs, images with smooth color gradients, anything without transparency

JPEG uses lossy compression — it discards fine detail that's hard to notice, especially in complex photographic areas. At quality 75–85, file sizes are 3–10× smaller than the original with imperceptible quality loss.

• ✅ Excellent for photos
• ✅ Universal browser support
• ❌ No transparency (alpha channel)
• ❌ Visible artifacts at low quality settings
• ❌ Not good for text or sharp edges

PNG

Use for: Screenshots, images with text, logos, icons, anything requiring transparency

PNG uses lossless compression — every pixel is preserved exactly. This makes it ideal for graphics with sharp edges and solid colors, but inefficient for photos.

• ✅ Perfect quality preservation
• ✅ Supports transparency (RGBA)
• ✅ Excellent for screenshots, UI elements
• ❌ Much larger than JPEG for photos

WebP

Use for: Any image that would otherwise be JPEG or PNG

WebP is Google's format (2010), now supported by all major browsers. It offers: - Lossy mode: 25–35% smaller than JPEG at equivalent quality - Lossless mode: 26% smaller than PNG on average - Transparency support in both modes

For new projects, WebP should be your default format. Browser support is 97%+ (2026).

<!-- Use WebP with a JPEG fallback for old browsers -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

AVIF

Use for: Photos on modern browsers where maximum compression is needed

AVIF (AV1 Image Format) is the newest standard: - 40–50% smaller than JPEG at equivalent quality - Better quality at very small file sizes - Browser support: ~90% (2026, lacks some older Android browsers)

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

SVG

Use for: Icons, logos, illustrations, any vector graphic

SVG is XML-based and infinitely scalable with no quality loss. A complex icon as SVG might be 2–5 KB; as PNG at multiple resolutions, it would require 10–50 KB total.

• ✅ Resolution-independent
• ✅ Can be styled with CSS
• ✅ Can be animated
• ❌ Not suitable for photos
• ❌ Can be complex for detailed illustrations

GIF

Use for: Short animations only (and consider replacing with video)

GIF is limited to 256 colors and is a very inefficient format. For animations: - Short animations (2–3 seconds): consider WebP (animated) or APNG - Longer animations: use <video> with MP4/WebM (5–10× smaller than equivalent GIF)

Compression Settings

JPEG quality settings

Quality	File size	Best for
85–95	Large	High-quality archives, print
70–85	Medium	Web use (recommended)
50–70	Small	Thumbnails, where speed matters more
Below 50	Tiny	Noticeable artifacts, avoid

Quality 75–80 is the sweet spot for most web images.

Lossless optimization (PNG)

Even without losing any quality, PNG files can often be reduced by 10–30% through better compression: - Remove metadata (EXIF, color profiles) - Reduce color depth if the image doesn't need full 24-bit color - Use tools like pngcrush, oxipng, or pngquant (pngquant adds slight lossiness)

Correct Sizing

Never serve a 2000px wide image for a 400px thumbnail. This is one of the most common mistakes.

Responsive images with srcset

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Hero image">

The browser downloads only the appropriately-sized image for the current viewport and device pixel ratio.

Target dimensions

• Full-width hero image: max 1920px wide, compress aggressively (70–80 quality)
• Blog post image: 800–1200px wide
• Thumbnail: 300–400px wide
• Avatar/icon: 48–128px wide

Lazy Loading

Lazy loading defers image loading until the image is about to enter the viewport:

<img src="image.jpg" loading="lazy" alt="Description">

Supported natively in all modern browsers (95%+ support). For images above the fold (visible immediately on load), use loading="eager" (the default) to avoid delaying LCP.

Practical Optimization Checklist

• [ ] Use WebP (with JPEG/PNG fallback) for all photos and complex graphics
• [ ] Use SVG for all icons and logos
• [ ] Serve images at the correct size for each device
• [ ] Add loading="lazy" to all images below the fold
• [ ] Add meaningful alt text for accessibility and SEO
• [ ] Strip EXIF metadata (can contain location, camera data)
• [ ] Serve images from a CDN (CloudFront, Cloudflare) for edge caching
• [ ] Enable gzip/brotli compression on your server (even for already-compressed images, helps slightly)

---

Compress your images for free: Image Compressor →