Modern web applications demand flexibility. A single product image needs to display correctly on a 4K desktop monitor, load quickly on mobile over 3G, and fit within hundreds of different layout contexts across multiple platforms. Traditional approaches pre-generate dozens of image variations at upload time. This creates storage overhead, slower uploads, and inflexibility when requirements change.
Dynamic image transformation offers a different approach: store the original once, and transform it programmatically when requested.
What Are Dynamic Image Transformations?
Dynamic image transformations generate variations of an image on-demand through URL parameters, rather than storing multiple pre-generated versions.
FileSpin provides two approaches to image transformations:
Static Image Conversions are generated automatically at upload time based on your account settings. These pre-generated versions are stored and ready to serve immediately.
On-demand transformations generate image variations when requested via URL parameters. This allows you to request dimensions and transformations not pre-generated at upload.
The key difference: static conversions are prepared in advance, while on-demand transformations provide flexibility to request any variation you need.
How It Works
FileSpin's transformation API uses URL parameters to specify how images should be transformed:
GET https://cdn.filespin.io/api/v1/assets/{ASSET_ID}/conversions?resize=800,600
This request retrieves the specified asset and transforms it to 800x600 pixels. The transformation is applied based on the parameters in the URL.
Authentication Options
FileSpin supports three authentication methods depending on your use case:
Server-side applications can use API key authentication by passing the X-FileSpin-Api-Key header with requests.
Client-side applications can use JWT authentication by passing an Authorization: Bearer {JWT} header.
Public-facing assets can use unsigned public URLs or signed URLs for added security which include an expiration timestamp and HMAC-SHA1 signature, allowing secure access without exposing API keys.
Use Cases
Responsive Web Design
Modern websites serve different image sizes to different devices and screen resolutions. With dynamic transformations, you can request exactly the dimensions needed for each context:
<img
src="https://cdn.filespin.io/api/v1/assets/{ASSET_ID}/conversions?resize=400,400"
srcset="
https://cdn.filespin.io/api/v1/assets/{ASSET_ID}/conversions?resize=400,400 400w,
https://cdn.filespin.io/api/v1/assets/{ASSET_ID}/conversions?resize=800,800 800w,
https://cdn.filespin.io/api/v1/assets/{ASSET_ID}/conversions?resize=1200,1200 1200w
"
/>
The browser selects the appropriate size based on viewport and screen density. Each size is generated and delivered through the API without pre-storing multiple versions.
Testing and Iteration
Design requirements change. Marketing teams test different image dimensions. Product layouts evolve.
With dynamic transformations, you can test new dimensions immediately:
// Original design
?resize=1200,600
// Test variation
?resize=1200,800
No need to regenerate and re-upload static files. Changes to transformation parameters take effect immediately across all images.
User-Generated Content
Platforms with user uploads face unpredictable transformation requirements. You can't know in advance which sizes users will need. Dynamic transformations adapt to actual usage patterns. Generate thumbnails for grid views, preview sizes for lightboxes, and download versions—all from a single stored original.
E-Commerce at Scale
E-commerce catalogs contain thousands of product images that need to appear in multiple contexts: category grids, product pages, zoom views, shopping carts, mobile apps, and email templates. Pre-generating every possible size for every product creates massive storage overhead. Dynamic transformations let you request exactly what each context needs without maintaining dozens of static variations per product.
Integration Pattern
Dynamic transformations follow an API-first pattern where transformation logic lives in the infrastructure layer, not your application code.
Your application constructs URLs with the parameters describing needed transformations. FileSpin's infrastructure handles:
This separation means frontend developers can specify exactly what they need without understanding image processing libraries or CDN configuration.
Why This Approach Matters
Storage Efficiency: Store one original file instead of dozens of pre-generated variations. For platforms managing millions of images, this significantly reduces storage costs.
Deployment Flexibility: Design changes don't require regenerating and re-uploading static files. New transformation parameters work immediately against existing images.
Developer Experience: Frontend teams can request exactly what layouts need through URL parameters. No coordination required with backend teams to generate specific sizes.
Adaptability: Support new devices, screen sizes, and use cases without re-processing your entire image library.
Dynamic transformations shift complexity from your application to infrastructure designed for media processing at scale. You focus on building features. The API handles transformations, delivery, and optimization. For applications serving images across multiple contexts, devices, and platforms, this architectural pattern provides the flexibility and efficiency modern web applications require.
Related Resources: