WebP compression is a paid option. Now this option is available in beta version. If you want to use it, send a request to our support team following the instructions below.
What is WebP?
WebP is an image format with an advanced compression algorithm. By converting an image from PNG or JPG to WebP, you reduce its weight by an average of 25-35% without any visible loss of quality.
To compress images, WebP uses a RIFF container. The compression algorithm is based on the intra-frame coding of the VP8 video format.
What it is used for
WebP images give you a smaller web page and shorter load time. The more images a website hosts, the greater the difference in download time will be.
Compare: the same picture in PNG, JPG, and WebP
Below is a painting by Wassily Kandinsky in PNG, JPG, and WebP formats. Sharpness and color rendering are the same, but the WebP file’s size is smaller.
PNG (1860 KB) / JPG (169 KB) / WebP (136 KB)
What images can be converted to WebP
Our CDN can compress both JPG and PNG images, i.e., image/jpg and image/png mime-type files.
How compression works
Requests for PNG and JPG images are proxied through our converter service. It takes an original image from your server, converts it to WebP, saves it in CDN cache and sends it to an end-user. After converting, an image does not change its URL or extension. An image header contains the following conversion details:
- x-gcdn-img-server — server that has converted the image,
- x-gcdn-origin-download-time — time in milliseconds that was taken to download your image from origin,
- x-gcdn-origin-size — original image size in bytes,
- x-gcdn-processing-time — time in milliseconds that was taken to convert the image,
- x-gcdn-saved-bytes — difference in bytes between the sizes of the source image and the WebP image.
When image cannot be compressed
If an image cannot be converted to WebP, an end-user will receive the original image downloaded into the CDN cache from the origin. Here are the cases when the compression is not possible:
- The compression has reduced the image size. This happens if the quality of an original image is below the target quality in settings. For example, the original quality is 65, and the WebP compression setting is 80.
- An original image has been compressed with GZIP.
- A user's browser does not support WebP ( older browsers don't support it). The CDN checks the HTTP Accept header in the request and determines which image to send to the user: compressed or original. If the header value doesn't include image/webp, the user's browser does not support WebP and the CDN returns the uncompressed image.
The img-skip-reason HTTP header explains the reasons why the image failed to convert to WebP.
Enable and configure WebP compression
1. Send us a request to activate the option via email@example.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.
The message template: "Good afternoon! Please enable the WebP compression option for an account with ID ...(your ID)".
We will notify you when we configure the WebP compression option. After that, you will be able to activate compression for your CDN resources.
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 can create a rule for image compression. You only need to configure the "WebP compression" section.
3. Enable the WebP compression option and set the compression parameters:
- Quality settings for JPG — quality of JPG images after WebP compression.
- Quality settings for PNG — quality of PNG images after WebP compression.
- Enable lossless for PNG — enables compression of PNG images in WebP without quality loss. If this checkbox is checked, quality settings for PNG will be ignored.
4. Save the rule.
Please note that when you add a rule with the WebP compression 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 the least active, or first enabling the Origin Shielding option.