Image Stack image compression

Last update: June 04 2025

Image Stack image compression

Image Stack image compression allows you to reduce the weight of .jpg and .png images:

• reduce the quality;
• convert to .avif or .webp format;
• cut;
• to change size.

If the image has not been compressed — the user will get its original version, which is also saved to the cache. Compression is not applied if:

• the quality of the source image is lower than specified in the compression settings;
• the user's browser does not support the final format of the processed image;
• the source image has already been compressed using Gzip.

Principle of operation⁠

Images on the source are stored in their original form. When the source receives a request from the CDN server to download a .jpg and .png image, the image goes to the Image Stack server, where it is processed according to the compression settings in the control panel or URL parameters for compression. The processed image goes to the cache of the CDN server that sent the request.

Requests to the source are counted from each CDN server separately. To reduce the load on the source, you can connect source shilding — an additional caching CDN-server, which accumulates all requests to the source from CDN, caches images from the source and sends them to CDN-servers.

Cost⁠

Image Stack is billed on a monthly basis on a data plan. The plan includes a package of 10,000 compression requests, which is used for all CDN resources of the account with Image Stack enabled. 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.

You can view prices and calculate the cost of a CDN resource with Image Stack option at selectel.ru.

Customize Image Stack image compression⁠

1. Optional: enable source shilding.
2. Enable compression in the control panel.
3. If you want to crop and resize images and customize individual processing options for individual images, configure the URL settings on the site.
4. Check the compression operation.

1. Optional: enable source shilding⁠

When you enable Image Stack, the CDN resource cache will automatically clear. All requests will start hitting the source, which may increase the load time of your site.

To avoid overloading the source, we recommend that you enable source shilding in advance. If source shilding is enabled for the source, requests do not go directly to the source, but are accumulated on an intermediate shilding server. The shilding server caches content from the source and gives it to CDN servers, thus relieving the load from the source. See the Source Shielding instructions for more details.

2. Enable compression in the control panel⁠

In the control panel, you can customize the quality and format of the final images. You can only customize cropping and resizing using URL parameters.

1. In the Control Panel, on the top menu, click Products and select CDN.

2. Open the CDN resource page → Settings tab.

3. Check the Image Stack checkbox.

4. To compress images, select quality — 95%, 80%, or 65%, or select Custom and enter a value.

5. To avoid changing the quality of .png images, enable lossless compression for .png.

6. To convert the image format, enable .avif or .webp compression.

   If you enable both compressions and the user's browser supports both formats, the .avif image will be loaded. If the user's browser does not support the final format, the original image will be loaded.

7. Click Save.

3. Customize URL parameters on the site⁠

You can configure individual quality, format, cropping, and resizing settings for each image via URL parameters. If you set the quality and format in the control panel when you enable compression, and you also set them via the URL parameters of an image on the site, the settings in the URL parameters will take precedence.

To spell out the URL parameters, add them to the image link:

https://<url>?<parameter>=<value>

Specify:

• <url> — path to the file;
• <parameter>=<value> — the parameter to change and its value. To specify more than one parameter, list them through the symbol &. To see the possible parameters and their values, see the table below URL parameters for Image Stack compression.

An example query that will convert an image image from .png to .avif format, crop it to 330 by 600 pixels relative to the center, and reduce the quality to 50%:

https://cdn.example.com/images/image.png?fmt=avif&crop=300,600&quality=50

URL parameters for Image Stack compression⁠

Parameter	Parameter Name	Significance
Format	fmt	webp avif For example: https://cdn.example.com/image.png?fmt=webp
Quality	quality	Percentage from 0 to 100. For example: https://cdn.example.com/image.png?quality=30
Width	width	Width in pixels, not more than the current width. Can be used together with height. For example: https://cdn.example.com/image.png?width=300
Height	heights	Height in pixels, not more than the current height. Can be used together with width. For example, https://cdn.example.com/image.png?height=200
Party ratio	fit	Optional resize parameter. Specified if width and height are specified simultaneously. fit — The excess pixels will be evenly trimmed at the edges; bounds — the image will be reduced proportionally to the larger side; cover — the image will be reduced in proportion to the smaller side; force — the image will be compressed to the specified values regardless of the original proportions. For example: https://cdn.example.com/image.png?width=300&height=200&fit=fit
Pruning	crop	The width and height of the fragment in pixels, separated by commas.By default, the fragment is cut from the center. To change the position of the fragment, specify the left and top indents after the fragment size: in pixels, for example: https://cdn.example.com/image.png?crop=300,200,x100,y50 — indent left 100 pixels, top 50 pixels; in percentages, for example: https://cdn.example.com/image.png?crop=300,200,x25p,y10p — indent left 25% of width, indent top 10% of height; as a percentage of the area to be trimmed, for example: https://cdn.example.com/image.png?crop=300,200,offset-x20,offset-y40 — the space around the fragment will be divided: by width — 20% to the left, 80% to the right of the fragment, by height — 40% to the top, 60% to the bottom of the fragment.

4. Check the compression work⁠

1. Make sure that at least 30 minutes have passed since Image Stack was turned on — this time is necessary for the settings to apply to the CDN resource.

2. Open your browser in incognito mode.

3. Open Developer Tools → Network tab.

4. Open the page where you want the compressed images to be.

5. In the Developer Tools, in the Name block, select the image that should have been downloaded from the CDN cache.

6. In the Developer Tools, on the Headers tab in the Response headers block, find the X-Img-Operations header:

   • if the header is in the list, the processed image has been loaded. The header value will indicate the processing performed (compression, convert, resize, crop);
   • if the header is not in the list, the original image was loaded. The reason why the image was not processed will be specified in the Img-Skip-Reason header.