VercelPerformancenext/imageCore Web Vitals

How Vercel's image pipeline turned a 4MB PNG into a ~180KB WebP

Oliver White

1 May 2026 · 7 min read

Every artwork image on AI Art Arena is stored in Supabase Storage as the original upload — whatever format, whatever size the artist submitted. On the contest page, those images need to load fast. A 4MB PNG at full resolution would tank the LCP score and drive visitors away before the vote button renders.

What next/image actually does

When you use the next/image component with a remote image URL, Vercel intercepts the request, downloads the original from the source, transforms it to the optimal format and size, and caches the result at the edge. The browser receives a transformed image — not the original.

Browser requests /next/image?url=supabase.co/...&w=750&q=75
Vercel checks its edge cache — if hit, returns immediately
On miss: Vercel downloads the original from Supabase Storage
Converts to WebP (or AVIF if the browser supports it)
Resizes to the requested width (750px in this case)
Caches at edge with Cache-Control: public, max-age=31536000, immutable
Returns the transformed image to the browser

Original PNG

4.1MB

as uploaded

WebP (750px)

~180KB

after transformation

Size reduction

96%

same visual quality

Edge cache TTL

1 year

immutable after first hit

The configuration that makes this work

typescript

// next.config.ts
const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.supabase.co',
        pathname: '/storage/v1/object/public/**',
      },
      { protocol: 'https', hostname: 'avatars.githubusercontent.com' },
    ],
    // Try AVIF first (smaller), fall back to WebP
    formats: ['image/avif', 'image/webp'],
    // Cache transformed images for 1 year — artworks never change after upload
    minimumCacheTTL: 31536000,
  },
};

⚠

remotePatterns is a security allowlist — only images from approved hostnames are transformed. If you omit a hostname, next/image will return a 400 error instead of the image. This prevents your image optimization endpoint from being used as an open proxy to transform arbitrary external images.

Priority, sizes, and CLS prevention

typescript

// The full correct pattern for every artwork image
<div style={{ position: 'relative', aspectRatio: '1', overflow: 'hidden' }}>
  <Image
    src={artwork.image_url}
    alt={artwork.title}
    fill
    // priority={true} on first 2 images — triggers <link rel="preload"> in <head>
    // Remaining images lazy-load by default
    priority={index < 2}
    // Tell the browser how wide the image will be at each breakpoint
    // Without this, it downloads the largest size unnecessarily
    sizes="(max-width: 768px) 50vw, 33vw"
    className="object-cover"
  />
</div>

Attribute	What it does	CWV impact
fill	Image fills its container via position:absolute	CLS: none — container defines dimensions
priority	Adds <link rel=preload> to <head> for the image	LCP: significant — first images load earlier
sizes	Tells browser actual render size for srcset selection	Performance: browser picks correct size variant
aspectRatio wrapper	Reserves space before image loads	CLS: eliminated — no layout shift on load
minimumCacheTTL=31536000	1-year edge cache for transformed images	TTFB: near-zero on cache hit

The combination of these attributes targets the three most impactful Core Web Vitals: LCP (Largest Contentful Paint) via preloading, CLS (Cumulative Layout Shift) via aspect-ratio containers, and FID (First Input Delay) via reduced JavaScript by keeping images in Server Components.

Built with this methodology

next/image is an image transformation pipeline, not just a component. Here is what actually happens when you configure remotePatterns, formats, and minimumCacheTTL — and how priority, sizes, and aspect-ratio wrappers affect LCP and CLS.

See the live voting system this post documents →

From the build log

Next.jsAuthentication

Three bugs, one session: fixing a NextAuth v5 race condition, Next.js 16 async params, and broken contest URLs

Read →

PostgreSQLSupabase

PostgreSQL SECURITY DEFINER functions: atomic votes, 80% latency reduction, zero race conditions

Read →

Written by

Oliver White →

← All posts

VercelPerformancenext/imageCore Web Vitals

How Vercel's image pipeline turned a 4MB PNG into a ~180KB WebP

Oliver White

1 May 2026 · 7 min read

What next/image actually does

Browser requests /next/image?url=supabase.co/...&w=750&q=75
Vercel checks its edge cache — if hit, returns immediately
On miss: Vercel downloads the original from Supabase Storage
Converts to WebP (or AVIF if the browser supports it)
Resizes to the requested width (750px in this case)
Caches at edge with Cache-Control: public, max-age=31536000, immutable
Returns the transformed image to the browser

Original PNG

4.1MB

as uploaded

WebP (750px)

~180KB

after transformation

Size reduction

96%

same visual quality

Edge cache TTL

1 year

immutable after first hit

The configuration that makes this work

typescript

// next.config.ts
const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.supabase.co',
        pathname: '/storage/v1/object/public/**',
      },
      { protocol: 'https', hostname: 'avatars.githubusercontent.com' },
    ],
    // Try AVIF first (smaller), fall back to WebP
    formats: ['image/avif', 'image/webp'],
    // Cache transformed images for 1 year — artworks never change after upload
    minimumCacheTTL: 31536000,
  },
};

⚠

Priority, sizes, and CLS prevention

typescript

// The full correct pattern for every artwork image
<div style={{ position: 'relative', aspectRatio: '1', overflow: 'hidden' }}>
  <Image
    src={artwork.image_url}
    alt={artwork.title}
    fill
    // priority={true} on first 2 images — triggers <link rel="preload"> in <head>
    // Remaining images lazy-load by default
    priority={index < 2}
    // Tell the browser how wide the image will be at each breakpoint
    // Without this, it downloads the largest size unnecessarily
    sizes="(max-width: 768px) 50vw, 33vw"
    className="object-cover"
  />
</div>

Attribute	What it does	CWV impact
fill	Image fills its container via position:absolute	CLS: none — container defines dimensions
priority	Adds <link rel=preload> to <head> for the image	LCP: significant — first images load earlier
sizes	Tells browser actual render size for srcset selection	Performance: browser picks correct size variant
aspectRatio wrapper	Reserves space before image loads	CLS: eliminated — no layout shift on load
minimumCacheTTL=31536000	1-year edge cache for transformed images	TTFB: near-zero on cache hit

Built with this methodology

See the live voting system this post documents →

From the build log

Next.jsAuthentication

Three bugs, one session: fixing a NextAuth v5 race condition, Next.js 16 async params, and broken contest URLs

Read →

PostgreSQLSupabase

PostgreSQL SECURITY DEFINER functions: atomic votes, 80% latency reduction, zero race conditions

Read →

Written by

Oliver White →

← All posts