Images account for roughly 50% of the average web page's total weight. A 3MB hero image can add seconds to load time, tank your Google Pagespeed score, and drive users to competitors. This guide covers what you actually need to know about image optimization in 2026.

Image Formats: Choosing the Right One

JPEG/JPG

Best for: Photographs, complex images with many colors, gradient-heavy visuals.

JPEGs use DCT (Discrete Cosine Transform) lossy compression. The quality setting (1-100) controls how much visual data is discarded. At quality 80, you typically get 60-80% file size reduction with imperceptible quality loss. At quality 60, savings increase but artifacts become visible on careful inspection.

Progressive JPEGs load progressively (blur to sharp) rather than top-to-bottom, improving perceived performance even when total load time is similar.

PNG

Best for: Graphics with transparency, screenshots, images with text, logos, diagrams.

PNG uses lossless compression (DEFLATE algorithm) meaning no quality loss. However, this makes them larger than JPEGs for photographic content. For screenshots and graphics with flat colors, PNGs are often smaller than JPEGs because the compression algorithm exploits the color uniformity.

WebP

Best for: All images where browser support allows (96%+ of users).

WebP offers 25-35% smaller file sizes than JPEG at equivalent quality. It supports both lossy and lossless modes, plus alpha transparency. The only reason not to use WebP is if you need to support Internet Explorer—but that's no longer necessary in 2026.

AVIF

Best for: Cutting-edge applications where maximum compression matters.

AVIF provides 50% smaller files than JPEG at the same quality. However, browser support is at ~85% (no Safari iOS support yet). Use WebP as your baseline with AVIF as an enhancement for supporting browsers.

GIF

Best for: Simple animations only.

GIF's 256-color limitation makes it unsuitable for photographs. Use WebP or APNG (animated PNG) for animations. Static GIFs should be converted to PNG or WebP.

Compression Strategy

Lossy Compression (JPEGs, WebP)

Quality 80 is the sweet spot for most use cases. Test different quality levels—often 70-75 is visually indistinguishable from 100 while saving significant space. For thumbnails and small images, quality 60-70 is usually acceptable.

Tools and Workflow

Use our Image Compressor to reduce file sizes before uploading. For production workflows, consider Sharp (Node.js) or ImageMagick for automated optimization. Both support batch processing and can be integrated into build pipelines.

When Compression Won't Help

Already-optimized images, screenshots with large flat areas, and PNGs with limited colors may not compress further. Our tool intelligently returns the original file if compression would increase size, preventing quality degradation for these edge cases.

Responsive Images

Don't serve a 4000px image to a mobile device. Use the srcset attribute to provide multiple sizes:

<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) 100vw, 50vw"
     alt="Description">

Delivery Optimization

Lazy Loading

Images below the fold shouldn't load until the user scrolls near them. Use the native loading="lazy" attribute:

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

CDN Delivery

Content Delivery Networks cache images at edge locations worldwide, reducing latency. Most CDNs also automatically optimize images (format conversion, compression) on-the-fly.

HTTP/2 and HTTP/3

Modern HTTP versions multiplex multiple requests over a single connection, eliminating the head-of-line blocking that made image spriting necessary with HTTP/1.1. Serve images individually rather than bundling them into sprites.

Performance Impact

Google's Core Web Vitals metrics directly measure user-perceived performance. Largest Contentful Paint (LCP) measures when the main content loads—images are usually the culprit when LCP is poor. A 1-second improvement in LCP can increase conversion rates by 8-10% for e-commerce sites.

Summary Checklist

  • Use WebP as primary format with JPEG fallback
  • Compress to quality 70-80 for most images
  • Generate multiple sizes for responsive delivery
  • Add loading="lazy" to below-fold images
  • Use a CDN for global delivery
  • Test with Pagespeed Insights and fix any LCP issues