Akamai Diversity
Home > Web Performance > Delivering High Performing Images on the Akamai Edge - Deep Dive - Part 2: Implementation and Settings

Delivering High Performing Images on the Akamai Edge - Deep Dive - Part 2: Implementation and Settings


In part 1 of the deep dive we learned about the best practices involved in choosing an appropriate image format in preparation for web delivery. In part 2 we will discuss different configurations to leverage Akamai's Adaptive Image Compression (AIC).


As many web developers and content designers know, compression is as much an art as it is a science. Knowing when to apply compression and how much compression to apply is paramount to your user experience. A one size fits all method means you're either not compressing enough and leaving potential performance gains on the table (forcing your user to wait) or potentially compressing too much, putting your user experience and product in jeopardy.

Mobile network delivery presents a number of challenges, particularly around network latency. With over 100 requests on a web page, that's a lot of shuffling back and forth, which introduces a significant amount of wait time.  Adaptive Image Compression (AIC) leverages a host of settings highlighted in the screenshots below to help with this challenge.


It's all about situational performance starting with, match conditions.  Match conditions allow you to easily determine where, and when your compression happens.

 

 

In addition to file extensions, you may choose to do a negative or positive match on:

·      Hostnames,

·      Paths,

·      And the referrer.

 


high-performance-images-figure-1.png


 





high-performance-images-figure-2.png

















Above, you can see the various network conditions where AIC is applied. One of the common questions we hear is, what does Excellent, Good, and Poor actually mean? It's all based on the Round Trip Time of the connecting device to Akamai. Reference the table below for more details.

 

 

AIC Round-Trip Times

Network Condition Tier

Mobile Network RTT (in ms)                                         

Non-Mobile Network RTT (in ms)

Excellent

Up to 149

Up to 99

Good

150 - 499

100 - 374

Poor

500 and above

375 and above

* Round Trip Time values are subject to change in order to meet the needs of a changing Internet.

 


Given the above information consider the following action items:


1.    Compress when needed - If your user has an excellent connection, serve the pristine image as you intended.

2.    Use common compression values -  AIC creates a unique copy of each compressed image for caching purposes.  This means for the same image you may have multiple copies cached on the Akamai Edge server. For best results, try using shared values for similar network conditions.  For example, try setting Excellent and Good to the same compression value.

3.    Experiment with your settings - The Akamai Intelligent Platform allows you to test every change in a test environment prior to releasing to production. Want to see the difference between a compression setting of 60 or 70? No problem. If you're familiar with creating and editing browser cookies take note of the following cookies you may define.

a.    AIC-Quality - Allows you to manually set a quality or compression value

                                               i.     Example:

1.    Cookie Name: aic-quality

2.    Cookie Value:  50

b.    AIC-Bypasss - Allows you to turn off AIC for a request

                                               i.     Example:

1.    Cookie Name: aic-bypass

2.    Cookie Value: true

4.    Convince the business.  If you're not compressing your images today you are missing out on increased performance benefits and cost savings. In many instances, making the case for compression is a business decision that can take some convincing. In our experience, your best approach here is to setup up a meeting and show the difference. Present your image before (pristine) and after (with compression) on the devices your business leaders care about. Present your images side by side, and simply ask them, "Can you see the difference?" You do not need to get into the technical jargon we described above, and what's happening behind the scenes. Once they tell you they don't see a difference, give the good news - this can increase website performance while saving money. If you're able to quantify that in $$$$, even better!




Raphael Edwards is a senior technical project manager at Akamai. 


Leave a comment