Overview
MediaValet’s CDN Dynamic Asset Transformations (DAT) allow you to resize, optimize, and transform images dynamically at delivery time using CDN URLs.
Instead of creating and managing multiple asset renditions, you can use a single CDN link and apply transformation parameters directly to the URL. The CDN then delivers the optimized version of the asset when it is requested.
How Dynamic Asset Transformations Work
- Publish an image using a MediaValet CDN link
- Add transformation parameters (such as width or auto format) to the CDN URL
Watch our Demo
Adding Transformation Parameters to a CDN URL
- Transformation parameters can be added to the original CDN URL as needed.
This is done by adding a ? at the end of the CDN link URL and then the name of the parameter followed by an = and the value you are giving it. You can separate multiple parameters with &. Example structure :
https://cdn.mediavalet.com/your-asset-url?parameter=value
Or https://yourlibrary/1AkYH6ixqUaTcjEHIDqhrA/ZLeCvrtozUul2zVDrmVwPQ/Large/AdobeStock_208717161.jpeg?w=1200
where w is the parameter (width) and 1200 is the value (1200 pixels).
Current Available Image Transformations
Resize Images
Resize images by specifying width (w) and/or height (h).
- Aspect ratio is preserved automatically
- Maximum size is 2000px on the longest side
- If only one dimension is specified, the other is calculated automatically
- If both width and height are provided, the longest edge of the source image is maintained with original aspect ratio
Example parameters:
- w=500 - Sets width to 500 pixels
- h=80 - Sets height to 80 pixels
Auto-Optimized Image Format
Automatically delivers the most efficient image format for the end user’s browser, regardless of the native image format stored in MediaValet.
Parameter: f=auto
When enabled, the CDN may serve AVIF, WebP, or JPEG depending on the browser for example
Example combinations:
- f=auto - Automatic format optimization
- w=1200&f=auto - Resize to 1200px width with automatic format optimization
Using Dynamic Transformations with srcset
srcset is an HTML attribute used to display different image sizes for different devices, improving responsive design and performance.
MediaValet’s Dynamic Asset Transformations work seamlessly with srcset, allowing you to use a single master asset CDN link and apply different transformation parameters for each device breakpoint.
Example srcset implementation:
<img
src="https://cdn.mediavalet.com/your-asset-url?w=800&f=auto"
srcset="
https://cdn.mediavalet.com/your-asset-url?w=400&f=auto 400w,
https://cdn.mediavalet.com/your-asset-url?w=800&f=auto 800w,
https://cdn.mediavalet.com/your-asset-url?w=1200&f=auto 1200w
"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
>
This approach allows you to serve appropriately-sized images for mobile, tablet, and desktop devices using a single master asset, improving page load speed and user experience across all devices.
Limitations
- Maximum image size: The longest side is constrained to 2000 pixels
- Large file limitation: Very large images (over 70MB) are not transformed\
⚠️ Supported original formats for transformation:
jpg,jpeg,png,gif,webp,heicNote: Any image file that is supported in the DAM will work, but the formats above are the only ones you can select "Original" for when generating the CDN link. Otherwise, just make sure to select a supported format for the CDN link (e.g. JPEG, PNG, GIF) if the file in the DAM is a different image format.
Benefits
- Auto format optimization for the fastest performance gains
- Avoid creating multiple renditions in the DAM when dynamic resizing meets your needs
- Combine multiple parameters (e.g., w=1200&f=auto) for optimal results
- SEO Optimization: Serving optimally-sized images for each device improves page load speed, enhancing user experience and boosting search engine rankings.
Additional Information
Support: If you have questions about Dynamic Asset Transformations or need assistance with CDN configuration, please contact your Client Success Manager or MediaValet Support at support@mediavalet.com.