Image transformations in Supabase - Step-by-Step Execution

Process Flow - Image transformations

Request Image URL

↓

Apply Transformation Parameters

↓

Generate Transformed Image URL

↓

Fetch Transformed Image

↓

Display or Use Image

The flow starts with an image URL, applies transformation parameters, generates a new URL for the transformed image, fetches it, and then displays or uses it.

Execution Sample

Supabase

const { data: { publicUrl: originalUrl } } = supabase.storage.from('avatars').getPublicUrl('user1.png');
const { data: { publicUrl: transformedUrl } } = supabase.storage.from('avatars').getPublicUrl('user1.png', {
  transform: { width: 100, height: 100, resize: 'cover' }
});

This code fetches a public URL for an image and applies a transformation to resize it to 100x100 pixels with cover mode.

Process Table

Step	Action	Input	Transformation Applied	Output URL
1	Request original image URL	'user1.png'	None	https://supabase.storage/avatars/user1.png
2	Apply transformation parameters	{ width: 100, height: 100, resize: 'cover' }	Resize to 100x100 cover	https://supabase.storage/avatars/user1.png?width=100&height=100&resize=cover
3	Fetch transformed image	Transformed URL	Image resized	Image data returned
4	Display or use image	Image data	Displayed resized image	Image shown on screen

💡 All steps complete, transformed image is ready for use.

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
originalUrl	undefined	https://supabase.storage/avatars/user1.png	https://supabase.storage/avatars/user1.png	https://supabase.storage/avatars/user1.png	https://supabase.storage/avatars/user1.png
transformedUrl	undefined	undefined	https://supabase.storage/avatars/user1.png?width=100&height=100&resize=cover	https://supabase.storage/avatars/user1.png?width=100&height=100&resize=cover	https://supabase.storage/avatars/user1.png?width=100&height=100&resize=cover
imageData	undefined	undefined	undefined	image bytes	image bytes

Key Moments - 3 Insights

Why does the transformed URL include query parameters?

The query parameters specify the transformation instructions (like width and height) so the storage service knows how to resize the image, as shown in step 2 of the execution_table.

Is the original image URL changed or replaced after transformation?

No, the original URL remains unchanged (step 1), and the transformed URL is a new URL with parameters added (step 2). Both URLs coexist.

When is the actual image data fetched?

The image data is fetched only after the transformed URL is generated (step 3), not before.

Visual Quiz - 3 Questions

Look at the execution_table, what is the transformedUrl after step 2?

A undefined

B https://supabase.storage/avatars/user1.png

C https://supabase.storage/avatars/user1.png?width=100&height=100&resize=cover

D image bytes

💡 Hint

Check the 'transformedUrl' variable in variable_tracker after step 2.

At which step is the image data actually fetched?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Action' and 'Output URL' columns in execution_table for when image data is returned.

If we remove the 'resize' parameter, how would the transformed URL change at step 2?

A It would cause an error and no URL is generated

B It would not include '&resize=cover' in the URL

C It would be the same as the original URL

D It would include '&resize=stretch' instead

💡 Hint

Refer to how query parameters are appended in the transformed URL in execution_table step 2.

Concept Snapshot

Image transformations in Supabase storage:
- Start with original image URL
- Add transformation parameters (width, height, resize)
- Generate new URL with query parameters
- Fetch and display transformed image
- Original image URL stays unchanged

Full Transcript

This visual execution shows how image transformations work in Supabase storage. First, you get the original image URL. Then you add transformation parameters like width and height to create a new URL with query parameters. This new URL tells Supabase how to resize the image. Next, the transformed image is fetched using this URL. Finally, the resized image is displayed or used. The original image URL remains unchanged throughout the process.

Practice

1. What is the main purpose of image transformations in Supabase storage?

easy

A. To change how images look without modifying the original file

B. To permanently delete the original image after editing

C. To convert images into text files

D. To upload images faster by compressing them automatically

Solution

1. Step 1: Understand image transformation concept

   Image transformations modify the appearance of images dynamically without changing the original stored file.

