Serve images from a CDN

<!-- Cloudinary: resize, format, quality -->
<img src="https://res.cloudinary.com/demo/image/upload/w_400,h_300,c_fill,f_auto,q_auto/sample.jpg">
 
<!-- Imgix: responsive with fit and format -->
<img src="https://example.imgix.net/image.jpg?w=400&h=300&fit=crop&auto=format,compress">
 
<!-- Cloudflare Images: variants -->
<img src="https://imagedelivery.net/account/image-id/public">

import Image from 'next/image'
 
// next.config.js configures remote domains
function ProductImage({ product }: { product: Product }) {
  return (
    <Image
      src={product.imageUrl}
      alt={product.name}
      width={400}
      height={300}
      // Next.js automatically:
      // - Serves WebP/AVIF based on browser support
      // - Generates responsive sizes
      // - Lazy loads below-fold images
    />
  )
}

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      { hostname: 'res.cloudinary.com' },
      { hostname: 'images.example.com' }
    ],
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384]
  }
}

import { CldImage } from 'next-cloudinary'
 
function HeroImage() {
  return (
    <CldImage
      src="hero-image"
      width={1200}
      height={600}
      crop="fill"
      gravity="auto"
      format="auto"
      quality="auto"
      alt="Hero"
    />
  )
}
 
// Generate URL programmatically
function getCloudinaryUrl(publicId: string, options: TransformOptions) {
  const { width, height, format = 'auto', quality = 'auto' } = options
  return `https://res.cloudinary.com/${CLOUD_NAME}/image/upload/w_${width},h_${height},c_fill,f_${format},q_${quality}/${publicId}`
}

function ResponsiveCdnImage({ src, alt }: { src: string; alt: string }) {
  const sizes = [320, 640, 960, 1280, 1920]
 
  const srcSet = sizes
    .map(w => `${getCdnUrl(src, { width: w })} ${w}w`)
    .join(', ')
 
  return (
    <img
      src={getCdnUrl(src, { width: 960 })}
      srcSet={srcSet}
      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
      alt={alt}
      loading="lazy"
    />
  )
}
 
function getCdnUrl(src: string, options: { width: number }) {
  // Cloudinary example
  return `https://res.cloudinary.com/demo/image/upload/w_${options.width},f_auto,q_auto/${src}`
}

interface CdnImageProps {
  src: string
  alt: string
  width: number
  height: number
  priority?: boolean
  className?: string
}
 
function CdnImage({ src, alt, width, height, priority, className }: CdnImageProps) {
  const baseUrl = process.env.NEXT_PUBLIC_IMAGE_CDN_URL
 
  // Build CDN URL with transformations
  const cdnSrc = `${baseUrl}/w_${width},h_${height},c_fill,f_auto,q_auto/${src}`
 
  // 2x for retina
  const cdnSrc2x = `${baseUrl}/w_${width * 2},h_${height * 2},c_fill,f_auto,q_auto/${src}`
 
  return (
    <img
      src={cdnSrc}
      srcSet={`${cdnSrc} 1x, ${cdnSrc2x} 2x`}
      alt={alt}
      width={width}
      height={height}
      loading={priority ? 'eager' : 'lazy'}
      className={className}
    />
  )
}