Storage supports image transformation
Supabase Storage provides built-in image optimization and transformation capabilities to resize, compress, and transform media files on the fly.
Supabase · Storage · all subjects
storage/image-transformation
23 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Storage Image Transformations incur additional charges
If Storage Image Transformations are used, additional charges apply beyond the base storage size pricing.
Resize images to reduce egress
Images typically make up most of egress. By keeping them as small as possible, you can cut down on egress and boost application performance. The Image Transformation service can optimize any image on the fly.
Image Transformations availability by plan
Image Resizing is currently enabled for Pro Plan and above. Other plans do not have access to this feature.
Enable or disable Image Transformations in Dashboard
Image Transformations can be enabled or disabled from the Storage > Settings section of the Dashboard by toggling the Enable Image Transformations option. Disabling prevents any image transformation requests from being processed.
getPublicUrl and createSignedUrl support transform option
Client library methods getPublicUrl and createSignedUrl support the transform option parameter to return a URL that serves the transformed image.
Public URL format for transformed images
A public URL for a transformed image follows this format: https://project_id.supabase.co/storage/v1/render/image/public/bucket/image.jpg?width=500&height=600
Transformation options are immutable in signed URLs
The transformation options are embedded into the token attached to a signed URL and cannot be changed once signed.
Download with transformation example in JavaScript
To download a transformed image in JavaScript, pass the transform option to the download function: supabase.storage.from('bucket').download('image.jpg', { transform: { width: 800, height: 300, } })
Automatic image optimization to WebP format
When using the image transformation API, Storage automatically detects the client's supported formats and returns the best format. For instance, Chrome browsers automatically receive WebP-optimized images instead of JPEG when transformation options are used. Currently only WebP is supported; AVIF support will come in the near future.
Disable automatic optimization with format=origin
To opt-out from automatic image optimization and return the original format of the image, pass the format=origin parameter when requesting a transformed image. This is supported in the JavaScript SDK starting from v2.2.0.
Disable automatic optimization example in JavaScript
To disable automatic optimization in JavaScript: await supabase.storage.from('bucket').download('image.jpeg', { transform: { width: 200, height: 200, format: 'origin', }, })
Next.js custom image loader for Supabase
Create a supabase-image-loader.js file with: const projectId = '' export default function supabaseLoader({ src, width, quality }) { return `https://${projectId}.supabase.co/storage/v1/render/image/public/${src}?width=${width}&quality=${quality || 75}` }. Then configure next.config.js with: module.exports = { images: { loader: 'custom', loaderFile: './supabase-image-loader.js', }, }
Quality parameter for image optimization
The quality parameter accepts a value from 20 to 100, with 100 being the highest quality. This parameter defaults to 80. It is used to optimize the returned image quality.
Resize parameter modes for image resizing
The resize parameter supports three modes: cover (resizes while keeping aspect ratio to fill a given size and crops projecting parts, default), contain (resizes while keeping aspect ratio to fit a given size), and fill (resizes without keeping the aspect ratio).
Single width or height resizes with aspect ratio maintained
If only one of width or height parameters is specified, the image will be resized and cropped while maintaining the aspect ratio.
Image transformation dimension limits
Width and height must be an integer value between 1-2500 pixels. The image size cannot exceed 25MB. The image resolution cannot exceed 50MP.
Supported image formats for transformation
Supported source formats: PNG (png), JPEG (jpg), WebP (webp), AVIF (avif), GIF (gif), ICO (ico), SVG (svg), HEIC (heic), BMP (bmp), TIFF (tiff). All formats except HEIC can be returned as result. HEIC can be sourced but not returned as output format.
Self-hosted image transformation uses imgproxy
The self-hosted solution for image resizing and optimization uses imgproxy under the hood. The official self-hosted Docker Compose stack from supabase/supabase already includes an imgproxy service wired to the storage service with ENABLE_IMAGE_TRANSFORMATION set to true and IMGPROXY_URL configured to http://imgproxy:5001.
imgproxy Docker container configuration
Deploy an imgproxy container with image darthsim/imgproxy and environment variables: IMGPROXY_ENABLE_WEBP_DETECTION=true and IMGPROXY_JPEG_PROGRESSIVE=true. Ensure this service is only reachable within an internal network and not exposed to the public internet.
Storage API self-hosted configuration for image transformation
Configure the self-hosted storage-api service with environment variables: ENABLE_IMAGE_TRANSFORMATION=true and IMGPROXY_URL=yourinternalimgproxyurl.internal.com
Resize image example with contain mode in JavaScript
To resize an image using contain mode in JavaScript: supabase.storage.from('bucket').download('image.jpg', { transform: { width: 800, height: 300, resize: 'contain', }, })
Quality optimization example in JavaScript
To optimize image quality in JavaScript: supabase.storage.from('bucket').download('image.jpg', { transform: { quality: 50, }, })