0Pricing
Supabase Backend as a Service · Lesson

Image Transformations and Signed URLs

Serve resized, optimized images on the fly and grant temporary access to private files using Supabase Storage signed URLs.

Image Transformations and Signed URLs is a free Supabase Backend as a Service lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Supabase Backend as a Service learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Smarter File Delivery

Supabase Storage can transform images on request and create signed URLs for time-limited access to private files. Both reduce custom backend work.

Public vs Private Buckets

Public buckets serve files via a permanent URL. Private buckets require a signed URL or an authenticated request, controlled by policies.

Getting a Public URL

For public buckets, build the URL directly, no token needed.

const { data } = supabase.storage
  .from('avatars')
  .getPublicUrl('user-42.png');
console.log(data.publicUrl);

On-the-Fly Resizing

Pass transform options to request a resized version. Supabase generates and caches it.

const { data } = supabase.storage
  .from('avatars')
  .getPublicUrl('user-42.png', {
    transform: { width: 100, height: 100, resize: 'cover' }
  });

Why Transform at the Edge?

Serving a 100px thumbnail instead of a full-size photo saves bandwidth and speeds up pages, without storing many copies yourself.

Quality and Format

You can also tune quality and request modern formats to shrink payloads further.

function thumbOpts(size) {
  return { width: size, height: size, quality: 75, resize: 'cover' };
}
console.log(thumbOpts(64));

Creating a Signed URL

For private files, generate a URL that expires after a set number of seconds.

const { data } = await supabase.storage
  .from('invoices')
  .createSignedUrl('inv-2026.pdf', 60);
console.log(data.signedUrl);

Choosing an Expiry

Keep expiry as short as the use case allows. A download link might need 60 seconds; an embedded image might need an hour.

function expirySeconds(useCase) {
  return useCase === 'download' ? 60 : 3600;
}
console.log(expirySeconds('download'));

Signed URLs With Transforms

You can combine a signed URL with an image transform to serve resized private images securely.

Caching Behavior

Transformed images are cached at the edge, so repeated requests for the same size are fast. Vary the size sparingly to keep cache hits high.

Putting It Together

Use public URLs and transforms for open assets, and signed URLs for private files, with short expiries and edge caching for performance.

Quick Check

Test your understanding of URLs and transforms.

Recap

You learned to build public URLs, apply on-the-fly image transforms for performance, and create expiring signed URLs for private files, plus how edge caching keeps it fast.

Frequently asked questions

Is the “Image Transformations and Signed URLs” lesson free?

Yes — the full text of “Image Transformations and Signed URLs” is free to read here on the web, and the Supabase Backend as a Service course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Supabase Backend as a Service course, upgrade to CoddyKit PRO.

What will I learn in “Image Transformations and Signed URLs”?

Serve resized, optimized images on the fly and grant temporary access to private files using Supabase Storage signed URLs. You practise Supabase Backend as a Service with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Supabase Backend as a Service?

No prior experience is required. Supabase Backend as a Service on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Image Transformations and Signed URLs” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Supabase Backend as a Service lesson?

Yes. Every Supabase Backend as a Service lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Storing Files in Supabase Buckets
  2. Managing Access with Policies
  3. Uploading and Retrieving Media
  4. Image Transformations and Signed URLs
← Back to Supabase Backend as a Service