Compression and optimization concepts
IBM Cloud® Internet Services applies gzip
and brotli
compression to some types of content. CIS also compresses items based on the browser's UserAgent to speed up page loading time.
If you're already using gzip
, CIS accepts your gzip
settings if you're passing the details in a header from your web server for the files.
CIS supports only the content type gzip
toward your origin server and can also deliver only content that is compressed with either gzip
or brotli
, or not compressed.
CIS's reverse proxy is also able to convert between compressed formats and uncompressed formats, meaning that it can pull content from a customer's origin server through gzip
and serve it to clients uncompressed (or reversed). This
conversion is done independently of caching.
The Accept-Encoding header is not respected and is removed.
What gets compressed
In addition to CIS's serving stale content and minification of CSS, JS, and HTML to speed up your site, CIS also provides gzip
and brotli
compression to help site owners.
CIS returns gzip
or brotli
encoded responses to compatible clients and browsers for the following content-types:
text/html
text/richtext
text/plain
text/css
text/x-script
text/x-component
text/x-java-source
text/x-markdown
application/javascript
application/x-javascript
text/javascript
text/js
image/x-icon
image/vnd.microsoft.icon
application/x-perl
application/x-httpd-cgi
text/xml
application/xml
application/xml+rss
application/vnd.api+json
application/x-protobuf
application/json
multipart/bag
multipart/mixed
application/xhtml+xml
font/ttf
font/otf
font/x-woff
image/svg+xml
application/vnd.ms-fontobject
application/ttf
application/x-ttf
application/otf
application/x-otf
application/truetype
application/opentype
application/x-opentype
application/font-woff
application/eot
application/font
application/font-sfnt
application/wasm
application/javascript-binast
application/manifest+json
application/ld+json
If you do not want a particular response from your origin to be encoded, you can disable encoding by setting cache-control: no-transform at your origin web server.
Enable Brotli compression
- Log in to your CIS account.
- Choose the appropriate domain.
- Click the Performance tab.
- Click the Advanced tab.
- Toggle the Brotli switch to On.
HTML, JavaScript, and CSS compression features
CIS uses Minify web content to remove all unnecessary characters from HTML, JavaScript and CSS files, without changing their functionality.
CSS and JavaScript minification operates on cached CSS and JS files only. After CIS returns a cache HIT for the file, it is returned to browsers in minified form, which allows CIS to deliver a complete minification result. If you need to enable or disable minification for CSS and JavaScript, purge your CIS cache to see the effect of any minification change.
Image size optimization compression
Image size optimization compresses resources that are cached in the CIS edge network by stripping metadata and applying lossy or lossless compression. Image size optimization accelerates image downloads by reducing image size. Image size optimization can't optimize off-site resources.
Image size optimization compression is only available as a page rule in the console. The domain level setting is available in the CLI.
Image size optimization compression options
The following sections detail the image size optimization compression options.
Lossless
The lossless option attempts to strip most metadata (for example EXIF data), but doesn't change the image detail. Effectively, when uncompressed, a lossless image is identical to the original.
Lossy
The lossy option attempts to strip most metadata and compresses images by approximately 15 percent. When uncompressed, some of the redundant information from the original image is lost.
Lossy has the same effect as Lossless when applied to PNG.
With Lossless and Lossy modes, CIS attempts to strip as much metadata as possible. However, there is no guarantee that all metadata is stripped because other factors, such as caching status, might affect which metadata is finally sent in the response.
WebP
WebP is a modern image format that provides superior lossless and lossy compression for images. WebP lossless images are approximately 26 percent smaller than PNGs, while lossy images are 25 to 34 percent smaller than JPEGs.
Image size optimization creates and caches a WebP version of the image. The image is then delivered to the browser if the Accept header from the browser includes WebP and the compressed image is significantly smaller than the lossy or lossless compression.
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Currently, WebP is only supported in Firefox, Google Chrome, and Opera browsers.
To ensure WebP is not served from cache to a browser that lacks WebP support, disable WebP at your origin web server when you use image size optimization.
Verify that image size optimization is active
Activate image size optimization by using a page rule or CLI domain settings.
Image size optimization adds the following headers to image requests that are compressed:
cf-bgj: imgq:85
cf-polished: qual=85, origFmt=jpeg, origSize=95005
cf-cache-status: HIT
The cf-bgj
header confirms that CIS applied image size optimization and returns the image quality setting (imgq
). The cf-polished
header represents the image size optimization status and returns the image
quality setting (qual
) and original size (origSize
). The cf-cache-status
confirms that the image was cached and image size optimization can be applied.
WebP conversion does not change the image URL. The Content-Type HTTP
header tells the browser the original format of an image.
Common Cf-Polished statuses
The following table lists common Cf-Polished statuses and how to troubleshoot them. If no Cf-Polished header is returned, try to use single-file cache purge to purge the image.
Status | Definition | Recommendation |
---|---|---|
input_too_large |
The input image is too large or complex to process and needs a lower resolution. | Use .png or .jpeg images that are less than 1,000 px and 10 MB. |
not_compressed or not_needed | The image was fully optimized at the origin server and no compression was applied. | |
webp_bigger | Polish attempted to convert to WebP, but the image was optimized at the origin server and/or was created with a low quality setting. | Because the WebP version doesn’t exist, the status is set on the JPEG/PNG version of the response. |
cannot_optimize or internal_error | The input image is corrupted or incomplete at the origin server. | Upload a new version of the image to the origin server. |
format_not_supported | The input image format is not supported (for example, BMP, TIFF) and/or the origin server is using extra optimization software that is not compatible with Polish. | Try converting the input image to a web-compatible format (for example, PNG, JPEG) and/or disabling any extra optimization software at the origin server. |
vary_header_present | The origin web server sent a Vary header with a value other than accept-encoding. | If the origin web server is attempting to support WebP, disable WebP at the origin web server and let Polish perform the WebP conversion. |
Image size optimization still works when the accept-encoding is not the only header that is listed within the Vary
header.