Image optimization

Image optimization allows you to reduce the size of JPEG, PNG, GIF. Optimization can be achieved by:

quality reduction;
file conversion to WebP;
resizing;
using progressive JPEG — gradual image rendering during loading.

If an image has not been optimized, the user will receive the original version, which is also saved to the cache.

How it works

Images are stored on the source in their original form. When a request to load a JPEG, PNG, GIF image is sent from a CDN server to the source, the image is converted to WebP and cached on the CDN server that sent the request.

To compress, resize, and apply progressive JPEG for individual images, use the URI parameters specified in the image link in your site's code. Settings take effect immediately after saving the code.

Upon the first image request, the CDN server may return the original version to avoid delays. Subsequently, the compressed image is loaded into the CDN server cache. The user will receive this version with every new request.

Pricing

Optimization is billed monthly according to the subscription plan. The subscription plan includes a package of 10 000 compression requests per month, which applies to all CDN resources on the account where optimization is enabled. One image is processed per compression request.

The first payment for the subscription plan is charged when the option is enabled for any of the account's CDN resources. Subsequent payments are charged on the first day of each calendar month. If the request package under the subscription plan is exhausted, each additional request is billed separately according to the pay-as-you-go. model.

You can view prices on selectel.ru.

Limits and restrictions

Some images cannot be converted to WebP:

if the image is larger 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 delivered in their original form.

Configuring image optimization

Enable optimization in the control panel.
If you want to configure custom processing parameters for specific images, configure URI parameters on your site.
Verify that compression is working.

1. Enable optimization in the control panel

In the control panel, go to the top menu, click Products, and select CDN.
In the CDN Resources section, open the CDN resource page → Optimization tab.
In the Image Optimization block, select the Image optimization checkbox.
Click Apply. While settings are being applied, the CDN resource enters the PROCESSING status. You cannot apply other settings at this time. Settings take effect when the CDN resource transitions to the ACTIVE.

2. Optional: configure URI parameters on the site

Open the source code of your site where the images are hosted.
Add a URI parameter to the image link in the code:
```
https://<domain>/ioss(<parameter>=<value>)/<image_path>
```
Specify:
- <domain> — default domain or personal domain;
- <parameter> — parameter to modify the image. You can see the available parameters in the URI parameters for image modification table;
- <value> — value of the image modification parameter. You can see the available values in the URI parameters for image modification table;
- <image_path> — path to the image.
If you need to add multiple parameters, separate them with a comma without spaces. For example:
```
https://cdn.example.com/ioss(resize=300,quality=75)/image.png
```

URI parameters for image modification

Parameter Parameter name Value

Quality

Parameter	Parameter name	Value
Quality	`quality`	Value from 1 to 100. Higher values yield higher quality. For example: `https://cdn.ex.com/ioss(quality=70)/pic.png`
Size	`resize`	Pixel value from 1 to 4000. You can only resize without quality loss if you reduce the size. Possible values: `<width>x<height>` — resize with fixed width and height. Test different values, as this setting may distort proportions. For example: `https://cdn.ex.com/ioss(resize=400x300)/pic.png` `<width>` — scale by width while maintaining aspect ratio. For example: `https://cdn.ex.com/ioss(resize=400)/pic.png` `x<height>` — scale by height while maintaining aspect ratio. For example: `https://cdn.ex.com/ioss(resize=x200)/pic.png`
Progressive JPEG	`progressive`	Gradual loading with quality enhancement. This parameter is only available 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

Value from 1 to 100. Higher values yield higher quality. For example:

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

Size

resize

Pixel value from 1 to 4000. You can only resize without quality loss if you reduce the size. Possible values:

<width>x<height> — resize with fixed width and height. Test different values, as this setting may distort proportions. For example:

https://cdn.ex.com/ioss(resize=400x300)/pic.png
<width> — scale by width while maintaining aspect ratio. For example:

https://cdn.ex.com/ioss(resize=400)/pic.png
x<height> — scale by height while maintaining aspect ratio. For example:

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

Progressive JPEG

progressive

Gradual loading with quality enhancement. This parameter is only available 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. Verify optimization

Open your browser in incognito mode.
Open the page containing the images that should be compressed.
Open developer tools → Network tab.
In the Name block, click the line for the image that should have been loaded from the CDN cache.
On the Headers tab, in the Response headers block, find the Content-Type header — if image/webp is specified, the image was converted.
If you changed the size or quality of the image, compare the image with the original.