Transformaciones de imágenes y URL firmadas
Ofrezca imágenes redimensionadas y optimizadas al vuelo, y conceda acceso temporal a archivos privados mediante URL firmadas de Supabase Storage.
Transformaciones de imágenes y URL firmadas es una lección gratuita de Supabase Backend as a Service en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Supabase Backend as a Service, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Supabase Backend as a Service incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Smarter File Delivery
Supabase Storage can transform images on request and create signed URLs for time-limited access to private files. Both reduce custom backend work.
Public vs Private Buckets
Public buckets serve files via a permanent URL. Private buckets require a signed URL or an authenticated request, controlled by policies.
Getting a Public URL
For public buckets, build the URL directly, no token needed.
const { data } = supabase.storage
.from('avatars')
.getPublicUrl('user-42.png');
console.log(data.publicUrl);On-the-Fly Resizing
Pass transform options to request a resized version. Supabase generates and caches it.
const { data } = supabase.storage
.from('avatars')
.getPublicUrl('user-42.png', {
transform: { width: 100, height: 100, resize: 'cover' }
});Why Transform at the Edge?
Serving a 100px thumbnail instead of a full-size photo saves bandwidth and speeds up pages, without storing many copies yourself.
Quality and Format
You can also tune quality and request modern formats to shrink payloads further.
function thumbOpts(size) {
return { width: size, height: size, quality: 75, resize: 'cover' };
}
console.log(thumbOpts(64));Creating a Signed URL
For private files, generate a URL that expires after a set number of seconds.
const { data } = await supabase.storage
.from('invoices')
.createSignedUrl('inv-2026.pdf', 60);
console.log(data.signedUrl);Choosing an Expiry
Keep expiry as short as the use case allows. A download link might need 60 seconds; an embedded image might need an hour.
function expirySeconds(useCase) {
return useCase === 'download' ? 60 : 3600;
}
console.log(expirySeconds('download'));Signed URLs With Transforms
You can combine a signed URL with an image transform to serve resized private images securely.
Caching Behavior
Transformed images are cached at the edge, so repeated requests for the same size are fast. Vary the size sparingly to keep cache hits high.
Putting It Together
Use public URLs and transforms for open assets, and signed URLs for private files, with short expiries and edge caching for performance.
Quick Check
Test your understanding of URLs and transforms.
Recap
You learned to build public URLs, apply on-the-fly image transforms for performance, and create expiring signed URLs for private files, plus how edge caching keeps it fast.
Preguntas frecuentes
¿La lección «Transformaciones de imágenes y URL firmadas» es gratis?
Sí — el texto completo de «Transformaciones de imágenes y URL firmadas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Supabase Backend as a Service, actualiza a CoddyKit PRO. El curso de Supabase Backend as a Service incluye 4 lecciones en total.
¿Qué aprenderé en «Transformaciones de imágenes y URL firmadas»?
Ofrezca imágenes redimensionadas y optimizadas al vuelo, y conceda acceso temporal a archivos privados mediante URL firmadas de Supabase Storage. Practicas Supabase Backend as a Service con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Supabase Backend as a Service?
No se requiere experiencia previa. Supabase Backend as a Service en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Transformaciones de imágenes y URL firmadas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Supabase Backend as a Service?
Sí. Cada lección de Supabase Backend as a Service incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Almacenamiento de archivos en buckets de Supabase
- Gestión del acceso mediante políticas
- Carga y recuperación de archivos multimedia
- Transformaciones de imágenes y URL firmadas