Image Optimization for Modern Web Applications: Formats, CDNs, Automation

// scripts/optimize-images.ts
// Run during build process
import sharp from "sharp"
import { readdir, readFile, writeFile } from "fs/promises"
import path from "path"

interface ImageConfig {
  source: string       // Original image path
  outputDir: string    // Base output directory
  formats: string[]    // ['avif', 'webp', 'jpeg']
  sizes: number[]      // [640, 1200, 1920]
  quality: number      // 80
}

async function optimizeImage(config: ImageConfig) {
  const inputBuffer = await readFile(config.source)
  const filename = path.parse(config.source).name

  for (const format of config.formats) {
    for (const width of config.sizes) {
      const outputPath = path.join(
        config.outputDir,
        format,
        `${filename}-${width}w.${format}`
      )

      await sharp(inputBuffer)
        .resize(width, undefined, { withoutEnlargement: true })
        .toFormat(format as any, { quality: config.quality })
        .toFile(outputPath)

      console.log(`Created: ${outputPath}`)
    }
  }
}

// components/OptimizedImage.tsx
interface OptimizedImageProps {
  src: string  // e.g., "/images/dashboard"
  alt: string
  widths?: number[]
  sizes?: string
  priority?: boolean
}

function OptimizedImage({
  src,
  alt,
  widths = [640, 1200, 1920],
  sizes = "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
  priority = false,
}: OptimizedImageProps) {
  const formats = ["avif", "webp", "jpeg"]
  const suffix = priority ? "fetchPriority='high'" : "loading='lazy'"

  return (
    <picture>
      {/* Modern format first */}
      {formats.map((format) => (
        <source
          key={format}
          type={`image/${format === "jpeg" ? "jpeg" : format}`}
          srcSet={widths
            .map((w) => `${src}-${w}w.${format} ${w}w`)
            .join(", ")
          }
          sizes={sizes}
        />
      ))}
      {/* Fallback */}
      <img
        src={`${src}-1200w.jpeg`}
        srcSet={widths
          .map((w) => `${src}-${w}w.jpeg ${w}w`)
          .join(", ")
        }
        alt={alt}
        width={1200}
        height={675}
        decoding="async"
        {...(priority ? { fetchPriority: "high" as const } : { loading: "lazy" as const })}
      />
    </picture>
  )
}

// Skip build-time optimization — transform on the fly
function CdnImage({ src, width, alt, priority = false }: CdnImageProps) {
  const baseUrl = "https://tanstackship.com/cdn-cgi/image"

  // Generate transform URLs
  const formats = [
    { format: "avif", url: `${baseUrl}/width=${width},format=avif,quality=80/${src}` },
    { format: "webp", url: `${baseUrl}/width=${width},format=webp,quality=80/${src}` },
    { format: "jpeg", url: `${baseUrl}/width=${width},format=jpeg,quality=85/${src}` },
  ]

  return (
    <picture>
      {formats.map(({ format, url }) => (
        <source key={format} type={`image/${format}`} srcSet={url} />
      ))}
      <img
        src={`${baseUrl}/width=${width},format=jpeg,quality=85/${src}`}
        alt={alt}
        width={width}
        loading={priority ? "eager" : "lazy"}
        fetchPriority={priority ? "high" : "auto"}
      />
    </picture>
  )
}

// Available CDN parameters — build helper
interface ImageTransformOptions {
  width?: number       // 1-4096
  height?: number      // 1-4096
  fit?: "scale-down" | "contain" | "cover" | "crop" | "pad"
  quality?: number     // 1-100
  format?: "webp" | "avif" | "jpeg" | "png"
  sharpen?: number     // 0-10
  blur?: number        // 0-250
  brightness?: number  // -100 to 100
  contrast?: number    // -100 to 100
  gamma?: number       // 0.1-9.99
}

function buildImageUrl(basePath: string, opts: ImageTransformOptions): string {
  const params = Object.entries(opts)
    .filter(([, v]) => v !== undefined)
    .map(([k, v]) => `${k}=${v}`)
    .join(",")

  return `/cdn-cgi/image/${params}/${basePath}`
}

// Intelligent lazy loading based on viewport position
function LazyImage({ src, alt, threshold = 0.1 }: LazyImageProps) {
  const imgRef = useRef<HTMLImageElement>(null)
  const [loaded, setLoaded] = useState(false)
  const [inView, setInView] = useState(false)

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setInView(true)
          observer.disconnect()
        }
      },
      { rootMargin: "200px", threshold }
    )

    if (imgRef.current) observer.observe(imgRef.current)
    return () => observer.disconnect()
  }, [threshold])

  return (
    <div ref={imgRef} className="image-wrapper" style={{ minHeight: "200px" }}>
      {inView ? (
        <img
          src={src}
          alt={alt}
          onLoad={() => setLoaded(true)}
          className={loaded ? "loaded" : "loading"}
          loading="lazy"
        />
      ) : (
        <div className="image-skeleton" />
      )}
    </div>
  )
}

// server/images/pipeline.ts
export const uploadImage = createServerFn({ method: "POST" }).handler(
  async ({ request, context }) => {
    const formData = await request.formData()
    const file = formData.get("image") as File

    // Validation
    if (!file.type.startsWith("image/")) throw new Error("Invalid file type")
    if (file.size > 10 * 1024 * 1024) throw new Error("File too large")

    const buffer = await file.arrayBuffer()
    const id = crypto.randomUUID()
    const key = `images/${id}`

    // Store original
    await context.env.MY_BUCKET.put(`${key}/original`, buffer, {
      httpMetadata: { contentType: file.type },
    })

    // Generate thumbnails via Image Resizing
    const sizes = [
      { width: 150, suffix: "thumb" },
      { width: 400, suffix: "small" },
      { width: 800, suffix: "medium" },
      { width: 1600, suffix: "large" },
    ]

    for (const { width, suffix } of sizes) {
      // Store reference — actual resize happens on CDN
      await context.env.MY_BUCKET.put(`${key}/${suffix}.webp`, buffer)
    }

    return {
      id,
      urls: {
        original: `https://images.tanstackship.com/${key}/original`,
        thumb: `https://images.tanstackship.com/cdn-cgi/image/width=150/${key}/original`,
        small: `https://images.tanstackship.com/cdn-cgi/image/width=400/${key}/original`,
        medium: `https://images.tanstackship.com/cdn-cgi/image/width=800/${key}/original`,
        large: `https://images.tanstackship.com/cdn-cgi/image/width=1600/${key}/original`,
      },
    }
  }
)