Image transformations in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to resize an image to 300x300 pixels using Supabase storage URL.

Supabase

const resizedImageUrl = supabase.storage.from('images').getPublicUrl('photo.jpg').data.publicUrl + '?[1]=resize&width=300&height=300';

Drag options to blanks, or click blank then click option'

Aimg

Btransform

Cimage

Dfilter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'transform' or 'filter' instead of 'img' causes the transformation not to apply.

Leaving out the query parameter results in the original image size.

The correct query parameter to apply image transformations in Supabase storage URLs is img.

2fill in blank

medium

Complete the code to rotate an image by 90 degrees using Supabase image transformations.

Supabase

const rotatedImageUrl = supabase.storage.from('avatars').getPublicUrl('user.png').data.publicUrl + '?img=rotate:[1]';

Drag options to blanks, or click blank then click option'

A45

B270

C180

D90

Attempts:

3 left

💡 Hint

Common Mistakes

Using 45 degrees is invalid for Supabase image rotation.

Using 180 or 270 rotates the image differently than intended.

To rotate an image by 90 degrees, use rotate:90 in the transformation query.

3fill in blank

hard

Fix the error in the code to flip an image horizontally using Supabase transformations.

Supabase

const flippedImageUrl = supabase.storage.from('photos').getPublicUrl('landscape.jpg').data.publicUrl + '?img=flip:[1]';

Drag options to blanks, or click blank then click option'

Avertical

Bsideways

Chorizontal

Dreverse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'vertical' flips the image upside down, not horizontally.

Using invalid terms causes the transformation to fail.

The correct value to flip an image horizontally is horizontal.

4fill in blank

hard

Fill both blanks to crop an image to 100x100 pixels starting at x=10 and y=20.

Supabase

const croppedImageUrl = supabase.storage.from('gallery').getPublicUrl('pic.png').data.publicUrl + '?img=crop:width=[1],height=100,x=[2],y=20';

Drag options to blanks, or click blank then click option'

A100

B10

C20

D50

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up x and y coordinates.

Using wrong width or height values.

The width for cropping is 100 pixels and the x coordinate is 10.

5fill in blank

hard

Fill all three blanks to apply a grayscale filter, resize to 200x200, and rotate by 180 degrees.

Supabase

const transformedImageUrl = supabase.storage.from('avatars').getPublicUrl('profile.jpg').data.publicUrl + '?img=[1]&img=[2]&img=[3]';

Drag options to blanks, or click blank then click option'

Afilter:grayscale

Bresize:width=200,height=200

Crotate:180

Dflip:horizontal

Attempts:

3 left

💡 Hint

Common Mistakes

Combining all transformations in one parameter.

Using flip instead of rotate for rotation.

The transformations are applied in order: grayscale filter, resize, then rotate 180 degrees.

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