This site uses cookies for analytics. By continuing to browse this site, you agree to this use.
A JS Foundation Project

Image optimization with Cloudinary

Image optimization with Cloudinary (@sonarwhal/rule-image-optimization-cloudinary)

image-optimization-cloudinary uses the Cloudinary service to analyze your images and see if there could be size savings on them.

Note: To use this rule you will need to have an account in this service and configure it to use those credentials via the CLOUDINARY_URL environment variable or in the rule’s configuration. You can create a free account here.

Why is this important?

As of September 15th 2017, and based on HTTP Archive, images account for a bit over 53% of the size of a website in average, or 1,810kB.

"Average Bytes per Page by Content Type"

By having your images optimized, you will help your users have a better and faster experience when navigating in your website.

What does the rule check?

This rule will use Cloudinary’s infrastructure to upload any images found and check if they can be optimized maintaining the same resolution and format.

Can the rule be configured?

Yes, if you don’t want to use the CLOUDINARY_URL environment variable to set up your credentials, you can pass them to the rule via the rule configuration from the .sonarwhalrc file:

{
"connector": {...},
"formatters": [...],
"rules": {
"image-optimization-cloudinary": ["error", {
"apiKey": "your api key",
"apiSecret": "your api secret",
"cloudName": "your cloud name"
}],
...
},
...
}

By default, this rule will notify you even if there is a 1kB savings. If you want to change the threshold you can do it by having something as the following in the .sonarwhalrc file:

{
"connector": {...},
"formatters": [...],
"rules": {
"image-optimization-cloudinary": ["error", {
"threshold": 10
}],
...
},
...
}

The threshold value will be used for the savings per image, and the total possible savings.

Examples that trigger the rule

  • Having an image that Cloudinary can optimize further.
  • Having a threshold configured and an image whose savings is equal or greater than the configured value.
  • Having a threshold configured and several images whose individual savings is less than threshold but when combined it’s greater. For example, if you configure a threshold of 10, and you have one image that could be 6kB smaller, and another one that could be 5kB smaller, this rule will report an issue because the combined savings is greater than 10.

Examples that pass the rule

  • Having all your images optimized.
  • Having a threshold configured and the combined savings of all images smaller to that value.

How to use this rule?

To use it you will have to install it via npm:

npm install @sonarwhal/rule-image-optimization-cloudinary

Note: You can make npm install it as a devDependency using the --save-dev parameter, or to install it globally, you can use the -g parameter. For other options see npm's documentation.

And then activate it via the .sonarwhalrc configuration file:

{
"connector": {...},
"formatters": [...],
"parsers": [...],
"rules": {
"image-optimization-cloudinary": "error"
},
...
}

Further Reading