Image Optimization Best Practices: Complete Guide for 2026

# Install cwebp (WebP encoder)
# macOS
brew install webp
 
# Ubuntu/Debian
sudo apt-get install webp
 
# Convert JPEG/PNG to WebP
cwebp -q 85 input.jpg -o output.webp
 
# Batch convert all JPEGs in directory
for file in *.jpg; do
  cwebp -q 85 "$file" -o "${file%.jpg}.webp"
done
 
# Lossy WebP with quality 85
cwebp -q 85 image.png -o image.webp
 
# Lossless WebP
cwebp -lossless image.png -o image-lossless.webp

# Install avifenc
npm install -g avif
 
# Convert to AVIF
avifenc --min 0 --max 63 -a end-usage=q -a cq-level=32 input.jpg output.avif
 
# Better quality (slower encoding)
avifenc --min 0 --max 63 -a end-usage=q -a cq-level=24 -a tune=ssim input.jpg output.avif

<picture>
  <!-- AVIF for modern browsers -->
  <source srcset="/images/hero.avif" type="image/avif">
  
  <!-- WebP for slightly older browsers -->
  <source srcset="/images/hero.webp" type="image/webp">
  
  <!-- JPEG fallback for legacy browsers -->
  <img 
    src="/images/hero.jpg" 
    alt="Hero image"
    width="1920"
    height="1080"
    loading="lazy"
  >
</picture>

<picture>
  <!-- Mobile: Portrait crop -->
  <source 
    media="(max-width: 640px)" 
    srcset="/images/hero-mobile.webp"
    width="640"
    height="800"
  >
  
  <!-- Tablet: Square crop -->
  <source 
    media="(max-width: 1024px)" 
    srcset="/images/hero-tablet.webp"
    width="1024"
    height="768"
  >
  
  <!-- Desktop: Wide crop -->
  <img 
    src="/images/hero-desktop.webp" 
    alt="Hero image"
    width="1920"
    height="1080"
    loading="lazy"
  >
</picture>

<img 
  srcset="
    /images/product-320w.webp 320w,
    /images/product-640w.webp 640w,
    /images/product-1024w.webp 1024w,
    /images/product-1920w.webp 1920w,
    /images/product-2560w.webp 2560w
  "
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    33vw
  "
  src="/images/product-1024w.webp"
  alt="Product image"
  width="1024"
  height="768"
  loading="lazy"
>

<!-- 
  sizes tells browser which image to download based on viewport
  
  (max-width: 640px) 100vw = On mobile, image is 100% viewport width
  (max-width: 1024px) 50vw = On tablet, image is 50% viewport width
  33vw = On desktop, image is 33% viewport width (default)
-->
<img 
  srcset="image-400w.webp 400w, image-800w.webp 800w, image-1200w.webp 1200w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
  src="image-800w.webp"
  alt="Responsive image"
>

// Generate responsive image variants with Sharp
import sharp from 'sharp'
import fs from 'fs/promises'
import path from 'path'
 
const WIDTHS = [320, 640, 768, 1024, 1366, 1920, 2560]
const FORMATS = ['webp', 'avif', 'jpg']
 
async function generateResponsiveImages(inputPath, outputDir) {
  const filename = path.parse(inputPath).name
  
  for (const width of WIDTHS) {
    for (const format of FORMATS) {
      const outputPath = path.join(
        outputDir,
        `${filename}-${width}w.${format}`
      )
      
      await sharp(inputPath)
        .resize(width, null, { withoutEnlargement: true })
        .toFormat(format, {
          quality: format === 'jpg' ? 85 : 80,
          effort: format === 'avif' ? 6 : 4
        })
        .toFile(outputPath)
      
      console.log(`Generated: ${outputPath}`)
    }
  }
}
 
// Usage
await generateResponsiveImages(
  './images/hero.jpg',
  './public/images/responsive'
)

// Find best quality/size ratio with Sharp
import sharp from 'sharp'
 
async function findOptimalQuality(inputPath) {
  const results = []
  
  // Test different quality levels
  for (let quality = 60; quality <= 95; quality += 5) {
    const output = await sharp(inputPath)
      .webp({ quality })
      .toBuffer()
    
    const stats = await sharp(output).stats()
    
    results.push({
      quality,
      size: output.length,
      sizeKB: (output.length / 1024).toFixed(2),
      // Estimate visual quality based on entropy
      entropy: stats.entropy
    })
  }
  
  return results
}
 
// Usage
const results = await findOptimalQuality('./image.jpg')
console.table(results)
 
