Image Processing
Sharp (Node.js — recommended)
import sharp from 'sharp';
// Resize and convert
async function processUpload(input: Buffer, filename: string) {
const variants = await Promise.all([
sharp(input).resize(1200, 1200, { fit: 'inside', withoutEnlargement: true })
.webp({ quality: 80 }).toBuffer(),
sharp(input).resize(400, 400, { fit: 'cover' })
.webp({ quality: 75 }).toBuffer(),
sharp(input).resize(100, 100, { fit: 'cover' })
.webp({ quality: 70 }).toBuffer(),
]);
return {
original: { buffer: variants[0], key: `images/${filename}.webp` },
medium: { buffer: variants[1], key: `images/${filename}-400.webp` },
thumb: { buffer: variants[2], key: `images/${filename}-100.webp` },
};
}
Express Upload Pipeline
import multer from 'multer';
const upload = multer({ limits: { fileSize: 10 * 1024 * 1024 } }); // 10MB
app.post('/api/images', upload.single('image'), async (req, res) => {
// Validate image type
const metadata = await sharp(req.file!.buffer).metadata();
if (!['jpeg', 'png', 'webp'].includes(metadata.format!)) {
return res.status(400).json({ error: 'Invalid image format' });
}
const variants = await processUpload(req.file!.buffer, uuid());
// Upload to S3
await Promise.all(Object.values(variants).map((v) =>
s3.putObject({ Bucket: BUCKET, Key: v.key, Body: v.buffer, ContentType: 'image/webp' })
));
res.json({ url: `${CDN_URL}/${variants.original.key}` });
});
Cloudinary (managed service)
import { v2 as cloudinary } from 'cloudinary';
cloudinary.config({
cloud_name: process.env.CLOUDINARY_CLOUD,
api_key: process.env.CLOUDINARY_KEY,
api_secret: process.env.CLOUDINARY_SECRET,
});
// Upload with auto-optimization
const result = await cloudinary.uploader.upload(filePath, {
folder: 'products',
transformation: [
{ width: 1200, height: 1200, crop: 'limit' },
{ quality: 'auto', fetch_format: 'auto' },
],
});
// URL-based transformations
const thumbUrl = cloudinary.url(result.public_id, {
width: 200, height: 200, crop: 'fill', gravity: 'face',
quality: 'auto', format: 'webp',
});
Python (Pillow)
from PIL import Image
from io import BytesIO
def process_image(data: bytes, max_size: int = 1200) -> bytes:
img = Image.open(BytesIO(data))
img.thumbnail((max_size, max_size), Image.Resampling.LANCZOS)
if img.mode in ('RGBA', 'P'):
img = img.convert('RGB')
output = BytesIO()
img.save(output, format='WEBP', quality=80)
return output.getvalue()
Responsive Images (HTML)
<picture>
<source srcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w, /images/hero-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
type="image/webp" />
<img src="/images/hero-800.jpg" alt="Hero image" loading="lazy" decoding="async" />
</picture>
Anti-Patterns
| Anti-Pattern | Fix |
|---|
| Processing in request handler | Process in background job queue |
| Storing only original size | Generate multiple sizes on upload |
| No format conversion | Convert to WebP/AVIF for smaller size |
| No file size validation | Validate before processing |
| Serving images from app server | Use CDN or cloud storage |
Production Checklist
- Image processing in background queue
- Multiple sizes generated (thumb, medium, full)
- WebP/AVIF conversion for modern browsers
- CDN for serving images
- File type and size validation
- Metadata stripping for privacy
