Back to Templates
Marketing
Responsive Image Pipeline
Generate thumbnail, mobile, tablet, desktop, and retina sizes from one source
Claude Code Ready
Multi-step Pipeline
How It Works
6 steps in this workflow
- 1 Input image
- 2 Resize to 150px wide
- 3 Resize to 320px wide
- 4 Resize to 768px wide
- 5 Resize to 1024px wide
- 6 Resize to 2048px wide
Code Examples
Use this template programmatically with the FloImg SDK or CLI
// One source → all responsive sizes
const responsive = await floimg.from(source)
.transform('resize', { width: 320 }) // Mobile
.transform('resize', { width: 768 }) // Tablet
.transform('resize', { width: 1024 }) // Desktop
.transform('resize', { width: 2048 }) // Retina
.toBlob();# Responsive Image Pipeline
name: "Responsive Image Pipeline"
steps:
# See JavaScript example for full pipeline
- kind: transform
op: resize
params:
width: 800
out: result# Responsive Image Pipeline
# Run pipelines via YAML config:
floimg run workflow.yaml
