Image Optimization for Web Performance

Why Image Optimization Matters for Deployment

Every deployment ships assets to production. If your build pipeline doesn't handle image optimization, you're pushing unoptimized files to your servers on every release. The best approach is automating image processing as part of your deployment workflow so optimized images ship by default — not as an afterthought.

Modern Image Formats

WebP

AVIF

Format Comparison

Rule of thumb: Use AVIF with WebP fallback for photos, SVG for icons and logos, and avoid GIF — use <video> for animations instead.

Implementation

Use the <picture> element to serve the best format each browser supports:

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

Pro tip: Most build tools (Vite, Webpack, Next.js) can automate format conversion at build time. If you're using build pipelines in your deployment, add an image processing step so format conversion happens automatically on every deploy.

Responsive Images

Serving a 2000px image to a mobile screen wastes bandwidth and kills load times. Use srcset to let the browser pick the right size:

srcset and sizes

<img
  srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
  sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 2000px"
  src="medium.jpg"
  alt="Description"
>

This alone can reduce image transfer size by 40–60% on mobile devices.

Lazy Loading

Native Lazy Loading

The simplest approach — one attribute, no JavaScript required:

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

Above the Fold Priority

<!-- Hero image: load immediately with high priority -->
<img src="hero.jpg" fetchpriority="high" alt="Hero image">

<!-- Below fold: lazy load -->
<img src="feature.jpg" loading="lazy" alt="Feature image">

Compression

Lossy Compression

Lossless Compression

Automating Compression in Your Build

Rather than manually compressing images, integrate it into your build pipeline with Sharp:

const sharp = require('sharp');
const glob = require('fast-glob');

async function optimizeImages() {
  const files = await glob('src/images/*.{jpg,png}');
  for (const file of files) {
    await sharp(file)
      .resize(1600, null, { withoutEnlargement: true })
      .webp({ quality: 80 })
      .toFile(file.replace('src/', 'dist/').replace(/\.(jpg|png)$/, '.webp'));
  }
}

optimizeImages();

If you're deploying with DeployHQ, you can add image optimization as a build command that runs before every deployment — ensuring no unoptimized image ever reaches production.

Image CDN

For sites with many images or user-generated content, an image CDN handles optimization automatically:

Popular options: Cloudinary, Imgix, Cloudflare Images, and framework-specific solutions like Next.js Image Optimization.

Dimensions & Layout Shift Prevention

Always set explicit dimensions to prevent Cumulative Layout Shift (CLS):

<img src="image.jpg" width="800" height="600" alt="Description">

Or use CSS aspect-ratio for fluid layouts:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Why this matters: CLS is a Core Web Vitals metric. Images without dimensions cause page content to jump as they load — frustrating users and hurting your performance score.

Optimization Checklist