Cloudinary automatically optimizes generated JPG and PNG images to reduce size (http://support.cloudinary.com/entries/23493267-Does-Cloudinary-optimize-or-smush-images-)
When uploading an image to Cloudinary, it is stored as is in your account.
Here's an uploaded image:
http://res.cloudinary.com/demo/image/upload/couple.jpg
The original file's size is ~200KB, therefore clicking its link (http://res.cloudinary.com/demo/image/upload/couple.jpg) will deliver the original as is.
However, Optimization is auto performed by Cloudinary with any transformation.
For example, the following same dimension (100%) transformation creates an optimized ~40KB JPG of the same image instead of ~200KB:
http://res.cloudinary.com/demo/image/upload/w_1.0/couple.jpg
If you choose to, you can apply an incoming transformation for optimizing before storing in the cloud (e.g., using a_exif to automatically rotate the image according to its EXIF data).
Comments
4 comments
I did a test. The original image file is 1.7MB, however, after cloudinary transform it become 1.8MB. How come it become larger?
I noticed also the output image of cloudinary can be further optimized up to 70% by website like tinypng.
TinyPNG converts the PNGs to 'PNG8'. Cloudinary also supports 'PNG8' instead of the default 'PNG24' format.
This is done by setting the
flagsparameter topng8(fl_png8in URLs).The following produces a 363KB image:
http://res.cloudinary.com/demo/image/fetch/w_1.0,fl_png8/v1414663063/http://img1.wikia.nocookie.net/__cb20120718024112/fantendo/images/6/6e/Small-mario.png
How will we know the image is optimized after clicking the given url, it is still the same file size
Hi Joel,
The images can be optimized by using transformation parameters as described in this documentation. For example, the original image can be accessed through the following delivery URL:
https://res.cloudinary.com/demo/image/sample.jpg
Depending on the transformation you apply, the derived delivery URL will contain the transformation parameters. For example, the original image's dimension can be altered to 250x250px and the following transformed delivery URL should be referenced on your web page HTML <img> tag:
https://res.cloudinary.com/demo/image/upload/w_250,h_250/sample.jpg
Kindly see this link for some additional information.
Hope this helps.
Please sign in to leave a comment.