Image Optimization

Optimize images to reduce their weight in JPEG, PNG, GIF formats by:

of diminished quality;
to convert the file to WebP format;
resizing;
using progressive JPEG - gradual rendering of the image on loading.

If the image has not been optimized, the user will get the original version of the image, which is also stored in the cache.

Principle of operation

Images on the source are stored in their original form. When the source receives a request from a CDN server to download a JPEG, PNG, or GIF image, the image is converted to WebP format and placed in the cache of the CDN server that sent the request.

At the first image request, the CDN server may return the original version so as not to create delays. Next, the compressed image is loaded into the CDN server cache. The user will receive it with each new request.

To change the settings of individual images, URI-parameters are used, which are specified in the link to the image in the site code. The settings are applied immediately after saving the code.

Cost

Optimization is charged on a monthly basis according to the tariff plan. The tariff plan includes a package of 10,000 compression requests per month, which is used for all CDN resources of the account with optimization included. One image is processed per compression request.

The first payment under the tariff plan is deducted at the first activation of the option for any of the CDN resources of the account. The following payments are debited on the first day of each calendar month. If the package of requests under the tariff plan is exhausted, each request in excess of the package is charged separately according to the pay-as-you-go model.

Limits and restrictions

Some images cannot be converted to WebP format:

if the image weighs more than 2 MB. If you want to convert images larger than 2 MB, create a ticket;
if the user's browser does not support the WebP format.

Such images will be transmitted in their original form.

Customize image optimization

Enable optimization in the control panel.
If you want to configure individual processing parameters for individual images, configure the URI parameters on the site.
Check the compression operation.

1. Enable optimization in the control panel

In the Control Panel, on the top menu, click Products and select CDN.
In the CDN Resources section, open the resource page → Optimization tab.
In the Image Optimization box, check the Image Optimization checkbox.
Click Apply. The resource will be in PROCESSING status while the settings are being applied . You cannot apply any other settings at this time. The settings will be applied when the share changes to ACTIVE status.

2. Customize URI parameters on the site

Open the code of your website that has the images on it.
Insert the URI parameter into the image link in the code:
```
https://<domain>/ioss(<parameter>=<value>)/<image_path>
```
Specify:
- <domain> - default domain or personal domain;
- <parameter> - parameter to change the image. To see the possible parameters, see the table URI-parameters for image modification;
- <value> - value of the parameter to change the image. To see the possible values, see the table URI-parameters for image modification;
- <image_path> - image path.
If you need to add more than one parameter, list them using commas without a space. For example:
```
https://cdn.example.com/ioss(resize=300,quality=75)/image.png
```

URI parameters for image modification

Parameter Parameter Name Significance

Quality

Parameter	Parameter Name	Significance
Quality	`quality`	The value ranges from 1 to 100. The higher the value, the higher the quality. For example: `https://cdn.ex.com/ioss(quality=70)/pic.png`
Size	`resize`	The value in pixels is from 1 to 4000. You can change the size without loss of quality only downward. Possible variants of values: `<width>x<height>` - resize with fixed width and height. Test different values - customization can distort proportions. For example: `https://cdn.ex.com/ioss(resize=400x300)/pic.png` `<width>` - scaling by width while preserving proportions. For example: `https://cdn.ex.com/ioss(resize=400)/pic.png` `x<height>` - scaling by height while preserving proportions. For example: `https://cdn.ex.com/ioss(resize=x200)/pic.png`
Progressive JPEG	`progressive`	Gradual rendering of the image on loading. This option is available only for JPEG images. Possible values: `y` - enable the option; `n` - disable the option. For example: `https://cdn.ex.com/ioss(progressive=y)/pic.jpeg`

quality

The value ranges from 1 to 100. The higher the value, the higher the quality. For example:

https://cdn.ex.com/ioss(quality=70)/pic.png

Size

resize

The value in pixels is from 1 to 4000. You can change the size without loss of quality only downward. Possible variants of values:

<width>x<height> - resize with fixed width and height. Test different values - customization can distort proportions. For example:

https://cdn.ex.com/ioss(resize=400x300)/pic.png
<width> - scaling by width while preserving proportions. For example:

https://cdn.ex.com/ioss(resize=400)/pic.png
x<height> - scaling by height while preserving proportions. For example:

https://cdn.ex.com/ioss(resize=x200)/pic.png

Progressive JPEG

progressive

Gradual rendering of the image on loading. This option is available only for JPEG images. Possible values:

y - enable the option;
n - disable the option.

For example:

https://cdn.ex.com/ioss(progressive=y)/pic.jpeg

3. Check the operation of the optimization

Open your browser in incognito mode.
Open the page where you want the compressed images to be.
Open Developer Tools → Network tab.
In the Name block, click on the line with the image that should have been downloaded from the CDN cache.
On the Headers tab in the Response headers block, look for the Content-Type header - if it says image/webp next to it, it means the image has been converted.
If you have changed the size or quality of the image, compare the image with the original image.