Guide
TrainingSupportCommunity

Create a scaled thumbnail

Suggest Edits

A thumbnail image is just a small, scaled version of the original image. You can automatically create a thumbnail image with the same aspect ratio as the original image using an Image and Video Manager policy. This reduces the number of images you need to store and maintain for your website.

Example of the impact on images

Here's an example of an original image and the thumbnail that was created using an image policy.

Original image:

original image

With image policy applied:

thumbnail

📘

Before you begin, you should know the URL of the image you want to crop, for example: 

https://www.secrettropicalbeaches.com/destinations/thumb/beach_thumb.jpg

How to

  1. Log in to ​Akamai Control Center​, then go to ☰ > CDN > Image and Video Manager.

  2. Select the correct Contract from the list.

  3. Create a new policy:

    • Click +Create, then click Policy on the menu that appears.
    • Select the policy set to which you wish to add the new policy.
    • Give your new policy a name, for example, "thumbnail".
    • Click Create.

    The Image Policy Editor opens.

  4. Click to expand the Image and Quality Settings section, then select Derivative Widths.

  5. Enter the derivative image widths in pixels, for example, 80, 120, 160, and 240 px.

    You may need to add multiple derivative widths for different thumbnail sizes, depending on how your website was created and whether it's responsive. Work with your website design team to identify the standard breakpoints and use cases for the thumbnails on your website.

📘

These breakpoints maintain the aspect ratio of the source image.

  1. Under Image and Quality Settings, select Derivative Quality.

  2. Set the derivative image quality to the type and level your company has chosen, for example, Perceptual Quality and Medium High.

  3. Click Save and Test on Staging.

  4. Apply the impolicy query string parameter to the end of the URL for the image you want to make into a thumbnail, for example: 

https://www.secrettropicalbeaches.com/destinations/thumb/beach_thumb.jpg?impolicy=thumbnail

📘

Use the path or filename

As an alternative to the impolicy query string parameter, you can use either the path or file name to tell Image and Video Manager to apply your thumbnail policy. See Display images using the filename or path for more information.

Updated 10 months ago