/*
Quality | Size (KB) | Entropy
--------|-----------|--------
60      | 45.2      | 7.2
65      | 52.8      | 7.4
70      | 61.5      | 7.6
75      | 72.3      | 7.7
80      | 85.9      | 7.8
85      | 102.4     | 7.9 ← Sweet spot
90      | 124.8     | 7.95
95      | 156.2     | 7.98
*/

# Install ImageOptim CLI
npm install -g imageoptim-cli
 
# Optimize images
imageoptim --quality 85-100 ./images/*.{jpg,png}
 
# Aggressive optimization
imageoptim --quality 80-95 --no-metadata ./images/*.jpg

# Install Squoosh CLI
npm install -g @squoosh/cli
 
# Optimize with WebP
squoosh-cli --webp '{"quality":85}' ./images/*.jpg
 
# Multiple formats
squoosh-cli \
  --webp '{"quality":85}' \
  --avif '{"cqLevel":28}' \
  --mozjpeg '{"quality":85}' \
  ./images/*.jpg

<!-- Browser native lazy loading -->
<img 
  src="/images/below-fold.jpg" 
  alt="Below fold content"
  loading="lazy"
  width="800"
  height="600"
>
 
<!-- Eager loading for above-fold images -->
<img 
  src="/images/hero.jpg" 
  alt="Hero image"
  loading="eager"
  width="1920"
  height="1080"
>

// Advanced lazy loading with placeholder
class LazyImageLoader {
  constructor(options = {}) {
    this.threshold = options.threshold || 0.01
    this.rootMargin = options.rootMargin || '50px'
    
    this.observer = new IntersectionObserver(
      this.handleIntersection.bind(this),
      {
        threshold: this.threshold,
        rootMargin: this.rootMargin
      }
    )
    
    this.init()
  }
  
  init() {
    document.querySelectorAll('img[data-src]').forEach(img => {
      this.observer.observe(img)
    })
  }
  
  handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        this.loadImage(entry.target)
        this.observer.unobserve(entry.target)
      }
    })
  }
  
  loadImage(img) {
    const src = img.dataset.src
    const srcset = img.dataset.srcset
    
    // Create new image to preload
    const tempImg = new Image()
    
    tempImg.onload = () => {
      // Replace placeholder with actual image
      img.src = src
      if (srcset) img.srcset = srcset
      
      img.classList.remove('lazy')
      img.classList.add('loaded')
      
      // Clean up data attributes
      delete img.dataset.src
      delete img.dataset.srcset
    }
    
    tempImg.src = src
  }
}
 
// Initialize
new LazyImageLoader({
  threshold: 0.01,
  rootMargin: '100px'
})

<!-- Lazy loaded image with blur placeholder -->
<img 
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3C/svg%3E"
  data-src="/images/photo.webp"
  data-srcset="
    /images/photo-640w.webp 640w,
    /images/photo-1024w.webp 1024w,
    /images/photo-1920w.webp 1920w
  "
  alt="Lazy loaded image"
  class="lazy"
  width="800"
  height="600"
>
 
<style>
  img.lazy {
    filter: blur(10px);
    transition: filter 0.3s ease-out;
  }
  
  img.loaded {
    filter: blur(0);
  }
</style>

// Generate LQIP with Sharp
import sharp from 'sharp'
 
async function generateLQIP(inputPath) {
  // Create tiny 20px wide placeholder
  const lqip = await sharp(inputPath)
    .resize(20)
    .blur(2)
    .webp({ quality: 20 })
    .toBuffer()
  
  // Convert to base64
  const base64 = lqip.toString('base64')
  const dataUrl = `data:image/webp;base64,${base64}`
  
  return dataUrl
}
 
// Usage in HTML
const lqip = await generateLQIP('./hero.jpg')
 
// Use as placeholder src
<img 
  src="${lqip}"
  data-src="/images/hero.webp"
  alt="Hero"
  class="lazy-lqip"
>

<!-- On-the-fly transformations -->
<img 
  src="https://res.cloudinary.com/demo/image/upload/w_800,q_auto,f_auto/sample.jpg"
  alt="Auto-optimized image"
>
 
<!-- Responsive with automatic format -->
<img 
  srcset="
    https://res.cloudinary.com/demo/image/upload/w_320,q_auto,f_auto/sample.jpg 320w,
    https://res.cloudinary.com/demo/image/upload/w_640,q_auto,f_auto/sample.jpg 640w,
    https://res.cloudinary.com/demo/image/upload/w_1024,q_auto,f_auto/sample.jpg 1024w
  "
  sizes="(max-width: 640px) 100vw, 50vw"
  src="https://res.cloudinary.com/demo/image/upload/w_640,q_auto,f_auto/sample.jpg"
  alt="Responsive CDN image"
>

// Cloudflare Image Resizing
const imageUrl = 'https://example.com/image.jpg'
 
// Transform on-the-fly
const transformedUrl = `https://example.com/cdn-cgi/image/width=800,quality=85,format=auto/${imageUrl}`
 
// Multiple transformations
const optimizedUrl = `https://example.com/cdn-cgi/image/width=800,quality=85,format=auto,fit=cover,sharpen=1/${imageUrl}`

<!-- Auto format and quality -->
<img 
  src="https://demo.imgix.net/image.jpg?auto=format,compress&w=800"
  alt="imgix optimized"
>
 
<!-- Responsive with DPR -->
<img 
  srcset="
    https://demo.imgix.net/image.jpg?w=400&dpr=1 400w,
    https://demo.imgix.net/image.jpg?w=400&dpr=2 800w,
    https://demo.imgix.net/image.jpg?w=800&dpr=1 800w,
    https://demo.imgix.net/image.jpg?w=800&dpr=2 1600w
  "
  sizes="(max-width: 640px) 100vw, 50vw"
  src="https://demo.imgix.net/image.jpg?w=800"
  alt="Responsive imgix image"
>

import Image from 'next/image'
 
export default function ProductCard({ product }) {
  return (
    <div className="product-card">
      {/* Automatic optimization */}
      <Image
        src={product.imageUrl}
        alt={product.name}
        width={400}
        height={300}
        quality={85}
        placeholder="blur"
        blurDataURL={product.blurDataUrl}
        loading="lazy"
        sizes="(max-width: 768px) 100vw, 400px"
      />
      
      {/* Priority for above-fold images */}
      <Image
        src="/hero.jpg"
        alt="Hero"
        width={1920}
        height={1080}
        priority // No lazy loading
        quality={90}
      />
    </div>
  )
}

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    domains: ['example.com', 'cdn.example.com'],
    minimumCacheTTL: 60,
  },
}

