Skip to main content

Configuring ImageEngine with Akamai

Jon Sæterås
  • Updated

With Akamai it seems impossible to make use ImageEngines “prefixing mode” in the Luna control panel. Therefore, the real origin must be defined in ImageEngine (see Preparation) From Akamai perspective, ImageEngine is the origin from images.

image23.png

Preparation

  1. Register a domain name in the admin panel at control.imageengine.io. This domain will get a canonical name like “images.foo.com.imgeng.in”.
  2. Configure this domain with the actual origin where your original images are located.
  3. Verify the setup by accessing images like this: images.foo.com.imgeng.in/path/image.jpeg
  4. images.foo.com.imgeng.in will be used in the Akamai setup as the origin for images.

Akamai configuration

Akamai does not have a configuration language or scripting language, so all configuration is done in a user interface.

Configuration is done in the Luna panel: https://control.akamai.com/ in the Property Manager Editor

Set variables

image6.png

Click the Add Variable button, and add the following variables (automatically prefixed with PMUSER_):

Note: Akamai already has WURFL installed. We’ll use WURFL to decide the default image size based on screen resolution capabilities.

Name Initial value Description 
WIDTH
 
/w_2560
 Maximum Width of image 
FORMAT
 
/naf_jp2_jxr_webp_mp4
 Image format specification 
IE_PROTO
 
1.001
 ImageEngine protocol version. 
VERSION
 
1
 Version of the Akamai configuration (for debugging) 
CH_DPR
 
1
 DPR from Client HInts 
CH_WIDTH
   Width from Client Hints 
DPI_CL
 
/dpicl_1
 DPI Class 1-4 
CH_VP
   Viewport Width from Client Hints 
WURFL_DEVICE
   Device info from Akamai WURFL 
WURFL_WIDTH
   Screen width from Akamai WURFL instance 
WURFL_IS_WIRELESS
 
"false"
 Device class from Akamai WURFL instance 
WURFL_HEIGHT
   Screen height from Akamai WURFL instance

Setting up origin

The domain name created in the ScientiaMobile admin panel (see Preparations) will act as the origin in the Akamai configuration:

image15.png

