Image Optimization Guide 2026

Images account for 50–70% of average webpage weight. Converting to AVIF/WebP, implementing responsive srcset, and lazy loading below-fold images typically cuts page weight by 40–60% with zero visual quality loss.

Format Comparison 2026

Responsive Images with srcset

<!-- Full responsive image with AVIF/WebP/JPEG fallback -->
<picture>
  <!-- AVIF (best compression) -->
  <source
    type="image/avif"
    srcset="
      /img/hero-400.avif  400w,
      /img/hero-800.avif  800w,
      /img/hero-1200.avif 1200w,
      /img/hero-2400.avif 2400w
    "
    sizes="(max-width: 768px) 100vw, 1200px"
  >
  <!-- WebP fallback -->
  <source
    type="image/webp"
    srcset="
      /img/hero-400.webp  400w,
      /img/hero-800.webp  800w,
      /img/hero-1200.webp 1200w
    "
    sizes="(max-width: 768px) 100vw, 1200px"
  >
  <!-- JPEG final fallback -->
  <img
    src="/img/hero-800.jpg"
    width="1200"
    height="600"
    alt="Hero image"
    loading="eager"
    fetchpriority="high"
  >
</picture>

Batch Conversion with Sharp (Node.js)

npm install sharp

// scripts/optimize-images.mjs
import sharp from 'sharp';
import { glob } from 'glob';
import path from 'path';

const WIDTHS = [400, 800, 1200, 2400];
const QUALITY = { webp: 80, avif: 60, jpeg: 85 };

const images = await glob('src/assets/images/**/*.{jpg,jpeg,png}');

for (const file of images) {
  const name = path.basename(file, path.extname(file));
  const dir  = path.dirname(file).replace('src/assets', 'public/img');

  for (const width of WIDTHS) {
    const base = sharp(file).resize(width, null, { withoutEnlargement: true });

    // Generate AVIF
    await base.clone()
      .avif({ quality: QUALITY.avif })
      .toFile(`${dir}/${name}-${width}.avif`);

    // Generate WebP
    await base.clone()
      .webp({ quality: QUALITY.webp })
      .toFile(`${dir}/${name}-${width}.webp`);
  }
  console.log(`✓ ${name}: ${WIDTHS.length * 2} variants generated`);
}

Next.js Image Component

import Image from 'next/image';

// Hero image (LCP) — eager, high priority
<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  alt="Hero"
  priority     {/* Sets loading="eager" + fetchpriority="high" */}
  quality={85}
/>

// Below-fold images — lazy loaded by default
<Image
  src="/product.jpg"
  width={400}
  height={400}
  alt="Product"
  sizes="(max-width: 768px) 100vw, 400px"
  quality={80}
/>

// next.config.js — configure formats
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],  // AVIF first
    deviceSizes: [640, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes:  [16, 32, 48, 64, 96, 128, 256, 384],
  },
};