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.

URI parameters are used to compress, resize, and apply progressive JPEG to individual images; these parameters are specified in the image link in the site code. Settings are applied as soon as the code is saved.

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 resource page → tab Optimization.
Ensure that in the Optimization type block, Static **** is selected.
In the Image optimization block, check the Image optimization **** checkbox.
Click Apply. While settings are being applied, the CDN resource status will be PROCESSING. You cannot apply other settings during this time. Settings will take effect when the CDN resource transitions to the ACTIVE`` status.

2. Optional: configure URI parameters on your website

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

URI image modification parameters

Parameter Parameter name Value

Quality

Parameter	Parameter name	Value
Quality	`quality`	A value from 1 to 100. Higher values indicate higher quality. For example: `https://cdn.ex.com/ioss(quality=70)/pic.png`
Size	`resize`	A value in pixels from 1 to 4000. You can only downscale images without loss of quality. Available options: `<width>x<height>` — resize using fixed width and height. Test different values, as this setting may distort aspect ratios. For example: `https://cdn.ex.com/ioss(resize=400x300)/pic.png` `<width>` — scale by width while maintaining the aspect ratio. For example: `https://cdn.ex.com/ioss(resize=400)/pic.png` `x<height>` — scale by height while maintaining the aspect ratio. For example: `https://cdn.ex.com/ioss(resize=x200)/pic.png`
Progressive JPEG	`progressive`	Gradual loading with progressive quality improvement. This parameter is only available for JPEG images. Available values: `y` — enable the option; ; `n` — disable the option. For example: `https://cdn.ex.com/ioss(progressive=y)/pic.jpeg`

quality

A value from 1 to 100. Higher values indicate higher quality. For example:

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

Size

resize

A value in pixels from 1 to 4000. You can only downscale images without loss of quality. Available options:

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

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

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

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

Progressive JPEG

progressive

Gradual loading with progressive quality improvement. This parameter is only available for JPEG images. Available values:

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

For example:

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

3. Verify the optimization

Open your browser in incognito mode.
Open the page where images should be compressed.
Open developer tools → tab Network.
In the Name block, click the row for the image that should have been loaded from the CDN cache.
In the Headers tab, in the Response headers pane, find the Content-Type header; if the value is image/webp, the image has been converted.
If you resized or changed the image quality, compare the image with the original.