Why Image Optimization Matters

Images account for over 50% of the average web page's total weight. Unoptimized images slow down page loads, hurt Core Web Vitals scores (especially Largest Contentful Paint), and increase bounce rates. Google has confirmed that page speed is a ranking factor for both mobile and desktop searches.

A single uncompressed 5 MB photograph can take 10+ seconds to load on a mobile connection. That same image, properly optimized, can be reduced to 150-300 KB with minimal visible quality loss. The impact on user experience is dramatic.

JPEG vs. PNG vs. WebP

JPEG (Joint Photographic Experts Group)

JPEG uses lossy compression, which discards some image data to achieve small file sizes. It is ideal for photographs and complex images with gradients. JPEG does not support transparency. Each re-save degrades quality further (generational loss), so always edit from the original and export to JPEG as the final step.

PNG (Portable Network Graphics)

PNG uses lossless compression and supports alpha transparency. It is best for images with sharp edges, text, logos, screenshots, and simple illustrations. PNG file sizes are typically larger than JPEG for photographic content because lossless compression cannot discard redundant visual data.

WebP

Developed by Google, WebP supports both lossy and lossless compression, plus alpha transparency. WebP files are 25-35% smaller than JPEG at equivalent visual quality and 26% smaller than PNG for lossless images. Browser support is now universal across all major browsers. If your build pipeline can produce WebP, there is little reason not to use it as the primary format.

When to Use Each Format

Photographs: WebP (lossy) or JPEG. Prefer WebP for smaller files.
Logos and icons with transparency: WebP (lossless with alpha) or SVG for vector graphics.
Screenshots and UI captures: PNG for crisp text rendering, or WebP lossless.
Simple illustrations: SVG (scalable, tiny file size, styleable with CSS).
Animated images: WebP (animated) or MP4 video instead of GIF. Animated GIFs are enormously inefficient.

Compression Strategies

Lossy Compression

Reduces file size by permanently removing image data. The quality parameter (typically 60-85) controls the tradeoff. For web photography, quality 75-80 is usually the sweet spot where visual quality remains excellent while file size drops significantly. Always compare the compressed version against the original at the display size, not at full zoom.

Lossless Compression

Reduces file size without removing any image data. Techniques include better entropy encoding, removing metadata, and optimizing filter parameters. Tools like optipng and zopflipng can reduce PNG sizes by 15-30% with zero quality loss.

Responsive Images

Serve different image sizes to different devices using the srcset and sizes attributes on the <img> element, or the <picture> element for art direction. A 400px-wide mobile screen does not need a 2000px-wide image. Serving appropriately sized images can cut image bandwidth by 50-70% on mobile devices.

Lazy Loading

Images below the fold should use loading="lazy" so the browser only loads them when the user scrolls near them. This reduces initial page load time and saves bandwidth for users who never scroll to the bottom. Above-the-fold images should load eagerly to avoid layout shift and maintain a fast LCP.

Practical Optimization Checklist

Choose the right format (WebP preferred, with JPEG/PNG fallbacks).
Resize images to their display dimensions before uploading.
Apply lossy compression at quality 75-85 for photographs.
Strip unnecessary metadata (EXIF data) unless you need it.
Use srcset or <picture> for responsive delivery.
Add loading="lazy" to below-the-fold images.
Specify width and height attributes to prevent layout shift.
Audit with Lighthouse or PageSpeed Insights regularly.

Image Optimization for the Web: Formats, Compression, and Performance