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

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


Compressed image - no resizing

/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

alt text


png-lossy-20

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

Filter value File size
png-lossy-20 61 KB

alt text


png-lossless

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

Filter value File size
png-lossless 200 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:

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)

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

Filter value File size
none JPG - 200 KB

alt text


webp-lossy-50

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

Filter value File size
webp-lossy-50 JPG - 27 KB

alt text


twebp

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

Filter value File size
twebp JPG - 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