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/o |
| 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 select the most optimized format. See Optimization Defaults for details.
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, while preserving aspect ratio.
Example: f1e63d_image?sz=512w will resize image to 512px width.
Resizes image by specifying both 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
If output format (f) is not specified, MageCDN automatically selects the most optimized settings to serve the image.
| Input File | Default Settings |
|---|---|
| PNG, JPEG | AVIF, quality=60 |
| WebP, GIF | WebP, quality=80 |
| SVG | Serves original file |
AVIF is the default format because it delivers excellent compression with virtually no visible quality loss. It’s so efficient that even at 20% quality, images remain surprisingly good compared to JPEG at similar settings.
Considering that it’s supported by all major browsers and OSes, there’s a little reason to not use it.