2. Step 2: Identify the purpose in Supabase

   Supabase uses transformations to resize, crop, or add effects on the fly, keeping the original image intact.

3. Final Answer:

   To change how images look without modifying the original file -> Option A

4. Quick Check:

   Image transformations = change appearance only [OK]

Hint: Image transformations do not alter the original file [OK]

Common Mistakes:

• Thinking transformations delete or overwrite original images
• Confusing transformations with file format conversion
• Assuming transformations speed up upload automatically

2. Which URL query parameter correctly resizes an image to 300 pixels wide in Supabase?

easy

A. ?size=300

B. ?resize=300

C. ?width=300

D. ?w=300

Solution

1. Step 1: Recall Supabase image resize syntax

   Supabase uses the parameter w to specify width in pixels for resizing images.

2. Step 2: Match correct parameter

   The correct query parameter to resize width to 300 pixels is ?w=300.

3. Final Answer:

   ?w=300 -> Option D

4. Quick Check:

   Resize width = ?w=number [OK]

Hint: Use ?w= for width resizing in Supabase URLs [OK]

Common Mistakes:

• Using ?width= or ?resize= which are invalid
• Confusing size with width parameter
• Omitting the question mark in URL

3. What will be the result of accessing the URL https://example.supabase.co/storage/v1/object/public/images/photo.jpg?w=200&h=100&fit=crop?

medium

A. The image will be resized to 200x100 pixels and cropped to fit exactly

B. The image will be resized to 200x100 pixels but stretched without cropping

C. The image will remain original size ignoring parameters

D. The URL will cause an error due to invalid parameters

Solution

1. Step 1: Analyze URL parameters

   The URL includes w=200 (width), h=100 (height), and fit=crop which crops the image to fit exactly the given dimensions.

2. Step 2: Understand transformation behavior

   Supabase will resize the image to 200 pixels wide and 100 pixels tall, cropping parts if needed to maintain aspect ratio.

3. Final Answer:

   The image will be resized to 200x100 pixels and cropped to fit exactly -> Option A

4. Quick Check:

   Resize + crop = exact fit size [OK]

Hint: fit=crop crops image to exact width and height [OK]

Common Mistakes:

• Assuming fit=crop stretches image without cropping
• Ignoring height parameter h
• Thinking parameters cause errors

4. You tried to resize an image using ?w=abc in the URL but it did not work. What is the likely problem?

medium

A. The parameter should be ?width=abc instead

B. The width parameter must be a number, not letters

C. Supabase does not support resizing images

D. You need to add &fit=stretch to resize properly

Solution

1. Step 1: Check parameter value type

   The width parameter w expects a numeric value representing pixels, not letters.

2. Step 2: Identify error cause

   Using abc as value is invalid and causes the resize to fail.

3. Final Answer:

   The width parameter must be a number, not letters -> Option B

4. Quick Check:

   Width value must be numeric [OK]

Hint: Width and height values must be numbers [OK]

Common Mistakes:

• Using text instead of numbers for size
• Changing parameter name incorrectly
• Assuming resizing needs extra fit parameter

5. You want to display a thumbnail of an image that is exactly 150x150 pixels, cropped to center, and with a grayscale effect. Which URL query parameters should you use?

hard

A. ?w=150&h=150&fit=crop&grayscale=true

B. ?width=150&height=150&crop=center&effect=grayscale

C. ?w=150&h=150&fit=crop&grayscale=1

D. ?w=150&h=150&fit=contain&grayscale=1

Solution

1. Step 1: Set size and cropping parameters

   Use w=150 and h=150 to set width and height, and fit=crop to crop the image to exact size centered.

2. Step 2: Apply grayscale effect correctly

   Supabase uses grayscale=1 to apply grayscale effect, not true.

3. Final Answer:

   ?w=150&h=150&fit=crop&grayscale=1 -> Option C

4. Quick Check:

   Crop + grayscale=1 for exact grayscale thumbnail [OK]

Hint: Use grayscale=1, not true, for grayscale effect [OK]

Common Mistakes:

• Using true instead of 1 for grayscale
• Using fit=contain instead of fit=crop
• Using wrong parameter names like width or effect