Responsive websites
A page may need several useful image widths so the website can choose an appropriate one for the current layout. Generate those variants from the same source instead of maintaining another manual export for every breakpoint.
Dynamic delivery & responsive media
Dynamic image resizing, URL transformations and reusable variants
A website rarely needs the original image at full size everywhere. The same product photo may appear as a small card image, a wider desktop visual and a larger detail view.
Media2URL URL transformations let you request another supported size or image output from the stored source instead of manually exporting a new file for every use. The transformation is described through the URL or a saved preset, while the original asset stays separate.
The workflow
How dynamic transformations work
Start with one stored image and decide what the next page actually needs. A thumbnail may only need a smaller width, while a card image may need a different crop as well.
The transformation tells Media2URL how that derived image should be prepared without requiring another manual upload.
1. Start from the source image
Keep the supported source image in your Media Library. That file remains the reference while other delivery sizes or formats are requested from it.
2. Describe the output
Add the supported width, height, fit, format or quality settings to the image request. Only use the parameters that the destination actually needs.
3. Generate the requested variant
Media2URL processes the supported transformation and returns the resulting image according to the current delivery and cache behaviour.
4. Reuse common settings
Save a repeated transformation as a named preset when the same crop, size or format is needed in several places. That keeps the image rules consistent without rebuilding the full parameter set each time.
Core principle
One source image can serve more than one layout
Without image transformations, the usual approach is to prepare separate files such as product-small.jpg, product-card.jpg and product-large.jpg. That works, but the number of files grows quickly when the same image appears in many layouts.
Dynamic transformation takes another approach. The source stays in the library, while the delivery request describes the version needed for that particular use. This is most useful when variations are predictable across repeated templates.
Operation differences
Resizing, cropping and fitting solve different problems
| Operation | What changes |
|---|---|
| Resize | Changes the output dimensions |
| Crop | Removes part of the visible image to fit another composition |
| Fit | Places the source inside requested dimensions according to the supported fit rule (cover, contain, inside, fill) |
| Format conversion | Changes the requested image output format (JPEG, PNG, WebP, AVIF) |
| Quality setting | Adjusts the supported compression level without deciding dimensions by itself |
A 400×400 request does not always mean the source should simply be stretched into a square. If the original is wide, you need to decide whether the full image should fit inside that space or whether part of it can be cropped.
Width and height should match the layout
A 1600-pixel source image can be unnecessary when the browser is displaying it inside a much smaller card. Requesting a more suitable output can reduce the amount of image data that needs to be delivered.
The correct size depends on the layout. A thumbnail, article image and large product view can all use the same source while requesting different dimensions.
Responsive images give browsers useful choices
A responsive layout changes with screen size. Dynamic variants make it easier to prepare several useful image widths from one source.
Your website can then reference those URLs in the responsive markup or component system it uses. Media2URL creates the variants; your website selects and renders them.
Choose the output format when another version is useful
Different image formats make different trade-offs. JPEG is useful for photography, PNG for lossless graphics or transparency, and WebP or AVIF for compressed web delivery.
If Media2URL exposes format conversion for the selected transformation, request the output that fits the destination. Do not convert every image simply because a newer format exists.
Lower quality can reduce file size, but test detail
Quality controls help reduce compressed payload size. The lowest number is not automatically the best choice.
Product text, screenshots and sharp edges can show compression damage more clearly than photographs. Test the result at the size where visitors will see it.
Presets help when the rule matters more than the file
A website may have hundreds of images but only a handful of repeating layouts. For example, every product card may need one size while every article hero needs another.
A named preset such as card or hero describes the transformation rule. The source image can change while the requested layout remains consistent.
Dynamic resizing should still have limits
URL-based transformations are flexible, but unrestricted parameters can invite unnecessary variant creation.
Media2URL allows setting maximum requested output dimensions and toggling transformation availability in your Security and Access settings.
Tool selection
URL transformation or Image Editor?
| Use URL Transformations when... | Use Image Editor when... |
|---|---|
| The source image is already correct | The source itself needs visual editing |
| You need another width or height | You need text, shapes or annotations |
| Several layouts need predictable variants | You need creative adjustments or filters |
| The same transformation repeats across many images | One image needs a custom manual edit |
| The variation belongs to delivery | The change should be saved as a version or new asset |
These workflows can also be combined. Edit the source once in the Image Editor when necessary, then use URL transformations for the repeated delivery sizes.
Target workflows
Where URL transformations are genuinely useful
Product catalogues
The same product image can appear as a small catalogue thumbnail and a larger product-detail visual. Use predictable variants for those repeated layouts while keeping the source image separate.
Articles and documentation
A featured image may need one wide layout for the article and another smaller version elsewhere on the site. Presets help when those dimensions repeat across many posts.
SaaS and application interfaces
Avatars, cards and previews often use the same few image shapes throughout an application. A saved transformation preset can keep those outputs consistent when many users or assets pass through the same UI.
Transformation boundaries
Before relying on a transformation URL
- Check which formats and operations are actually enabled. Transformation support can vary by source format, output and account.
- Do not request dimensions larger than the workflow needs. Larger output can mean more processing and more delivered data without giving the page a useful visual benefit.
- Transformation requests still use platform resources. Processing, cache behaviour and bandwidth remain subject to the controls and limits available for your account.
- Keep the source asset available. A transformation depends on the underlying image, so deleting or disabling the source can affect the derived delivery workflow.
Questions about this workflow
Frequently asked questions
They can help when the website uses them to avoid sending images much larger than the displayed layout needs. Smaller appropriate variants can reduce unnecessary image transfer. The final page performance still depends on the website's HTML, responsive-image setup, loading behaviour, caching and many other factors. Creating a resized URL by itself does not guarantee a Core Web Vitals improvement.
The source image remains the main asset in the Media2URL workflow, while transformed variants can follow the current processing and cache rules. Check your dashboard and plan details for how transformation processing, cache and storage usage are counted for your account rather than assuming every requested URL becomes another normal library asset.
Yes, where transformation restrictions are enabled for the asset. Media2URL can control whether image transformations are allowed and apply maximum requested width or height limits. These limits are useful when a website only needs a known range of image sizes and you do not want arbitrary transformation requests creating unnecessary variants.
Yes, where the current transformation controls include a blur option. A blurred variant can be used as a small placeholder while your website loads another image. The website still needs to implement the placeholder and replacement behaviour. Media2URL provides the image variant rather than automatically controlling how the page swaps one image for another.
It is a request for another supported version of a stored image using settings carried by the delivery URL or a named preset. The source remains the reference while the requested variant can use another size, crop, quality or format where supported.
Not when the operation is being used as a delivery transformation. The source image remains separate from the variant request. Use the Image Editor when the actual stored image should be changed or saved as another version.
A preset is a saved group of transformation settings. Instead of repeating the same width, crop, quality and format choices in every image request, you can reuse a named rule such as thumbnail or card.
Not automatically. The useful format depends on the type of image, destination and browser or application support you need. Use format conversion as one part of the delivery decision rather than assuming a newer format is always the best output.
Next steps
Explore related image and access tools
Image Editor
When the stored source itself needs visual editing.
Image to Link
When the image already has the correct size and needs a hosted URL.
Security and Access
For controlling transformation availability and dimension limits.
Media Library
For organising the source images used by transformations.