What is Image Stack?
How it works
Enable and configure
When images cannot be processed
Rewrite doesn’t work
What is Image Stack?
Image Stack is a paid option for optimizing images in JPG and PNG formats (mime-type: image/jpeg, image/png) on the fly. The original images remain unchanged but their versions in the CDN cache change according to your requirements.
The Image Stack option includes the following features:
- Quality allows you to set the quality level for your images by lowering it to the specified value. The file size of images also decreases, so users will get them faster.
- Compression converts images to WebP and AVIF formats providing up to 55% file size savings at a given quality level.
- Resize allows you to reduce the height, width, and scale of your original image.
- Crop allows you to cut off the excessive image area beyond the established parameters.
How Image Stack can change your image:
| Original image | Compression | Quality |
| Format: jpg Quality: 100% Size: 3.55 MB W×H: 553×743 px |
Format: avif Quality: 95% Size: 476 KB |
Quality: 10% Format: avif Size: 8 KB |
| Resize | Crop | ||
| W×H: 333×500 px | W×H: 400×500 px Segment from the center |
How Image Stack works
If you use Image Stack requests for images that will be proxied through our Processing Server, it takes an original image from your Origin Server and converts the image to WebP or applies others features. After that, a new version of the image will be saved in the Caching Server and sent to end users.
After converting, an image does not change its URL or extension. Only the following processing details will be added to image HTTP headers:
- X-Img-Operations: operations performed
- X-Img-Origin-Download-Time: time to download an image from an origin in milliseconds
- X-Img-Origin-Size: original image size in bytes
- X-Img-Processing-Time: time taken to convert in milliseconds
- X-Img-Saved-Bytes: how many bytes the image size is reduced by after processing
- X-Img-Server: the server that has converted the image
- Img-Skip-Reason: the reason why an operation wasn’t performed
The image transformation operations are performed in this order:
- Resizing
- Cropping
- Compression to WebP and AVIF with changing quality
Note: The quality feature cannot be performed separately from the others. If you want to change the image quality, activate one more feature.
Enable and configure Image Stack
1. Send us a request to activate the option via support@gcore.com or the chat window in the bottom-right corner of our website. Please specify your ID in the request so we can identify your account. You can find it on the main page of your control panel.
Message template: “Good afternoon! Please enable the Image Stack option for the account with ID [your ID]”.
We will notify you when we configure the option. After that, you will be able to enable Image Stack for your CDN resources.
Note: You can enable the Image Stack option in two ways: in the Resource settings and the Rule section. We recommend sticking to the second one (rule creation) because the first one (common settings) can lead to the “Rewrite doesn’t work” issue.
We have outlined how to enable the option through rule creation below.
2. Open the settings of the required CDN resource and go to Rules. Click “Create rule” and select the image optimization template.
On the next page, you will be able to create a rule for image optimization. You only need to configure the Image Stack section.
3. Enable the Image Stack option and set parameters:
Image quality. Specify in what quality the images will be delivered to your users. Four values are available:
- High: 95%
- Medium: 80%
- Low: 65%
- Custom value: any value from 0% to 100%
The quality of individual images is set by adding the necessary query strings. Note, that the quality feature is connected to the compression feature and can’t be set separately. For example:
https://image.example.ru/image.jpg?fmt=avif&quality=50
More information can be found in the “Quality. Change image quality” guide.
Compression. Enable WebP and/or AVIF compression. If you have enabled both and the end users’ browser supports both formats, images will be converted to AVIF by default.
The compression for individual images is set by adding the necessary query strings. For example:
https://image.example.ru/image.jpg?fmt=webp
https://image.example.ru/image.jpg?fmt=avif
More information can be found in the “Compression. Convert images into WebP and AVIF” guide.
Image Stack overview. The resize and crop features can only be configured by the query parameters. Because each image is unique and has different characteristics (size and crop area), it is not possible to create standard settings for them.
More information can be found in the “Crop. Crop images” and “Resize. Reduce image size” guides.
4. Click Create rule to save changes.
The setup is complete. Changes will take effect within about 5–10 minutes. After that, your images will be served to end users optimized with the configurations that you set in step 3.
Please note that when you add a rule with the Image Stack option enabled, the resource cache will be automatically cleared. CDN servers will start requesting your origin for content. To avoid overload, we recommend turning on the option when your users are least active, or first enabling the Origin Shielding option.
When images cannot be processed
If an image cannot be processed, an end user will receive the original image downloaded into the CDN cache from the Origin Server. We will serve original images in the following cases:
- The original image quality is lower than the target quality. For instance, if the original quality is 45 and the target is 80, the image size after processing will increase rather than decrease.
- Gzip compression is applied to the original images. If the image is already compressed by Gzip (contains the HTTP header Content-Encoding: gzip), Image Stack cannot unzip the original image.
- The end-user browser doesn’t support the target format (WebP, AVIF). If HTTP headers don’t contain the values image/webp or image/avif, it means that the browser does not support WebP or AVIF formats.
- The image has a format that Image Stack doesn’t support. If you want to convert files with extensions other than JPG and PNG (e. g., GIF), Image Stack will not be able to process them.
Use the Img-Skip-Reason HTTP header to find out why the image was not converted:
The Rewrite option does not work when Image Stack is enabled
Some browsers (e.g., Google Chrome) add the Accept header with the value image/webp or image/avif not only to images, but also to static content like PHP and JS scripts.
All requests with the Accept header are redirected to the Image Processing Server. Usually, when the server cannot convert the file (e.g., when it’s a PHP file), it returns the content from the origin.
Difficulties appear if the Rewrite option is enabled for your resource. It redirects the requests to the origin. The origin responds with the 3xx code, but the Image Processing Server cannot return the 3xx response code.
If the PHP or JS files are requested, the Image Processing Server will turn to the origin. But it responds only with the 3xx code. The Processing Server will try to follow the redirect until it receives a different response code. This will cause the file to be inaccessible.
To avoid this issue, we recommend enabling the Image Stack option in the Rules section by following the steps in our “Enable and configure Image Stack” guide. This way, you clearly indicate that the option will only work for files with mime type image/jpeg or image/png.
You can enable Image Stack for the entire resource in the resource settings only if the origin consists of static image assets.