Each image URL uploaded to MageCDN is of the following format.
https://i.magecdn.com/:user-id/:image-uniq-id_:image-file-name
For example:
https://i.magecdn.com/d2b508/f1e63d_image
You can transform images using the following query parameters:
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.
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