Subir Imágenes con Bunny CDN
SGG utiliza Bunny CDN para almacenar y entregar las imágenes de tus productos de forma rápida y optimizada en todo el mundo.
💡 ¿Por qué Bunny CDN? Es una de las CDN más rápidas y económicas del mercado, con más de 100 puntos de presencia global. Tus imágenes cargan instantáneamente sin importar dónde estén tus clientes.
Características Principales
🚀 Carga Ultra Rápida
- 100+ puntos de presencia global
- Caché en el borde (edge caching)
- Latencia inferior a 20ms
🔧 Optimización Automática
- Redimensionamiento on-the-fly
- Compresión inteligente
- Conversión a WebP automática
Cómo Subir Imágenes
Paso 1: Acceder al Producto
- Ve a Panel de Administración → Productos
- Selecciona el producto al que quieres agregar imágenes
- Haz clic en "Editar" (ícono de lápiz)
⚠️ Nota: Solo puedes subir imágenes a productos que ya existen. Primero crea el producto y luego edítalo para agregar las fotos.
Paso 2: Seleccionar Imágenes
Zona de Upload:
📸 Arrastra imágenes aquí o haz clic para seleccionar
JPG, PNG, GIF, WebP • Máx 5MB por imagen
Puedes subir imágenes de dos formas:
- Drag & Drop: Arrastra archivos desde tu computadora directamente a la zona de upload
- Seleccionar archivos: Haz clic en la zona para abrir el explorador de archivos
Formatos y Límites
| Especificación | Valor |
|---|---|
| Formatos permitidos | JPG, PNG, GIF, WebP |
| Tamaño máximo | 5 MB por imagen |
| Resolución recomendada | 1200×1200 píxeles mínimo |
| Imágenes por producto | Según tu plan (3-5 o ilimitadas) |
Optimización Automática
Una vez que subes una imagen, Bunny CDN la optimiza automáticamente para diferentes dispositivos y contextos:
🎯 Bunny Optimizer: Las imágenes se transforman en tiempo real según los parámetros que se soliciten. No necesitas subir múltiples versiones.
Presets Predefinidos
SGG utiliza estos presets para mostrar las imágenes en diferentes contextos:
| Contexto | Dimensiones | Calidad | Uso |
|---|---|---|---|
| thumbnail | 200×200px | 80% | Listas, miniaturas |
| productCard | 400px ancho | 85% | Cards del catálogo |
| productDetail | 800px ancho | 90% | Vista detalle |
| hero | 1200px (16:9) | 90% | Banners, destacados |
| mobile | 600px ancho | 80% | Dispositivos móviles |
| avatar | 150×150px | 85% | Fotos de perfil, logos |
Parámetros de Optimización
Las URLs de Bunny aceptan parámetros para transformar imágenes en tiempo real:
// URL original https://tu-cdn.b-cdn.net/products/tenant123/pizza.jpg // Con optimización https://tu-cdn.b-cdn.net/products/tenant123/pizza.jpg?width=400&quality=85 // Parámetros disponibles: ?width=400 // Ancho en píxeles ?height=300 // Alto en píxeles ?aspect_ratio=4:3 // Relación de aspecto ?quality=85 // Calidad (1-100) ?crop_gravity=center // Punto de recorte (center, top, bottom, left, right)
Flujo Técnico
Proceso de Upload:
- 1Usuario selecciona archivo
El archivo se almacena temporalmente en memoria (Multer)
- 2Validación
Se verifica formato, tamaño y límites del plan
- 3Generar nombre único
timestamp-random-nombre-original.ext
- 4Upload a Bunny Storage
Se sube a la ruta: products/tenantId/filename
- 5Obtener URL pública
Se genera la URL del Pull Zone CDN
- 6Guardar en producto
La URL se agrega al array de imágenes del producto
Fallback a Almacenamiento Local
Si Bunny CDN no está disponible o no está configurado, SGG automáticamente usa almacenamiento local como fallback:
⚠️ Limitaciones del almacenamiento local:
- Las imágenes no se optimizan automáticamente
- No hay CDN global, solo se sirven desde el servidor
- Mayor latencia para usuarios lejanos
- Se recomienda solo para desarrollo/testing
Eliminar Imágenes
- Edita el producto con la imagen que quieres eliminar
- Pasa el mouse sobre la miniatura de la imagen
- Haz clic en el botón "×" (eliminar)
- Confirma la eliminación
❌ Importante: Cuando eliminas una imagen:
- Se elimina del producto en la base de datos
- Se elimina del Storage de Bunny CDN
- Esta acción es permanente y no se puede deshacer
Límites por Plan
| Plan | Imágenes por producto |
|---|---|
| Starter | 3 imágenes |
| Pro | 5 imágenes |
| Enterprise | Ilimitadas |
Mejores Prácticas
✅ Recomendado
- Usa resolución alta (1200×1200px mínimo)
- Prefiere formato JPG para fotos
- Comprime antes de subir (TinyPNG)
- Usa fondo blanco o limpio
- Buena iluminación natural
- Múltiples ángulos del producto
❌ Evitar
- Imágenes borrosas o pixeladas
- Archivos mayores a 5MB
- Fotos con mala iluminación
- Fondos desordenados
- Watermarks o logos invasivos
- Imágenes muy pequeñas (<500px)
¿Qué sigue?
Tutorial de imágenes →
Guía paso a paso para subir fotos de productos
Agregar productos →
Crea productos para poder agregarles imágenes
Solución de Problemas
Error "Archivo demasiado grande"
Tu imagen excede el límite de 5MB. Soluciones:
- Usa TinyPNG.com o Squoosh.app para comprimir
- Reduce la resolución a 1200×1200px
- Convierte de PNG a JPG (suele ser más liviano)
- Usa calidad 85% al exportar
Las imágenes no cargan
Posibles causas:
- Verifica tu conexión a internet
- Limpia la caché del navegador
- Bunny CDN puede tener una interrupción temporal
- Intenta acceder directamente a la URL de la imagen
Error "Límite de imágenes alcanzado"
Has alcanzado el límite de tu plan. Opciones:
- Elimina imágenes que ya no necesites
- Mejora tu plan para más imágenes por producto
- Prioriza las mejores fotos (calidad sobre cantidad)
Error "Servicio de almacenamiento no disponible"
Bunny CDN no está configurado o hay un problema de conexión. Esto significa:
- Las credenciales de Bunny no están configuradas en el servidor
- Hay un problema temporal con Bunny CDN
- Contacta al administrador del sistema
La imagen se ve pixelada
La imagen original es demasiado pequeña. Recomendaciones:
- Sube imágenes de al menos 1200×1200 píxeles
- Usa la imagen original, no una captura de pantalla
- Si es un logo, usa formato SVG o PNG de alta resolución