Image Optimizer Service

High-performance image optimization using Next.js and AWS S3

Demo: New Bucket/Filename Format

Try these URLs:

Format: /images/[route]/[filename]?w=[width]&q=[quality]

Available Routes:

  • /images/games → monkeytilt-imgix bucket
  • /images/fe-dev → mt-cms-frontoffice-dev bucket
  • /images/fe → mt-cms-frontoffice-prod bucket
Games: /images/games/web-assets/images/Placeholder.webp?w=800&q=75
FE Dev: /images/fe-dev/sample-image.jpg?w=1200&h=300&q=80
FE Prod: /images/fe/banner.jpg?w=800&q=75&f=avif
Nested Path: /images/games/folder/nested-image.png?w=600&q=85&f=webp

Legacy Demo: Optimize S3 Images

Optimized Image (Next.js)

Optimized S3 Image

Optimized URL: /img/?url=https%3A%2F%2Fyour-bucket.s3.amazonaws.com%2Fsample-image.jpg&w=800&q=75

Original S3 URL

Original S3 Image

Original URL: https://your-bucket.s3.amazonaws.com/sample-image.jpg

API Usage

Using the Image Component

import Image from 'next/image';

<Image
  src="your-image.jpg"  // Just the filename!
  alt="Description"
  width={800}
  height={600}
  quality={75}
/>

Direct URL Generation

import { generateOptimizedImageUrl } from '../lib/s3-image-loader';

const optimizedUrl = generateOptimizedImageUrl('image.jpg', {
  width: 800,
  quality: 75
});

Hardcoded Routes API Usage

Direct S3 access with Sharp optimization using secure route mapping:

GET /images/games/web-assets/logo.png?w=1920&q=50
GET /images/fe-dev/hero-banner.jpg?w=800&h=600&q=75&f=webp  
GET /images/fe/product-image.jpg?w=1200&f=avif

Route Mappings:
- /images/games    → monkeytilt-imgix bucket
- /images/fe-dev   → mt-cms-frontoffice-dev bucket
- /images/fe       → mt-cms-frontoffice-prod bucket

Parameters:
- w=800     (required) Width in pixels
- h=600     (optional) Height in pixels
- q=75      (optional) Quality 1-100, default: 75
- f=webp    (optional) Format: webp, avif, jpeg, png

Response: Optimized image (auto-detects best format)

Legacy API Usage

Original format still supported:

GET /img/?url=https%3A//your-bucket.s3.amazonaws.com/image.jpg&w=800&q=75

Response: Optimized image (WebP format when supported)

Features

  • 🚀 Direct S3 SDK - No HTTP overhead, secure access
  • ⚡ Sharp Optimization - Lightning-fast image processing
  • 🔄 Auto Format Detection - AVIF, WebP, JPEG based on Accept header
  • 📏 Smart Resizing - Width/height with aspect ratio preservation
  • 💾 Aggressive Caching - 1 year TTL with immutable headers
  • 🔐 Secure Access - IAM roles, no public S3 buckets required
  • 📊 Debug Headers - Size reduction, format info, optimization stats
  • 🌐 CDN Ready - Perfect for CloudFront/CDN caching
  • 🔧 Multiple Formats - WebP, AVIF, JPEG, PNG support
  • 📁 Nested Paths - Support for folder structures in S3