Image stack image compression

Last update: May 13 2024

Image stack image compression

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

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

Principle of operation⁠

Images on the source are stored in their original form. When the source receives a request to upload an image of format .jpg and .png, the image goes to a special server, where it is processed according to the specified parameters. The processed image and a copy of the original image are uploaded to the cache of CDN servers and from there sent to end users.

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 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.

Cost⁠

The cost of the Image stack option is calculated based on the number of compression requests and is 90 rubles for a package of 10,000 requests (one image — one request).

The package fee is deducted at the first compression request. When you have exhausted a paid package, the payment is deducted the first time you request over and above the package.

Customize image compression Image stack⁠

1. Optional: enable source shielding.
2. Enable compression.
3. If you want to crop and resize images and customize individual processing options for individual images, set URL-parameters on site.
4. Check compression operation.

1. Optional: enable source shilding⁠

When you enable Image Stack, the CDN resource cache will be automatically cleared. All queries will start hitting the source, which can increase your site's load time.

To avoid overloading the source, we recommend connecting the source shilding in advance. If shilding is enabled for a 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 serves it to CDN servers, thereby taking load off the source. See the Shielding source instructions for details.

2. Enable compression in the control panel⁠

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

1. In Control Panel, go to CDN → CDN Resources.

2. Open the CDN resource page → Settings tab.

3. Check the Image Stack checkbox.

4. To compress images, select the quality — 95%, 80% or 65%, or select Your value and enter it.

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 image will load in .avif format. If the user's browser does not support the final format, the original image will be loaded.

7. Click Save.

3. Customize URL settings on⁠

Through URL parameters, you can customize individual quality, format, cropping and resizing settings for each image. If you set the quality and format in the control panel at enable-compression, and also set them via the URL parameters of the 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> is the path to the file;
• <parameter>=<value> is the parameter to modify and its value. To specify multiple parameters, list them through the & symbol. You can view the existing parameters and their values in the URL parameters for Image stack compression table.

An example query that will convert an image image from .png format 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	Value
Format	fmt	webp avif For example: https://cdn.example.com/image.png?fmt=webp
Quality	quality.	As a percentage between 0 and 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
Aspect Ratio	fit	Optional resize parameter. Specified if width and height are specified at the same time. fit — excess pixels will be evenly cropped along 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 shrink to the specified values regardless of the original proportions. For example: https://cdn.example.com/image.png?width=300&height=200&fit=fit
Cropping	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 fragment position, 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 percent, e.g.: 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 trimmed area, e.g.: https://cdn.example.com/image.png?crop=300,200,offset-x20,offset-y40 — the trimmed area around the fragment will be divided: in width — by 20% on the left, 80% on the right of the fragment, in height — by 40% on the top, 60% on the bottom of the fragment.

4. Check compression performance⁠

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 title is in the list, the processed image is loaded. The header value will indicate the processing performed (compression, convert, resize, crop);
   • if the title is not in the list, the original image is loaded. The reason why the image was not processed will be indicated in the Img-Skip-Reason header.