Image Stack image compression

Last update: November 19 2024

Image Stack image compression

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

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

Principle of operation⁠

Images on the source are stored in their original form. When the source receives a request to download an image of the format .jpg and .pngThe image goes to the Image Stack server, where it is processed according to the specified parameters. The processed image goes to the CDN-server cache.

In some cases, the image will not be processed and the user will receive the original version of the image:

• if the quality of the original 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.

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 following model pay-as-you-go.

To view prices and calculate the cost of a CDN resource with the Image Stack option, please visit selectel.ru.

Customize Image Stack image compression⁠

1. Optional: turn on the 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, customize URL parameters on the website.
4. Check the compression operation.

optional: enable source shilding⁠

When you enable Image Stack, the cache of the CDN resource will be automatically cleared. 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, 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 delivers it to CDN servers, thus relieving the load from the source. More details in the manual Source Schilding.

Enable compression in the control panel⁠

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

1. In control panels go to CDN → CDN resources.

2. Open the CDN resource page → tab Settings.

3. Check the box Image Stack.

4. To compress images, select quality — 95%, 80% or 65%, or select Its meaning and type it in.

5. In order not to change the quality of the format images .pngand enable lossless compression for .png.

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

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

7. Click Save.

customize URL parameters on the site⁠

You can configure individual quality, format, cropping and resizing settings for each image via URL parameters. If you have set the quality and format in the control panel when compression enable and also set them through the URL-parameters of the image on the site, then the settings in the URL-parameters will be prioritized.

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 multiple parameters, list them using the symbol &. You can see the possible parameters and their values in the table below URL parameters for Image Stack compression.

An example of a query that will translate the image image formatted .png in the format of .avifwill crop it to a size of 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, no more than the current width. Can be used in conjunction with height. For example: https://cdn.example.com/image.png?width=300
Height	height	Height in pixels, no more than the current height. Can be used in conjunction with width. For example, https://cdn.example.com/image.png?height=200
Party ratio	fit	Optional resizing parameter. Specified if the following are specified at the same time width and height. fit — The excess pixels will be evenly trimmed at the edges; bounds — the image will shrink in proportion to the larger side; cover — the image will shrink in proportion to the smaller side; force — the image will be shrunk 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	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 — indentation on the left 100 pixels, on the top 50 pixels; in percentages, for example: https://cdn.example.com/image.png?crop=300,200,x25p,y10p — Left margin 25% of width, top margin 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 to be trimmed around the fragment will be divided: in width — by 20% to the left, 80% to the right of the fragment, in height — by 40% to the top, 60% to the bottom of the fragment.

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 → tab Network.

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

5. In the developer tools in the Name select the image that should have been downloaded from the CDN cache.

6. In the developer tools on the Headers en bloc Response headers look for the title X-Img-Operations:

   • 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 has been loaded. The reason why the image was not processed will be specified in the header Img-Skip-Reason.