On-the-fly image optimization is a powerful content delivery tool if you know what you’re doing. The good news is that it’s actually really simple! In this guide, we will explain how to apply on-the-fly transformations and provide a reference table of all available parameters.
What you see below is a real UniLink with all possible parameters crammed together, color coded for your convenience. You can copy and paste it your browser to play around with the image as you please. It may look scary but don’t fret! We’ll unpack everything step-by-step.
The "https://u.macula.link/” part is the address of the UniLink server. It’s the same for all UniLinks and YfySnKOPSWGpq59Tkyw6Aw-7 is the unique identifier of your file. By combining these two parts and adding / at the end, you get the UniLink page:
https://u.macula.link/YfySnKOPSWGpq59Tkyw6Aw-7/
All those bits following after are called query parameters. Each query parameter is simply a combination of a key and a value separated with the = sign. A key specifies what specific transformation do you want to apply (resize, compress, etc.) and the value sets how you want to apply it (width, compression strength, etc.).
The array of query parameters is always prepended by ?. It tells whoever is requesting the image that there will be some additional things we need to know about the image. When you have more than one query parameter, the subsequent ones are always separated by & , which means exactly what is says on the tin — “and”.
So for our example image, the height is 600 and the width is 600, and the format is JPEG, and the quality is 80, and so on…
For the description of what these parameters do, see Creating & saving transformations.
| Transformation | Parameter | Accepted values |
|---|---|---|
| Resize | w — width | |
| h — height | Number of pixels | |
| Fitting | fit | cover |
| contain | ||
| fill | ||
| inside | ||
| outside | ||
| Position | position | t — Top |
| r — Right | ||
| l — Left | ||
| b — Bottom | ||
| c — Center | ||
| rt — Right top | ||
| lt — Left top | ||
| rb — Right bottom | ||
| lb — Left bottom | ||
| Sharpening | sharpen | Nothing (just add sharpen to query parameters) |
| sigma_n^1 (substitute n with the number to specify sharpness strength) | ||
| Blurring | blur | A number between 0.3 and 1000 |
| Flipping | flip | None. If flip is present in query parameters, the flipping is applied. |
| Reduce | noReduce | true |
| false | ||
| Enlarge | noEnlarge | true |
| false | ||
| Lossless | lossless | 0 |
| 1 | ||
| Compress (quality) | q | A number between 0 and 100 |
| Reformat | format | auto |
| webp | ||
| jpeg | ||
| png | ||
| avif | ||
| Effort ^2 | effort | For webp: from 0 to 6 |
| For avif: from 0 to 9 |
^1 When a sigma is provided, performs a slower, more accurate sharpen of the L channel in the LAB color space. Additionally, you get separate control over the level of sharpening in "flat" and "jagged" areas is available, for example like this:
?sharpen=sigma_2&sharpen=m1_0&sharpen=m2_3&sharpen=x1_3&sharpen=y2_15&sharpen=y3_15
Read more about sigma sharpening here.