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.

Image optimization settings appear in the Policy Settings section of the Image and Video Manager Policy Editor.

Open your policy in Policy Editor

  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. In the Policy Settings section, 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.

  2. Set the quality value for the option you have chosen.

    If you selected Static, you can:

    • Use the System Default of 85, or
    • Type a fixed numerical value between 1-100 into the field, or
    • Select the variable containing the numerical value.

    If you selected Perceptual Quality, you can:

    • Select a qualitative fixed value from the list, for example, Medium High, or
    • 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.
  3. If you selected Perceptual Quality, set the Perceptual Quality Minimum. This is the minimum quality level of derivative images. Perceptual quality won't reduce quality below this value, even if an image with greater compression would be acceptably visually similar.

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

Enable the Slow Connection Quality Override

The Slow Connection Quality Override 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.

Prefer Modern Formats

The default behavior of Image and Video Manager is to serve the image with the fewest bytes possible that is of acceptable quality as defined in the policy. In some instances, this means that the image served will be an older format like JPG or PNG. This feature allows you direct Image and Video Manager to preferentially select a modern image format like AVIF or WEBP, provided that they are allowed by your policy. Enabling this feature means that even if a JPG, PNG, or other classic format derivative is fewer bytes than the modern format derivatives, the best modern format image will be served.

This feature applies only to offline image derivatives, not the real-time images that are served until offline derivatives are available.

By default, Prefer Modern Formats is set to False. To enable this feature, set it to True.

📘

Even with this feature enabled, you may still see older image formats like JPG if your client doesn't support modern formats like WEBP and AVIF.

Set Derivative Widths

When Image and Video Manager receives a request, it serves the derivative image with the width that best suits the requesting device's display. Derivative widths are the breakpoint widths, in pixels, of the Image and Video Manager generated derivatives.

In the Derivative Widths text box, enter the image width breakpoints for the devices that are likely to access your website or application. To add a breakpoint, type it in the text box and press Enter. To delete a breakpoint, click the X.