Image optimization

Image optimization allows you to reduce the size of images in JPEG, PNG, GIF formats. Optimization can be done by:

quality reduction;
converting the file to WebP format;
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 on the origin are stored in their original format. When the origin receives a request from a CDN server to download an image in JPEG, PNG, GIF format, the image is converted to WebP and placed into the cache of the CDN server that sent the request.

To compress, resize, and apply progressive JPEG for individual images, URI parameters are used, which are specified in the image link in the website code. The 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 under the plan is deducted when enabling the option for any CDN resource of the account. Subsequent payments are deducted on the first day of each calendar month. If the request package under the plan is exhausted, each request over the package is billed separately under the pay-as-you-go model.

You can view prices on selectel.ru.

Limits and restrictions

Some images cannot be converted to WebP format:

if an image is larger than 2 MB. If you want to convert images larger than 2 MB, submit 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 individual images, configure URI parameters on the website.
Verify compression.

1. Enable optimization in the control panel

In the control panel, in the top menu, click Products and select CDN.
In the CDN resources section, open the resource page → Optimization tab.
Make sure that in the Delivery optimization type block, Static is selected.
In the Image optimization block, select the Image optimization checkbox.
Click Apply. While applying the settings, the CDN resource will be in the PROCESSING status. During this time, applying other settings is unavailable. The settings will be applied when the CDN resource changes 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 custom domain;
- <parameter> — parameter for image modification. You can view available parameters in the URI parameters for image modification table;
- <value> — parameter value for image modification. You can view 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 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>` — resizing with fixed width and height. Test different values — the setting may distort proportions. For example: `https://cdn.ex.com/ioss(resize=400x300)/pic.png` `<width>` — scaling by width while maintaining aspect ratio. For example: `https://cdn.ex.com/ioss(resize=400)/pic.png` `x<height>` — scaling by height while maintaining 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> — resizing with fixed width and height. Test different values — the setting may distort proportions. For example:

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

https://cdn.ex.com/ioss(resize=400)/pic.png
x<height> — scaling by height while maintaining 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 → Network tab.
In the Name block, click the line with the image that should have loaded from the CDN cache.
On the Headers tab, in the Response headers block, find the Content-Type header — if image/webp is specified next to it, the image has been converted.
If you resized or changed the image quality, compare the image with the original.