Adaptive Image Compression (AIC) increases compression of JPEG images when slower network speeds are detected for a client. Serving compressed images reduces the amount of data required to load a page, which can compensate for suboptimal network performance. Adaptive Image Compression:

• minimizes page-load times on client browsers by reducing the file size of JPEG images on slower networks,
• provides customized compression rates for different network conditions,
• operates dynamically, with no pre-analysis required,
• uses standard JPEG lossy compression to compress images,
• modifies image quality without changing image dimensions.

You don't need to change HTML code on your origin in order to use AIC.

How it works

1. The edge server:
   • detects the type of network that is delivering the request: mobile (cellular) or non-mobile,
   • measures the network latency from the client device which is determined based on Round-Trip Time (RTT),
   • based on the network type and latency, assigns the connection performance to one of the three performance tiers.

📘

The edge server detects the network type, not the device using the network. For example, a laptop using a cellular network to reach your site is mobile, and a tablet using Wi-Fi is non-mobile.

2. The edge server detects the network type (mobile or non-mobile) and the connection performance and then finds the appropriate image-quality setting in your AIC configuration. The edge server then checks its cache for a copy of the image at that quality setting, and:
   • if the correct version is cached on the edge server, it serves the cached image,
   • if the correct version is not cached, the edge server forwards the request to the image adaptation service.
3. If the edge server forwards the request, then the image adaptation service:
   • requests the original image from an edge server (which, if necessary, fetches it from the customer’s origin),
   • applies the desired quality setting,
   • returns the derivative image to the edge server.
4. The edge server caches the derivative image and serves it to the requesting browser.

What AIC does to images

When using AIC to compress JPEG images, the edge server:

• strips the application segment metadata, which does not affect how the image is displayed or decoded,
• preserves the JPEG Comment (COM) segment, which may contain copyright information,
• if any type of exception occurs during processing or if the AIC compression increases the file size, serves the original, pristine image (“fail over”),
• serves unique entity tags (ETags) to browsers for different variations of images.

Note on caching

The edge server can distinguish different versions of the same image; at the same time it knows the versions are related. When a specific derivative is needed, the edge server only serves the requested version. Clearing the cache of the original image also clears all derivatives of that image.

Supported file types

AIC supports the following JPEG file extensions:

• .jpg
• .jpeg
• .jpe
• .jif
• .jfif
• .jfi

Configuring Adaptive Image Compression

About match criteria for AIC

You can have different AIC settings for different requests. For example, suppose you want to compress the large image on your splash page for slow mobile connections only, compress only the thumbnails of product images, and never compress your company logo. You would use these match criteria and behaviors:

Considerations for referrer hostname matches

When setting a match rule using a referrer hostname, be aware that there are instances where some clients may not send referrer information.

This situation occurs for referrer host entries (as opposed to host and path entries) because the referrer hostname may:

• be removed or changed by users,

• be removed if IE is used with certain JavaScript components and when target="_blank" in anchors or meta refresh,

• not be set when programming functions for opening and accessing files are used, or for applications that have browser-like components (wget, cURL, fsockopen),

• not be set when users click embedded links in chat applications or Flash/PDF/Word/Excel documents.

For example, let's say you want to run a performance test (like Keynote, Gomez, or SiteAnalyzer) on an image to determine the performance benefits of AIC, and your AIC configuration has a referrer host match enabled. Unless you specifically instruct the test agents to send a referrer header, the test will not likely trigger AIC.

Image quality considerations

When selecting the image quality, consider the following:

• The values are relative quality rates. The higher the quality of your images, the lower your page performance will be. If the client's connection performs poorly to begin with, use lower-quality images to avoid degrading the performance further.
• Selecting a lower quality level will result in more data being lost during the compression/encoding process. The resulting file may be smaller in size than the original and of lower quality.
• Selecting a higher quality level will result in less data being lost during the compression/encoding process. The resulting file will be closer in size and quality to the original.
• In any case, the edge server will never serve a file that is larger than the original. If the quality setting would increase the file size, the edge server will serve the original image.

Features and options

Adaption Settings for Mobile Network Requests

Adaption Settings for Non Mobile Network Requests

Tips and best practices

Use the same quality settings for multiple conditions

To improve cache-hit ratios, use the same quality values for closely-related network conditions. For example, if you use the settings below, you will have two copies of the image in the cache instead of three.

Review Time-to-Live (TTL) settings

The TTL settings for adapted images generated by AIC are the same as the TTL settings configured for the web site's images. For the best results, we recommend using long TTL values.

Purge cached content

Running a Content Control Utility (CCU) purge for the original URL will also purge from the edge servers all cached images generated by AIC.

Consider your Front-End Optimization (FEO) configuration

When combined, Front-End Optimization and AIC can provide highly effective image compression across your entire website. Because they use different approaches, each optimizes some images that the other one misses. Using both together ensures that more images are optimized, which improves the end-user's experience.

It is safe to enable AIC and FEO on the same domain. Images will be optimized by one or the other, not both.

