How to resize Supabase Storage images

Updated September 28, 2026. Prices checked against the sources below.

A Supabase Storage URL serves the file exactly as uploaded, so a 4 MB phone photo stays 4 MB in a 64px avatar. There are four common ways to fix that. Which one fits depends on your Supabase plan, where your app runs, and how many images you serve.

1. Supabase's image transformations

Supabase can resize images itself through a render endpoint. supabase-js builds the URL when you pass a transform option. Supabase picks WebP for browsers that support it.

It's available on Pro and higher plans (from $25 a month), not on Free. Pro includes 100 origin images a month, then charges $5 per 1,000. Outputs are limited to 2,500px per side, and sources to 25 MB and 50 megapixels.

supabase-js

const { data } = supabase.storage.from("avatars").getPublicUrl("cory.png", {
  transform: { width: 256, height: 256, resize: "cover" },
})

// data.publicUrl:
// https://xyz.supabase.co/storage/v1/render/image/public/avatars/cory.png?width=256&height=256&resize=cover

2. next/image on Vercel

If your Next.js app is deployed on Vercel, next/image can optimize images from your bucket once its URL is in remotePatterns. Vercel bills a transformation for every cache miss and stale revalidation, so set a long minimumCacheTTL for images that don't change. The Hobby plan is for non-commercial use.

next.config.ts

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

export default nextConfig

3. An image CDN in front of the bucket

An image CDN fetches originals from your bucket, resizes them at the edge, and caches the result. With ProdKit, you connect a public bucket once and replace the storage base URL. The object path stays the same. It works on every Supabase plan, including Free, and in any app, not only Next.js.

Replace one URL

# Before
https://xyz.supabase.co/storage/v1/object/public/avatars/cory.png

# After
https://img.prodkit.cloud/acme/avatars/cory.png?width=256

4. Resize once, when the file is uploaded

You can also generate fixed sizes in your upload handler or a background job and store each one next to the original. There's no per-request cost, but storage grows with every size, adding a size means reprocessing old uploads, and you still need format negotiation for AVIF and WebP.

Which should you choose?

On Supabase Pro with a few hundred images a month: Supabase's transformations are simplest.
A Next.js app on Vercel Pro with web-only images: next/image, with a long minimumCacheTTL.
On Supabase Free, serving images to mobile apps, or above a few hundred images a month: an image CDN such as ProdKit.
A small, fixed set of sizes that never changes: resize on upload.

Try it on your bucket

The free plan covers 1,000 origin images a month and never bills. Connect a public bucket and replace one URL.

Start free Read the docs

Sources

Checked on September 28, 2026. Prices change, so confirm against the source before deciding.