Even if ImageEngine is specialized to optimize image traffic, ImageEngine will also handle non-image traffic. For example, if you serve all assets (images, JavaScript and CSS, from the same host it is safe to serve this through ImageEngine too. However, in many cases image traffic must be isolated first and then optimized by ImageEngine:

# Isolating the image traffic

  1. Log on to https://control.akamai.com, select your property and add a Blank Rule Template. You can name it “ImageEngine”
  2. Click “Add Match” and add a test on file image extensions. Or if you have other ways of identifying images, this is also fine. It is ok if some non-image files slip through. ImageEngine will serve this too.
    if [File Extension] [matches one of] ["jpeg","png","jpg","gif","webp","svg"]
  3. Add a behavior to append ImageEngine directives in the url which Akamai will request images with.
    1. Select Regular Expression Replacement
    2. Input (^.*) to find end of line
    3. input $1?imgeng={{user.PMUSER_FORMAT}}{{user.PMUSER_FORMAT}}{{user.PMUSER_DPI_CL}}. image4.png
    4. Add behavior to Modify Outgoing Request Header
      1. Action: Add
      2. Select header name: Other
      3. Custom header name : x-ie-proto
      4. Header Value: {{user.PMUSER_IE_PROTO}}
        image7.png
    5. Add behavior to Modify Outgoing Request Header
      1. Action: Add
      2. Select header name: Other
      3. Custom header name : x-ie-cdn-config-v
      4. Header Value: {{user.PMUSER_VERSION}}
        image8.png
    6. Add behavior to Set Variable
      1. Variable: PMUSER_WURFL_IS_WIRELESS
      2. Create Value From: Device Profile
      3. Operation: None
      4. Device Attribute: is_wireless
        image17.png
    7. Add a child rule named “Set Width”
      1. Add a Match for Variable
      2. Select PMUSER_WURFL_IS_WIRELESS
      3. Operator: is
      4. Expression: true
        image1.png
    8. Add a Set Variable behavior to the “Set Width” rule
      1. Variable: PMUSER_WURFL_WIDTH
      2. Create Value From: Extract
      3. Get Data From: Device Profile
      4. Operation None
      5. Device Attribute: resulution_width
        image5.png
    9. Add a Set Variable behavior to the “Set Width” rule
      1. Variable: PMUSER_WURFL_HEIGHT
      2. Create Value From: Extract
      3. Get Data From: Device Profile
      4. Operation None
      5. Device Attribute: resulution_height
        image13.png
    10. Add a Set Variable behavior to the “Set Width” rule
      1. Variable: PMUSER_WIDTH
      2. Create value from: Extract
      3. Get data from : Device Profile
      4. Operation: Substitute
      5. Regex: (^.*)
      6. Replacement: /w_$1
      7. Device Attribute: resolution_width
        image20.png
    11. Add a child rule named “check height” to the “set width” rule
    12. Add a match for the variable PMUSER_WURFL_WIDTH:
      if [PMUSER_WURFL_WIDTH] is less than PMUSER_WURFL_HEIGHT
    13. Add a set variable behavior
      1. Variable: PMUSER_WIDTH
      2. Create Value From: Expression
      3. Expression: {{user.PMUSER_WURFL_HEIGHT}}
      4. Operation: Substitute
      5. Regex:(^.*)
      6. Replacement: /w_$1
        image10.png
    14. Add a child rule named “check if empty” to the “set width” rule
      1. Add Match for variable PMUSER_WIDTH
        if [PMUSER_WIDTH] is empty
        image3.png
    15. Add a Set Variable behavior
      1. Variable: PMUSER_WIDTH
      2. Create Value from: Expression
      3. Expression: /w_1080
      4. Operations: None
    16. Add a child rule named “set dpiclass” to the ImageEngine rule
      1. Add a Match for Request Header if [DPR] exists
    17. Add a Set Variable behavior
      1. Variable: PMUSER_DPI_CL
      2. Create Value From: Extract
      3. Header name: DPR
      4. Opeartion: Substitute
      5. Regex: (^.{0,1})
      6. Replacement: /dpicl_$1
        image16.png

Supporting auto jpeg 2000 conversion

  1. Add a new child rule to the ImageEngine rule, name it “jpeg2000”.
  2. Add a Match for file extension and check if extension is one of jpg or jpeg:
    if [File Extensions] is not one of ("jpeg","jpg")
  3. AND a match for
    if [Request Header] "Accept" is not one of "*image/webp*"
  4. AND a match for
    if [Request Header] "Accept" is not one of "*/*"
    1. Important: click the gear and check the “wildcards in value” box 
      image14.png
      image11.png
  5. Add a new child rule the “jpeg2000” called “jpeg2000 UA”.
  6. Add a match for User-Agent:
    if [User-Agent] is one of ("*Safari/*") \ AND a match for
    if [User-Agent] is not one of "*Version/1.*","*Version/2.*","*Version/3.*","*Version/4.*","*Version/5.*","*Edge/.*"
    (Remember to check the “wildcards in value” box in the match settings.)
    AND a match for
    if [User-Agent] is one of ("*AppleWebKit/*") \ AND a match for
    if [User-Agent] is not one of "*Windows NT*","*Chrome/*"
  7. Add a Set Variable behavior with the following parameters
    1. Variable: PMUSER_FORMAT
    2. Create value from: Expression
    3. Expression: /naf_jxr_mp4_webp
    4. Operation: None
      image12.png
  8. Add another child rule to “jpeg2000” and name it “jpeg2000 Accept”
  9. Add a match for Accept request header:
    if [Accept] is one of *image/jp2*
  10. Add behavior “Set Variable” with these parameters
    1. Variable: PMUSER_FORMAT
    2. Create Value From: Expression
    3. Expression: /naf_jxr_mp4_webp
    4. Operation: None

Supporting auto webp conversion

  1. Add a new rule under the ImageEngine rule, name it “webp”.
  2. Check the request header for the occurence of “image/webp”
    if [Accept] is one of *image/webp*
  3. Add a Set Variable behavior with the following parameters
    1. Variable: PMUSER_FORMAT
    2. Create value from: Expression
    3. Expression: /f_webp
    4. Operation: None \

Supporting auto gif to mp4 and animated webp conversion

  1. Add a new rule under the ImageEngine rule set, name it “gif”.
  2. Add match for gif file extension:
    if [File Extension] is one of "gif"
  3. Add a Set Variable behavior with these values:
    1. Variable: PMUSER_FORMAT
    2. Create value from: Expression
    3. Expression: /f_gif
    4. Operation: None
  4. Add a new child rule under “gif”, mane it “mp4 Safari”
  5. Add match for User-Agent (remember to adjust “Allow wildcards in value” in settings):
    if [User-Agent] is one of "*Safari/*"
  6. AND Add match for User-Agent (remember to adjust “Allow wildcards in value” in settings):
    if [User-Agent] is one of "*Version/1?/*"
  7. AND Add match for User-Agent (remember to adjust “Allow wildcards in value” in settings):
    if [User-Agent] is not one of "*Version/1.*","*Version/10*","*Version/11*", "*Edge/*"
  8. Add a Set variable behavior with the following parameters
    1. Variable: PMUSER_FORMAT
    2. Create value from: Expression
    3. Expression: /naf_awebp_jxr_webp
    4. Operation: None
      image19.png
  9. Add a new child rule to “gif”, name it “animated webp”
  10. Check the request header for the occurence of “image/webp*”
    if [Accept] is one of *image/webp*
  11. Add a Set Variable behavior with the following parameters
    1. Variable: PMUSER_FORMAT
    2. Create value from: Expression
    3. Expression: /f_webp
    4. Operation: None

Supporting Client Hints

Client Hints are supported by Chrome and sent to origin domains if opted in. See ImageEngine documentation for more

  1. Add a new rule under the ImageEngine rule set, name it “Client Hints”.
  2. Add a match all for presence of request headers DPR and Viewport-Width.
    if [Request Header] "DPR" exists AND if [Request Header] "Viewport-Width" exists
    image22.png
  3. Add a Set Variable behavior with the following parameters
    1. Variable: PMUSER_CH_VP
    2. Create value from: Extract
    3. Get Data From: Request Header
    4. Header Name: viewport-width
    5. Operation: None
  4. Add a Set Variable behavior with the following parameters
    1. Variable: PMUSER_CH_DPR
    2. Create value from: Extract
    3. Get Data From: Request Header
    4. Header Name: DPR
    5. Operation: None
  5. Add a Set Variable behavior with the following parameters
    1. Variable: PMUSER_WIDTH
    2. Create value from: Expression
    3. Expression: {{user.PMUSER_CH_DPR}}
    4. Operation: Multiply
    5. Operand: {{user.PMUSER_CH_VP}}
  6. Add a Set Variable behavior with the following parameters
    1. Variable: PMUSER_WIDTH
    2. Create value from: Expression
    3. Expression: {{user.PMUSER_CH_DPR}}
    4. Operation: Multiply
    5. Operand: {{user.PMUSER_CH_VP}}
  7. Add a Set variable Header with following parameters
    1. Variable: PMUSER_WIDTH
    2. Create value from: Expression
    3. Expression: {{user.PMUSER_WIDTH}}
    4. Operation: Substitute
    5. Regex: (^.*)
    6. Replacement: /w_$1
      image21.png
  8. Add a new child rule to “Client Hints”, name it “width header”
  9. Add a match all for presence of request header Width.
    if [Request Header] "Width" exists
  10. Add a Set Variable behavior with the following parameters
    1. Variable: PMUSER_WIDTH
    2. Create value from: Extract
    3. Get Data From: Request Header
    4. Header Name: Width
    5. Operation: Substitute
    6. Regex: (^.*)
    7. Replacement /w_$1
      image2.png
  11. Add a new rule under the ImageEngine rule set, name it “Set Request”.
  12. Add a Modify Outgoing Request Path behavior wit the following parameters:
    1. Action: Regular EXpression Replacement
    2. Perl Compatible Regular Expression: (^.*)
    3. Replacement: $1?imgeng={{user.PMUSER_FORMAT}}{{user.PMUSER_WIDTH}}{{user.PMUSER_DPI_CL}}
    4. Occurrences: First occurrence only
  13. Add a Set Variable behavior with following parameters
    1. Variable: PMUSER_WURFL_DEVICE
    2. Create value from: Extract
    3. Get Data From: Device Profile
    4. Operation: None
    5. Device Attribute: brand_name
  14. Add a Set Variable behavior with following parameters
    1. Variable: PMUSER_WURFL_WIDTH
    2. Create value from: Extract
    3. Get Data From: Device Profile
    4. Operation: None
    5. Device Attribute: resolution_width
  15. Add a Modify outgoing Response Header behavior with following parameters
    1. Action: Add
    2. Select Header Name: Other
    3. Custom Header Name: X-IE-CDN-DEBUG
    4. Header Value: format: {{user.PMUSER_FORMAT}}, width: {{user.PMUSER_WIDTH}}, dpicl: {{user.PMUSER_DPI_CL}}, ie-proto: {{user.PMUSER_IE_PROTO}}, cfg-ver: {{user.PMUSER_VERSION}}, device: {{user.PMUSER_WURFL_DEVICE}}, wurfl-width: {{user.PMUSER_WURFL_WIDTH}}, wurfl_is_wireless:{{user.PMUSER_WURFL_IS_WIRELESS}}
      image18.png

 

Related articles

Comments

0 comments

Please sign in to leave a comment.