- Getting Started
- AMP HTML Validator
- Accessibility assessment with aXe
- Avoid HTTP redirects in requests
- Avoid exceeding CSS stylesheet limits
- Babel configuration is valid
- Babel configuration rules set
- Check `devtool` property in webpack configuration
- Check for broken links
- Check if the TypeScript target is appropiated
- Check if webpack configuration file exists
- Check if webpack is installed
- Disallow `P3P` headers
- Disallow certain HTTP headers
- Disallow non-standard file extension for the web app manifest file
- Disallow protocol-relative URLs
- Disallow small error pages
- Disallow unneeded HTTP headers for non-HTML resources
- Enable consistent casing in TypeScript configuration
- Enable import helpers in TypeScript configuration
- Enable remove comments in TypeScript configuration
- Enable strict option in TypeScript configuration
- HTTP Cache
- Image optimization with Cloudinary
- No vulnerable libraries
- Nu HTML Test
- Performance budget
- Require `Content-Type` HTTP response header with appropriate value
- Require `Strict-Transport-Security` response header
- Require `X-Content-Type-Options` HTTP response header
- Require a 'theme-color' meta tag with a valid value
- Require a web app manifest file
- Require an apple touch icon
- Require charset meta tag with the value of `utf-8`
- Require external links to disown opener
- Require highest available document mode
- Require https for you site and assets
- Require manifest to specify the web site/app name
- Require resources to be served compressed
- Require scripts and styles to use subresource integrity
- Require valid manifest
- Require viewport meta tag with proper value
- SSL Server Test
- TypeScript configuration is valid
- TypeScript configuration rules set
- Validate `Set-Cookie` Header
- Validate `module` property in TypeScript has the appropiate value for webpack
- Validate `modules` property in Babel has the appropiate value for webpack
- Warn if the byte-order mark
- webpack configuration is valid
- webpack configuration rules set
- Further configuration
image-optimization-cloudinary uses the Cloudinary
service to analyze your images and see if there could be size savings
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.
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.
By having your images optimized, you will help your users have a better and faster experience when navigating in your website.
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.
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
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
threshold value will be used for the savings per image, and the
total possible savings.
- Having an image that Cloudinary can optimize further.
- Having a
thresholdconfigured and an image whose savings is equal or greater than the configured value.
- Having a
thresholdconfigured and several images whose individual savings is less than
thresholdbut when combined it’s greater. For example, if you configure a
thresholdof 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.
- Having all your images optimized.
- Having a
thresholdconfigured and the combined savings of all images smaller to that value.
To use it you will have to install it via
npm install @sonarwhal/rule-image-optimization-cloudinary
Note: You can make
npm install it as a
devDependency using the
parameter, or to install it globally, you can use the
-g parameter. For
other options see
And then activate it via the