Gestión de Imágenes y Medios: Almacenamiento S3 con Entrega CDN

Este artículo explica cómo almacenamos, organizamos y entregamos las imágenes de productos de manera eficiente.

El Problema: Gestionar Miles de Imágenes

Tenemos:

  • Muchos SKU de productos (5k+) con múltiples imágenes cada uno

  • Imágenes de componentes (10k+) (chasis, placas, accesorios)

  • Videos de productos para productos clave

  • Múltiples formatos (WebP para web, PNG para hojas de datos)

Almacenar imágenes en el servidor web causa:

  • Problemas de espacio en disco: Cientos de GB de imágenes

  • Entrega lenta: Límites de ancho de banda del servidor

  • Sin CDN global: Lento para usuarios internacionales

  • Complejidad de copias de seguridad: Copias de seguridad de archivos grandes

La Solución: S3 + CloudFront

Usamos AWS S3 para almacenamiento y CloudFront para la entrega:

  • S3: Almacenamiento de objetos escalable con versionado

  • CloudFront: CDN global para entrega rápida

  • Manifiesto de imágenes: Registro central de ubicaciones de imágenes

  • Formato WebP: Significativamente más pequeño (30-50%) que PNG/JPEG

Almacenamiento de Imágenes

Las imágenes de productos se almacenan en S3:

  • Bucket S3: Almacenamiento de objetos para medios de productos

  • Formato: WebP para imágenes optimizadas

  • Video: MP4 para videos de productos

  • Manifiesto: Registro central de ubicaciones de imágenes

Obtención de Imágenes

Las imágenes se obtienen desde S3 usando el manifiesto de imágenes:

  1. Manifiesto de imágenes: Registro central de ubicaciones de imágenes
  2. Bucket S3: Imágenes de productos almacenadas en almacenamiento de objetos
  3. Formato WebP: Imágenes optimizadas para carga rápida
  4. Alternativa: Imágenes de marcador de posición cuando las imágenes reales no están disponibles

Almacenamiento en Caché de Imágenes

Almacenamos en caché las imágenes en memoria:

  • Caché global: Caché en memoria para búsquedas de imágenes

  • Clave por pieza/SKU: Búsquedas rápidas por identificador

  • Invalidación de caché: Cuando el stock se actualiza mediante hooks

Estructura del Directorio de Imágenes

Las imágenes se organizan por identificadores de pieza:

  • Imágenes de pieza: Organizadas por ID de pieza

  • Imágenes de SKU: Combinaciones de Chasis, Placa, WiFi

  • Archivos de video: Almacenados junto a las imágenes

Procesamiento de Imágenes

Procesamos imágenes para diferentes casos de uso:

  • Imágenes completas: Páginas de producto

  • Imágenes recortadas: Hojas de datos (solo la primera imagen)

  • Marcador de posición: Alternativa cuando no hay imágenes disponibles

Entrega con CloudFront

Las imágenes se entregan a través de la CDN:

  • Caché en el edge: Ubicaciones de edge en todo el mundo

  • Latencia reducida: Los usuarios obtienen contenido desde el edge más cercano

  • Protección DDoS: Protección incorporada

Resumen

La gestión de imágenes y medios proporciona: