Image & Media Management: S3 Storage with CDN Delivery
This article explains how we store, organize, and deliver product images efficiently.
The Problem: Managing Thousands of Images
We have:
-
Many product SKUs(5k+) with multiple images each
-
Component images(10k+) (chassis, boards, accessories)
-
Product videos for key products
-
Multiple formats (WebP for web, PNG for datasheets)
Storing images on the web server causes:
-
Disk space issues: Hundreds of GB of images
-
Slow delivery: Server bandwidth limits
-
No global CDN: Slow for international users
-
Backup complexity: Large file backups
The Solution: S3 + CloudFront
We use AWS S3 for storage and CloudFront for delivery:
-
S3: Scalable object storage with versioning
-
CloudFront: Global CDN for fast delivery
-
Image manifest: Central registry of image locations
-
WebP format: Significantly smaller(30-50%) than PNG/JPEG
Image Storage
Product images are stored in S3:
-
S3 bucket: Object storage for product media
-
Format: WebP for optimized images
-
Video: MP4 for product videos
-
Manifest: Central registry of image locations
Image Sourcing
Images are sourced from S3 using the image manifest:
- Image manifest: Central registry of image locations
- S3 bucket: Product images stored in object storage
- WebP format: Optimized images for fast loading
- Fallback: Placeholder images when real images unavailable
Image Caching
We cache images in memory:
-
Global cache: In-memory cache for image lookups
-
Keyed by part/SKU: Quick lookups by identifier
-
Cache invalidation: When stock is updated via hooks
Image Directory Structure
Images are organized by part identifiers:
-
Part images: Organized by part ID
-
SKU images: Chassis, Board, WiFi combinations
-
Video files: Stored alongside images
Image Processing
We process images for different use cases:
-
Full images: Product pages
-
Trimmed images: Datasheets (first image only)
-
Placeholder: Fallback when no images available
CloudFront Delivery
Images are delivered through CDN:
-
Edge caching: Edge locations worldwide
-
Reduced latency: Users get content from nearest edge
-
DDoS protection: Built-in protection
Summary
Image and media management provides:
-
S3 storage: Product images, datasheets, customer logos
-
WebP format: Optimized images for fast loading
-
Image manifest: Central registry of image locations
-
Caching: In-memory cache for performance
-
CloudFront delivery: Fast global delivery