Supabase Storage goes beyond simple file uploads. It offers powerful features to transform your files on the fly and integrate seamlessly with other parts of your application and even external services. Let's explore some of these advanced capabilities.
A standout feature is the integration with Cloudflare Images. This allows you to perform common image manipulations directly when serving your images, without needing to store multiple versions. This is incredibly efficient and saves storage space.
You can achieve this by appending query parameters to your image URLs. These parameters are interpreted by Supabase's underlying infrastructure (which leverages Cloudflare's edge network) to transform the image before it's delivered to the user.
Common transformations include:
- Resizing: Specify width and height.
- Cropping: Define regions to extract from the image.
- Format Conversion: Serve images in different formats like WebP for better compression.
- Quality Adjustment: Control the compression level.
Here's an example of how you might construct a URL to resize an image and convert it to WebP:
// Assuming your bucket is 'public' and the file is 'images/profile.jpg'
const imageUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/images/profile.jpg?width=300&format=webp&quality=80`;The exact parameters and their syntax can be found in the Supabase Storage documentation and the Cloudflare Images documentation, as Supabase leverages their capabilities.