Each image URL uploaded to MageCDN is of the following format.
For example: https://i.magecdn.com/d2b508/f1e63d_image
You can transform images by using query parameters. Current ones supported:
The f param is used to define format of the output image: whether it should be webp, avif? What should be the quality? It can use the following variables
| Parameter | Description | Value |
|---|---|---|
| format | Output format | webp/gif/png/avif/jpeg |
| quality (q) | Image quality (ignored for PNG) . | 1-100 |
| progressive (p) | Use progressive mode to encode image? (ignored for GIF) | t/f |
| loseless mode (l) | Use loseless mode to encode image? (only supported for WebP) | t/f |
Example: https://i.magecdn.com/d2b508/f1e63d_image?f=webp,q.90,p.f,l.f
This URL will render image in webp format at 90% quality, with both loseless and progressive mode turned off.
Using ?f=o will serve the original image unmodified.
If f is not given, MageCDN will automatically use the most optimized format.
The sz param can be used to resize image. This can be done in three ways.
Resizes image by specifying percentage.
Example: 1e63d_image?sz=95p will resize image to 95% of the original image.
Resizes image by specifying width.
Example: f1e63d_image?sz=512w will resize image to 512px width, while preserving aspect ratio.
Resizes image by specifying width and height.
Example: f1e63d_image?sz=1024,512 will resize image to 1024px width and 512px height.
The cp param crops the image. This crop area is specified in the format: x,y,w,h, where (x, y) are starting points and (w, h) are the dimensions of the crop rectangle.
Example: f1e63d_image?cp=0,0,100,100 will create a crop area of 512 x 512px starting on (0, 0) position