Image transformations in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

How does Supabase handle image resizing in transformations?

Supabase allows image resizing by specifying width and height parameters in the URL. What happens if you set only the width parameter and omit the height?

A The image is resized to the specified width and height defaults to the original image height, ignoring aspect ratio.

B The image is resized to the specified width and the height is set to zero, resulting in a broken image.

C The image is resized to the specified width and the height is adjusted to keep the original aspect ratio.

D The image is not resized at all because both width and height must be specified.

💡 Hint

Think about how images keep their shape when only one dimension is changed.

When only width is specified, Supabase resizes the image width and automatically adjusts height to keep the original aspect ratio, preventing distortion.

❓ Configuration

intermediate

Which URL correctly applies a grayscale filter to an image in Supabase?

Supabase supports image filters via URL parameters. Which URL applies a grayscale filter correctly?

A https://xyz.supabase.co/storage/v1/object/public/images/photo.jpg?grayscale=true

B https://xyz.supabase.co/storage/v1/object/public/images/photo.jpg?filters=grayscale

C https://xyz.supabase.co/storage/v1/object/public/images/photo.jpg?filter=grayscale

D https://xyz.supabase.co/storage/v1/object/public/images/photo.jpg?filters=grayscale()

💡 Hint

Look for the correct parameter name and syntax for filters.

Supabase uses the 'filters' parameter with function syntax like 'grayscale()' to apply image filters.

❓ Architecture

advanced

What is the best way to optimize image delivery with Supabase transformations for a global audience?

You want to serve images quickly worldwide using Supabase image transformations. Which architecture choice is best?

A Store images in Supabase storage and use Supabase's built-in CDN with transformation URLs for delivery.

B Store images in Supabase storage and download them to your server to transform and serve manually.

C Store images locally on your server and use Supabase only for transformation logic.

D Store images in Supabase storage and serve them directly without transformations to reduce latency.

💡 Hint

Think about caching and global distribution benefits.

Supabase storage integrates with a CDN that caches transformed images globally, reducing latency and improving delivery speed.

❓ security

advanced

Which Supabase image transformation URL practice improves security for private images?

You have private images in Supabase storage. How should you secure transformation URLs to prevent unauthorized access?

A Use only the base image URL without transformations to keep it secure.

B Use signed URLs with expiration times for image access and transformations.

C Embed transformation parameters in client-side code without authentication.

D Use public URLs with transformation parameters but restrict access by IP address.

💡 Hint

Consider how to limit access duration and verify user permissions.

Signed URLs with expiration ensure only authorized users can access private images and their transformations temporarily.

✅ Best Practice

expert

How should you design a Supabase image transformation workflow to minimize bandwidth and cost?

You want to serve multiple image sizes and formats efficiently using Supabase transformations. Which approach minimizes bandwidth and cost?

A Generate and cache transformed images on first request using Supabase URLs, then serve cached versions.

B Pre-generate all possible image sizes and formats and store them separately in Supabase storage.

C Always transform images on the client side after downloading the original full-size image.

D Serve only the original images and let clients resize them to save storage space.

💡 Hint

Think about caching transformed images and avoiding repeated processing.

Supabase caches transformed images after first request, reducing repeated processing and bandwidth by serving cached versions.

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