Use AVIF format for modern browsers

<picture>
  <!-- AVIF for modern browsers -->
  <source
    type="image/avif"
    srcset="
      image-400.avif 400w,
      image-800.avif 800w,
      image-1200.avif 1200w
    "
    sizes="(max-width: 600px) 100vw, 50vw"
  >
 
  <!-- WebP fallback -->
  <source
    type="image/webp"
    srcset="
      image-400.webp 400w,
      image-800.webp 800w,
      image-1200.webp 1200w
    "
    sizes="(max-width: 600px) 100vw, 50vw"
  >
 
  <!-- JPEG fallback for older browsers -->
  <img
    src="image-800.jpg"
    srcset="
      image-400.jpg 400w,
      image-800.jpg 800w,
      image-1200.jpg 1200w
    "
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Product image"
    width="800"
    height="600"
    loading="lazy"
  >
</picture>

# Using Sharp (Node.js)
npx sharp-cli input.jpg -o output.avif
 
# Using ImageMagick 7+
magick input.jpg output.avif
 
# Using avifenc (libavif)
avifenc input.png output.avif --min 20 --max 30

// Sharp programmatic conversion
const sharp = require('sharp')
 
async function convertToAvif(input, output) {
  await sharp(input)
    .avif({
      quality: 60, // AVIF quality (lower = smaller, 60 is good balance)
      effort: 4    // Compression effort (0-9, higher = slower but smaller)
    })
    .toFile(output)
}

// webpack.config.js with image-minimizer-webpack-plugin
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
 
module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              avif: { quality: 60 },
              webp: { quality: 75 }
            }
          }
        },
        generator: [
          {
            preset: 'avif',
            implementation: ImageMinimizerPlugin.sharpGenerate,
            options: {
              encodeOptions: { avif: { quality: 60 } }
            }
          }
        ]
      })
    ]
  }
}

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    // Next.js automatically serves AVIF when supported
  }
}

interface ModernImageProps {
  src: string
  alt: string
  width: number
  height: number
  sizes?: string
}
 
function ModernImage({ src, alt, width, height, sizes = '100vw' }: ModernImageProps) {
  const basePath = src.replace(/\.[^/.]+$/, '') // Remove extension
 
  return (
    <picture>
      <source
        type="image/avif"
        srcSet={`${basePath}.avif`}
      />
      <source
        type="image/webp"
        srcSet={`${basePath}.webp`}
      />
      <img
        src={`${basePath}.jpg`}
        alt={alt}
        width={width}
        height={height}
        loading="lazy"
        decoding="async"
      />
    </picture>
  )
}

<!-- Cloudinary auto format -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto/sample.jpg">
<!-- Serves AVIF to supported browsers automatically -->
 
<!-- Imgix auto format -->
<img src="https://example.imgix.net/image.jpg?auto=format">
 
<!-- Cloudflare Polish (automatic) -->
<!-- Enable in dashboard - serves best format automatically -->