# Install SVGO
npm install -g svgo
 
# Optimize single SVG
svgo input.svg -o output.svg
 
# Batch optimize
svgo -f ./icons -o ./icons-optimized
 
# Custom config
svgo --config=svgo.config.js input.svg

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
          cleanupIDs: false,
        },
      },
    },
    'removeDimensions',
    'removeTitle',
  ],
}

// React component with inline SVG
export function Logo({ className }) {
  return (
    <svg 
      className={className}
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle cx="50" cy="50" r="40" fill="currentColor" />
    </svg>
  )
}
 
// Benefits:
// - No HTTP request
// - Can style with CSS
// - Can animate with CSS/JS
// - Scales perfectly

// Vite plugin for automatic image optimization
import { defineConfig } from 'vite'
import imagemin from 'vite-plugin-imagemin'
 
export default defineConfig({
  plugins: [
    imagemin({
      gifsicle: { optimizationLevel: 7 },
      mozjpeg: { quality: 85 },
      pngquant: { quality: [0.8, 0.9] },
      svgo: {
        plugins: [
          { name: 'removeViewBox', active: false },
          { name: 'removeEmptyAttrs', active: false },
        ],
      },
      webp: { quality: 85 },
    }),
  ],
})

name: Optimize Images
 
on:
  push:
    paths:
      - 'images/**'
 
jobs:
  optimize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Optimize images
        uses: calibreapp/image-actions@main
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }}
          jpegQuality: 85
          pngQuality: 85
          webpQuality: 85
          ignorePaths: 'node_modules/**,dist/**'

// Track image loading performance
const imageObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.initiatorType === 'img') {
      console.log(`Image: ${entry.name}`)
      console.log(`Duration: ${entry.duration}ms`)
      console.log(`Size: ${(entry.transferSize / 1024).toFixed(2)}KB`)
    }
  })
})
 
imageObserver.observe({ entryTypes: ['resource'] })
 
// Measure LCP for images
new PerformanceObserver((list) => {
  const entries = list.getEntries()
  const lastEntry = entries[entries.length - 1]
  
  if (lastEntry.element?.tagName === 'IMG') {
    console.log('LCP Image:', lastEntry.element.src)
    console.log('LCP Time:', lastEntry.renderTime)
  }
}).observe({ type: 'largest-contentful-paint', buffered: true })