Adaptive Image Compression

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.

  1. 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.
  2. 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.
  3. 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:

CriteriaBehavior
If file name matches splash.jpg ......then enable AIC for mobile network requests only and set the sliders for Poor Connections to 40.
If path matches /thumbs/ ......then enable AIC for all requests; set less compression for higher-quality connections.
If file name matches one of either logo.jpg or logoWithTag.jpg ......then disable AIC for both mobile and non-mobile network requests.

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

Field

What it does

Sub-options

Enable

Enables or disables adaption settings for mobile network requests.

Excellent Connection

Select the extent of image adaption to perform for excellent connections.

  • Adapt Images
  • Do Not Adapt Images
  • Only Strip Metadata

Quality

Enter post-compression image quality for excellent connections, where 100 represents high quality and low compression.

Poor Connection

Select the extent of image adaption to perform for poor connections.

  • Adapt Images
  • Do Not Adapt Images
  • Only Strip Metadata

Quality

Enter post-compression image quality for poor connections, where 100 represents high quality and low compression.

Adaption Settings for Non Mobile Network Requests

Field

What it does

Sub-options

Enable

Enables or disables adaption settings for non mobile network requests.

Excellent Connection

Select the extent of image adaption to perform for excellent connections.

  • Adapt Images
  • Do Not Adapt Images
  • Only Strip Metadata

Quality

Enter post-compression image quality for excellent connections, where 100 represents high quality and low compression.

Good Connection

Select the extent of image adaption to perform for good connections.

  • Adapt Images
  • Do Not Adapt Images
  • Only Strip Metadata

Quality

Enter post-compression image quality for good connections, where 100 represents high quality and low compression.

Poor Connection

Select the extent of image adaption to perform for poor connections.

  • Adapt Images
  • Do Not Adapt Images
  • Only Strip Metadata

Quality

Enter post-compression image quality for poor connections, where 100 represents high quality and low compression.

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.

Network condition tierQuality setting
Excellent70
Good70
Poor55

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:

FEO misses images thatAIC misses images that
  • are not shared across many pages (long-tail images)

  • are not present in the page analyzed

  • have a short cache

  • are injected by JavaScript

  • are from a third party

  • are not on an ​Akamai​ domain

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:

CookieSettingDescription
aic-bypasstrueTurns AIC off for a request, which is useful when trying to determine whether an issue is at origin or within the Edge Network.
aic-quality1-100Manually sets quality level, overriding the detected network condition tier. Requests with this cookie will bypass the cache as they do not match a configured setting.
aic-networkmobileMakes requests appear to come from a mobile network. This is a useful testing method if you have enabled AIC for mobile networks only.
aic-rtt> 1Uses the value entered (in ms) to override the detected RTT value. (Enter <10 for excellent conditions or >1500 for poor conditions.)
aic-failoverfalseTurns off failover. With failover on, it is hard to detect web-page issues visually: When there are problems, AIC will fetch the original image.
aic-cachefalseTurns off use of AIC's custom cache-h map. This is useful when diagnosing an issue.

🚧

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

AIC quality settingRequestResponse
100
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
Download time: 4.364 (seconds) Size: 8344074
75
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
Download time: 2.217 (seconds) Size: 2122066
50
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
Download time: 1.918 (seconds) Size: 1444222
25
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
Download time: 1.821 (seconds) Size: 964619

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

AIC RTT Setting (ms)RequestResponse
10
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
Download time: 0.421 (seconds) Size: 2122066
100
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
Download time: 0.323 (seconds) Size: 1773148
400
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
Download time: 0.154 (seconds) Size: 1263692
600
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
Download time: 0.140 (seconds) Size: 1072851

Did this page help you?