How do I optimize images in a static site build?

To optimize images in a static site build, aim for two things:

1. Smaller file sizes
2. Serving the right image for the device

Here are the most effective approaches.

1) Use modern image formats

Prefer:

• AVIF for best compression
• WebP for broad support
• Keep JPEG/PNG as fallbacks when needed

Example:

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

2) Resize images before serving them

Don’t ship huge original files and scale them down in CSS. Generate multiple sizes during the build:

• thumbnail
• medium
• large

Use srcset and sizes so browsers choose the best one:

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Description"
  width="1200"
  height="800">

3) Compress images during the build

Use build tools or plugins to automatically optimize images:

• Sharp (common in Node-based static site generators)
• imagemin
• Framework-specific image plugins

Typical operations:

• quality reduction for JPEG/WebP/AVIF
• stripping metadata
• progressive JPEGs
• optimized PNG quantization

4) Strip unnecessary metadata

Remove EXIF and other metadata unless you need it. This can noticeably reduce size.

5) Lazy-load below-the-fold images

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

This improves initial page load time.

6) Always include width and height

This prevents layout shift:

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

7) Use responsive image generation in your static site generator

Depending on your stack:

• Eleventy: use plugins or custom Sharp transforms
• Hugo: built-in image processing
• Gatsby: gatsby-plugin-image
• Next.js static export: pre-generate optimized images or use a compatible image pipeline
• Astro: built-in image tools / integrations

8) Cache aggressively

Since static sites are usually CDN-served:

• set long-lived cache headers for optimized images
• use hashed filenames for built assets

9) Use SVG for icons/illustrations when possible

For logos, icons, and simple graphics, SVG is often much smaller and sharper than raster images.

10) Automate optimization in your pipeline

A typical build pipeline might:

1. Read source images from /assets
2. Resize to multiple widths
3. Convert to AVIF/WebP/JPEG
4. Strip metadata
5. Emit optimized files with hashed names
6. Update HTML templates with srcset

If you want, I can give you:

• a tooling recommendation for your stack,
• a sample build script using Sharp,
• or a framework-specific setup for Astro, Eleventy, Hugo, Gatsby, or Next.js.