ProdKit vs Vercel Image Optimization for Supabase images

Which one fits

What it costs each month

An app serving each image at 3 sizes, as AVIF and WebP, averaging 60 KB per optimized image.

Vercel Image Optimization: Best case on Pro at the lowest regional rates: each size and format transformed once and cached all month. Excludes cache reads, Fast Data Transfer, and Edge Requests. ProdKit: the cheapest plan that covers the volume, including overage.

Side by side

Why cache lifetime matters on Vercel

Vercel bills a transformation on every cache miss and every stale revalidation. For remote images, the cache lifetime is the source's max-age or minimumCacheTTL, whichever is larger. Supabase Storage's default cache lifetime is one hour, so without a longer minimumCacheTTL a frequently viewed image is transformed again every hour.

Raising minimumCacheTTL keeps costs down, with a trade-off: replacing a file at the same path shows the old image until the cache expires or you purge it.

// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [new URL("https://xyz.supabase.co/storage/v1/object/public/**")],
    minimumCacheTTL: 2678400, // 31 days
  },
}

export default nextConfig

Using ProdKit with next/image

ProdKit works as a next/image loader, so you keep the Image component and its lazy loading and srcset. Images are then served from Cloudflare instead of your Vercel project, wherever the app is deployed.

// prodkit-loader.ts
export default function prodkitLoader({ src, width, quality }: { src: string; width: number; quality?: number }) {
  const url = new URL(`https://img.prodkit.cloud/acme/${src.replace(/^\//, "")}`)
  url.searchParams.set("width", String(width))
  if (quality) url.searchParams.set("quality", String(quality))
  return url.toString()
}

// next.config.ts: images: { loader: "custom", loaderFile: "./prodkit-loader.ts" }

Questions