You can change the compression (output format and quality) of your image by using compression filters. You can concatenate the compression filters using transformation filters.
JPG filters
| Filter | Values | Description |
|---|---|---|
| qN | N in [0 .. 100] | JPG quality index. Specifies the compression level of JPG algorithm. The smaller the value of N the more your image will be compressed. |
| i1 | NA (activated by default) | Enables JPG interlacing. A degraded version of the image will load while the whole image is loading. |
| tjpg | NA | Force the compression to Jpeg |
By default, qN is set to q90 for new tokens. It can be changed in the Cloudimage admin console. This will compress and optimize your images without visible decline in quality.
Original image (JPG | PNG)
http://sample.li/woman_dress.jpg
| Filter value | File size |
|---|---|
| none | 330 KB |
/cdn/n/q70/sample.li/woman_dress.jpg
| Filter value | File size |
|---|---|
| q70 | 85 KB |
| q60 | 67 KB |
| q50 | 63 KB |
PNG filters
| Filter | Values | Description |
|---|---|---|
| png-lossy-[q] | q in [0 .. 100] | Enables PNG lossy compression with the specified quality factor. The smaller the value of q, the more your image will be compressed. Careful—the quality of the image will decrease as well. |
| png-lossless | N/A | Enables PNG lossless compression. This is the default value for all PNG transformations. |
| tpng | N/A | Force the compression to PNG |
PNG optimization is non-linear and you might not see linear decrease in the image size when reducing the value of q.
Original image (JPG | PNG)
/width/400/none/sample.li/frog.png
| Filter value | File size |
|---|---|
| none | 200 KB |
/width/400/png-lossy-20/sample.li/frog.png
| Filter value | File size |
|---|---|
| png-lossy-20 | 61 KB |
/width/400/png-lossless/sample.li/frog.png
| Filter value | File size |
|---|---|
| png-lossless | 200 KB |
WebP filters
WebP is an image format maintained by Google and supported in certain browsers (mainly Chrome, Opera and on Chrome Android) which provides more aggressive compression techniques as JPG without visible quality degradation. You can deliver your image in WebP by using following filter:
| Filter | Values | Description |
|---|---|---|
| webp-lossy-[q] | q in [0 .. 100] | Enables WebP lossy compression with the specified quality factor. The smaller the value of q, the more your image will be compressed. Careful—the quality of the image will decrease as well. |
| webp | N/A | Equals to webp-lossy-75. |
| twebp | N/A | Force the compression to WebP |
WebP can be enabled by default for all your images in the Cloudimage admin console. By default, q = 75.
If the user's browser does not support the WebP format (for example Firefox or Safari), Cloudimage will deliver JPG or PNG.
Origin image (JPG | PNG)
{#od_f6844ca9}
/width/1000/n/sample.li/bag.jpg
| Filter value | File size |
|---|---|
| none | JPG - 200 KB |
/width/1000/webp-lossy-50/sample.li/bag.jpg
| Filter value | File size |
|---|---|
| webp-lossy-50 | JPG - 27 KB |
/width/1000/twebp/sample.li/bag.jpg
| Filter value | File size |
|---|---|
| twebp | JPG - 45 KB |
Combine compression filters
In some cases, you will want to fine tune the compression of specific images, such as logos. You can totally combine PNG and WebP options to create filter patterns such as : webp-lossy-21.png-lossy-30. This will deliver WepP with quality 21 on WebP-compatible browsers, and lossy PNG with quality 30 to other browsers.
/height/50/webp-lossy-21.png-lossy-30/sample.li/logo-cloudimg-black.png
Combine compression and transformation filters
Finally, compression and transformation filters can be concatenated for more advanced outputs:
/width/500/fradius30.fgrey.webp-lossy-70/sample.li/flat2.jpg
