Image Optimization for the Web: Formats, Compression, and Lazy Loading

Images Are Still the Biggest Performance Problem on Most Sites

HTTP Archive data consistently shows that images are the largest contributor to page weight across the web — typically accounting for 50-70% of total page bytes on image-heavy pages. Despite years of tooling improvements, the median page still transfers images that are significantly larger than they need to be.

The good news is that image optimization is one of the highest-leverage performance investments you can make, and most of the gains come from a small number of techniques applied correctly. Here's the complete practical guide.

Format Selection

WebP vs AVIF vs JPEG vs PNG

The choice of image format is the first decision, and it has a bigger impact than compression level within a given format.

AVIF is the best format for most images in 2026 — it offers significantly better compression than WebP (typically 50% smaller than JPEG at equivalent quality) with excellent browser support (Chrome, Firefox, Safari all support it). The trade-off is slower encoding, which matters if you're processing images at request time but is irrelevant if you're pre-processing.

WebP is the safe default when you need wide compatibility with faster encoding. About 25-35% smaller than JPEG at equivalent visual quality. Fully supported in all modern browsers.

JPEG is appropriate for photographs when legacy browser support matters or when AVIF/WebP is genuinely unavailable. Use progressive JPEG encoding for large images — it gives users something to look at while the image loads rather than a blank space.

PNG is appropriate for images that require transparency (logos, icons with transparent backgrounds) or images with large areas of solid color (diagrams, screenshots) where PNG's lossless compression outperforms JPEG's lossy compression. Never use PNG for photographs.

SVG is appropriate for icons, logos, and simple graphics. SVG scales perfectly to any resolution, compresses very well, and can be styled with CSS. A site that uses PNG sprites for icons when SVG is available is leaving significant optimization on the table.

Serving multiple formats with <picture>:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero description" width="1200" height="630">
</picture>

The browser picks the first format it supports. All browsers that support AVIF use it; browsers that support WebP but not AVIF use WebP; everything else gets JPEG.

Responsive Images

Serving a 2400px-wide image to a user on a 375px mobile device is sending 6x more data than the user needs. Responsive images solve this.

The srcset attribute:

<img
  src="product-600w.jpg"
  srcset="product-600w.jpg 600w, product-1200w.jpg 1200w, product-2400w.jpg 2400w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="Product name"
  width="600"
  height="400"
>

The srcset tells the browser what images are available and their widths. The sizes tells the browser how wide the image will be displayed at different viewport widths. The browser uses both to pick the most appropriate image source.

The rule of thumb: Provide image sizes at 1x, 1.5x, and 2x the maximum CSS display size. If your image displays at 600px maximum, provide 600w, 900w, and 1200w versions.

For high-DPI screens: Devices with 2x or 3x pixel density need larger images to look sharp. The srcset approach handles this automatically — the browser requests a larger image on a high-DPI display.

Compression and Quality Settings

The quality setting in lossy formats is the single biggest variable after format choice. Most developers use tool defaults that are often too conservative.

For JPEG: quality 75-85 is indistinguishable from 95-100 at typical web display sizes. Quality 60-75 is usually acceptable for thumbnails and secondary images. Quality 85 as a default for hero images.

For WebP: quality 75-85. The WebP quality scale maps roughly to JPEG quality but produces smaller files.

For AVIF: quality 50-65 typically produces results visually equivalent to JPEG quality 80-90 at significantly smaller file size. Experiment with your specific image content.

Tools for batch processing:

sharp (Node.js) — fast, high-quality, excellent for build tooling
squoosh (CLI) — excellent quality with modern format support
ImageMagick — the swiss army knife, available in most CI environments
Cloudflare Images / AWS CloudFront image optimization — CDN-level optimization without build step

Lazy Loading

Images below the fold don't need to load until the user scrolls down. Lazy loading defers their download, reducing initial page weight and improving LCP (which is measured from the top of the page).

Native lazy loading:

<img src="product.jpg" alt="..." loading="lazy" width="800" height="600">

The loading="lazy" attribute is supported in all modern browsers and requires zero JavaScript. The browser defers loading images until they're within a certain distance of the viewport (the exact threshold varies by browser but is typically about 1200px on desktop).

Important: Do not use loading="lazy" on the LCP image. The LCP image is above the fold and should load as fast as possible. Lazy loading it delays LCP.

The fetchpriority attribute:

<!-- Highest priority for LCP image -->
<img src="hero.jpg" fetchpriority="high" alt="..." width="1200" height="630">

<!-- Lower priority for below-fold images -->
<img src="product.jpg" fetchpriority="low" loading="lazy" alt="..." width="400" height="300">

This gives the browser explicit priority hints to load what matters first.

Image CDN and Transformation Services

An image CDN is a service that stores your original images and serves optimized, resized, reformatted versions on demand at the CDN edge. The request URL encodes the transformation parameters:

https://imagecdn.com/img/w=800,h=600,format=webp,quality=80/product-original.jpg

This eliminates the need to pre-generate every size/format combination. The CDN generates and caches each variant on first request.

Major options:

Cloudflare Images — good integration if you're already on Cloudflare
Imgix — feature-rich, excellent documentation
Cloudinary — adds AI features like automatic cropping and background removal
Next.js Image component / Nuxt Image component — framework-native, built-in image optimization

For most projects, a framework-native image component or a CDN-level optimization service is simpler than managing the image processing pipeline yourself.

A Quick Audit Process

Run this audit on any site you're optimizing:

Open Chrome DevTools Network tab, filter by "Img"
Look for images over 100KB serving as JPEG or PNG where WebP/AVIF would work
Look for images significantly larger than their display size (natural width >> display width)
Look for images without width and height attributes (CLS risk)
Look for images above the fold without fetchpriority="high" on the LCP candidate
Look for images below the fold without loading="lazy"

Run Google PageSpeed Insights and check the "Opportunities" section — it identifies all the specific images causing problems with concrete size savings estimates.

Image optimization is one of the few areas where a few hours of work produces measurable, permanent improvements to both user experience and search rankings. If you're working on a site with large, unoptimized images, book a call at calendly.com/jamesrossjr and let's build the optimization plan.