Compression filters

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

FilterValuesDescription
qNN 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.
i1NA (activated by default)Enables JPG interlacing. A degraded version of the image will load while the whole image is loading.
tjpgNAForce 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 valueFile size
none330 KB


Compressed image - no resizing

/cdn/n/q70/sample.li/woman_dress.jpg

Filter valueFile size
q7085 KB
q6067 KB
q5063 KB


PNG filters

FilterValuesDescription
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-losslessN/AEnables PNG lossless compression. This is the default value for all PNG transformations.
tpngN/AForce 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 valueFile size
none200 KB

alt text


png-lossy-20

/width/400/png-lossy-20/sample.li/frog.png

Filter valueFile size
png-lossy-2061 KB

alt text


png-lossless

/width/400/png-lossless/sample.li/frog.png

Filter valueFile size
png-lossless200 KB

alt text


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:

FilterValuesDescription
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.
webpN/AEquals to webp-lossy-75.
twebpN/AForce 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)

/width/1000/n/sample.li/bag.jpg

Filter valueFile size
noneJPG - 200 KB

alt text


webp-lossy-50

/width/1000/webp-lossy-50/sample.li/bag.jpg

Filter valueFile size
webp-lossy-50JPG - 27 KB

alt text


twebp

/width/1000/twebp/sample.li/bag.jpg

Filter valueFile size
twebpJPG - 45 KB

alt text


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