• FEO image quality settings. The FEO image quality options are listed below. If any of these optimizations are applied to a particular image, AIC will not also be applied.

  • In the Optimize Images settings:

    • Image Compression

    • Use Web Resolution

    • Use Lower Resolution on 2G/3G

  • In the Optimize CSS settings:

    • Image Compression

    • Use Web Resolution

  • In the On-Demand Image Loading settings:

    • Low-Quality Image Preload

📘

Although Low-Quality Image Preload does conflict with AIC, all other On-Demand Image Loading settings do not affect image quality. You can use them effectively with AIC.

• Comparing AIC and FEO image compression. FEO analyzes the page template to find images, optimizes them, and puts the optimized images on a separate FEO resource domain. When applied to the HTML and CSS, FEO rewrites the image links to point to the optimized images on the FEO resource domain. In contrast, AIC optimizes all the image requests that go through the domain for which it is configured.

Because of these differences, FEO optimizes some images AIC misses, and AIC optimizes some images FEO misses:

Another difference is the kinds of optimization techniques available:

• FEO uses a slightly broader range of optimizations than AIC and can optimize more image formats, including WebP and JPEG XR.

• AIC can detect network conditions and adjust image quality based on that information. FEO does not have that capability.

In most cases, you will get the best results by configuring AIC on the domains that serve images on your website and configuring FEO on the separate FEO resource domain.

Testing Adaptive Image Compression

AIC comes with a set of test cookies you can use to perform manual testing. These cookies can:

• simulate different network conditions,

• preview various AIC outputs.

We recommend you use these cookies only when testing your AIC configurations in the staging network.

Available cookies for testing

You can use cookies during testing to simulate different conditions. Available cookies include the following:

🚧

If you issue these cookies from your origin to test in the production environment, you will negatively impact caching.

Testing AIC cookies with a web development tool

1. Open a browser that has a web development tool built-in (e.g., Chrome or Firefox) or installed as an add-on.

2. Log into the staging network.

3. Visit a web page on the staging network that has AIC enabled.

4. In the browser, activate the web development tool.

5. Select the cookies option in the web development tool.

6. If any existing cookies are listed that begin with aic-, delete them.

7. Create a new cookie.

8. Using the cookies listed in Available cookies for testing as a guide, enter:

   • the name of the AIC cookie you want to use (like aic-quality), and

   • a value for the cookie.

9. Verify that the AIC cookie you entered is now listed.

10. Reload the web page and observe how AIC changes the page's JPEG images.

Testing AIC cookies using cURL commands

With the cURL command-line tool you can send or get files using URL syntax. You can use cURL commands with the AIC cookies to test your AIC configuration.

The following sections provide examples of requests and responses.

aic-bypass

Example of request:

curl -o /dev/null -s --cookie "aic-bypass=true"
-w "Download time: %{time_total} (seconds)\tSize: %{size_download}\n" http://aic.edgesuite.net/hawaii/img/b-6.jpg

Example of response:

Download time: 2.973 (seconds)
Size: 8344074

aic-quality

curl -o /dev/null -s --cookie "aic-quality=100" -w "Download time: %{time_total} (seconds)\tSize: %
{size_download}\n" http://aic.edgesuite.net/hawaii/img/b-6.jpg

curl -o /dev/null -s --cookie "aic-quality=75" -w "Download time: %{time_total} (seconds)\tSize: %
{size_download}\n" http://aic.edgesuite.net/hawaii/img/b-6.jpg

curl -o /dev/null -s --cookie "aic-quality=50" -w "Download time: %{time_total} (seconds)\tSize: %
{size_download}\n" http://aic.edgesuite.net/hawaii/img/b-6.jpg

curl -o /dev/null -s --cookie "aic-quality=25" -w "Download time: %{time_total} (seconds)\tSize: %
{size_download}\n" http://aic.edgesuite.net/hawaii/img/b-6.jpg

aic-network

Example of command:

curl -o /dev/null -s --cookie "aic-network=mobile"
-w "Download time: %{time_total} (seconds)\tSize: %{size_download}\n" http://aic.edgesuite.net/hawaii/img/b-6.jpg

Example of response:

Download time: 0.250 (seconds)
Size: 2122066

aic-rtt

curl -o /dev/null -s --cookie "aic-rtt=10" -w "Download time: %{time_total} (seconds)\tSize: %
{size_download}\n" http://aic.edgesuite.net/hawaii/img/b-6.jpg

curl -o /dev/null -s --cookie " aic-rtt=100" -w "Download time: %{time_total} (seconds)\tSize: %
{size_download}\n" http://aic.edgesuite.net/hawaii/img/b-6.jpg

curl -o /dev/null -s --cookie "aic-rtt=400" -w "Download time: %{time_total} (seconds)\tSize: %
{size_download}\n" http://aic.edgesuite.net/hawaii/img/b-6.jpg

curl -o /dev/null -s --cookie "aic-rtt=600" -w "Download time: %{time_total} (seconds)\tSize: %
{size_download}\n" http://aic.edgesuite.net/hawaii/img/b-6.jpg