What is it?
Quality is a tool that changes images’ quality from 1 to 100%. The lower value is, the worse the image’s quality is. For example, if you set 30%, you’ll get a low-resolution image with rough pixels. As the percentage increases, so does the quality. If you set quality at 75%, it will be high enough, but the image’s sharpness and contrast will be reduced. And if you set it at 95%, the image will look like the original.
The final appearance of the image depends on its granularity and color scheme. So, if the image has a monolithic figure standing out against a contrasting background (e.g., a brown bird on a green background), the changes in quality will be more noticeable. If the image is detailed and non-contrasted, the changes will be less obvious.
How does it work?
To change image quality, you need to add the necessary query string to the image URL in your website source. This query string is described in the Use Quality section. When a user requests an image from the site, the CDN will change the image quality and deliver the modified image to the user.
For example, an origin server hosts a JPG image, and its original quality is 90%, but you set the Quality parameter to 50%. When the image gets to the CDN cache, our CDN automatically reduces its quality. So, the origin still has the high-resolution image, but end-users receive its middle-resolution version.
What is it used for?
Here are two examples of when this tool can be useful.
- Deliver images faster. Let’s say you own an online store. Each product has its own page with several high-resolution photos. Because of the high resolution, the files’ size is large, and images load slowly for customers. To avoid this, you can decrease the photos’ quality. This means their size will be reduced, and the files will be delivered faster.
- Prevent undesired usage. You own an image stock and sell pictures. You want users to be able to download only 10 images in good quality without charge. To do so, you can automatically track users’ visits and reduce the images’ quality after reaching the limit.
Quality is currently included in the paid WebP compression option. This option helps optimize images, such as by converting them to WebP format, cropping them, or changing their quality and size. To use Quality, you need to enable WebP compression.
1. Activate WebP compression for the CDN resource bound to the website where you want to change images’ quality. You can do this by following this guide: “Enable and configure WebP compression”.
Please note: the WebP compression option has settings called “Quality”, but they are not the same as the Quality tool. To use Quality, go to the next step.
2. Open the website source code.
3. Find strings with the URLs of the images whose quality you want to change.
4. Add the query strings to the URLs of the images as follows:
where the value is a number from 1 to 100.
Note: If the query string isn’t set (?quality=value is absent), the option will inherit the value from the WebP compression section (step 1).
5. Save the changes in the website source code. Images on the website will now be shown to the end-user with the quality that you set.
Let’s see how the photo of Charly, our business analyst’s pet, will change when we set different Quality values.
The original image before WebP compression.
Link: cdn.example.com/img.jpg or cdn.example.com/img.jpg?quality=80
The image with the default quality. You can see the value by following the guide in step 1.
Outwardly, there is no difference between the original and converted images. However, the converted image’s size is smaller because of WebP’s advanced compression algorithm.
The difference can be seen significantly. The converted image is low-resolution. The background (the flowers) is less sharp, and there are rough pixels (the left ear).
You can use the HTTP header value of the image to check if the changes have been applied. The X-Img-Operations header reflects all the conversions performed. If the value includes “convert”, the image size has changed.
If the HTTP header contains no convert value and CDN returns the image with original quality, check the Img-Skip-Reason HTTP header. It explains the reason why the operation could not be done. For example, the converted image bigger than origin value appears when the value that you set is higher than the original one. For example, you set the quality at 60%, but the original quality of the image was 55%.
Combine Quality with Crop and Resize
For example, we want to crop the segment 300×600 pixels from the center of the original image and reduce the quality to 50%. So, we add the following query string to the image’s URL:
This is the image users will receive when downloading the webpage: