Optimize your images

After you have created your policy, you can configure image optimization settings to reduce the byte size of the derivative images generated and delivered by Image and Video Manager without significantly impacting visual quality. You can also adjust for different requesting device types and slow connections. These optimizations can help you to achieve your web performance goals.

Open your policy in Policy Editor

👍

New Policy Manager UI

These instructions reflect the new beta version of Policy Manager. If you are using the original version, some things may have changed. To try the new beta, click Switch to BETA.

  1. In the ​Akamai Control Center​, go to > CDN > Image and Video Manager.

  2. Select the correct contract.

  3. Expand the policy set containing the policy you want to edit.

  4. Open the Actions menu for the policy and select View/Edit policy on staging.

    The Image Policy Editor appears.

Set the derivative image quality

  1. Expand Image and Quality and Settings.

  2. Click Derivative Quality.

  3. Select the Quality Type.

    • Static. Allows you to set a static quality value between 1 and 100.

    • Perceptual. Allows you to set a qualitative value ranging from high to low. Perceptual quality lightens the weight of your images through a reduction in visual quality that is imperceptible to the human eye.

  4. Set the Quality Value to Static or Perceptual.

    If you selected Static, you have the following options:

    • Use the System Default of 85
    • Type a fixed numerical value into the field
    • Select the variable containing the numerical value

    If you selected Perceptual Quality, you have the following options:

    • Select a qualitative fixed value from the list, for example, Medium High
    • Select the variable containing the qualitative value

    The higher the numerical or qualitative value, the higher the quality of the resulting derivative images, but the lower the byte savings.

👍

Create a perceptual quality preview to see what your images will look like after the perceptual quality setting is applied.

Enable the quality value override for slow connections

The Quality Value Override for Slow Connections allows you to specify a fixed (static) quality value between 1 and 100 which will be applied to image processing when users access your website over a slow connection. This fixed value overrides the static or perceptual quality value you set, but only for those users. There is no impact on the quality of images for users with standard connections.

This means that lower quality images will be displayed for customers when the client round trip time (RTT) is 300ms or greater. The RTT is the amount of time, in milliseconds, it takes a request to go from a client to an edge server and back again. Lower quality images result in faster page loading time.

📘

The override value is also applied to images delivered to mobile devices if the user has data saving functionality turned on (the Save-Data header is enabled). The lower quality image is delivered even if the network connection is not slow.

👍

For more information about this setting, see the use case Adapt for slow connections.

Set the derivative image widths

  1. Under Image and Quality and Settings, click Derivative Widths

  2. Add the image width breakpoints for the devices likely to access your website or application. Type the first breakpoint in the text box and press enter, then repeat for any additional breakpoints. Common breakpoints are 320, 640, 720, 1024, and 1080 px.


Did this page help you?