Create a scaled thumbnail

Create a thumbnail image with the same aspect ratio as the original pristine source image.

A thumbnail image is just a small, scaled version of a pristine source image. You can automatically create a thumbnail using an Image and Video Manager policy. This reduces the number of images you need to store and maintain for your site.

Use the Derivative Widths setting in the Image and Quality section to create a thumbnail image.

Here's the image original image and the thumbnail we created for this recipe:

To create a thumbnail image, locate the URL of the image you want to use. The URL for this example is:

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

How to

Go to > CDN > Image and Video Manager.
Select a Contract and a Policy Set Name, then click Manage Policies.
Click Add New Policy.
The Name Your Policy window appears:
Enter thumbnail in the Policy Name field and click OK.
Enter 80, 120, 160, and 240 in the Derivative Image Widths (pixels) field to create the thumbnail sized image. Depending on how you created your web site and whether it is responsive, these thumbnail images might have various sizes. Work with your site design team to identify the standard breakpoints or use cases for thumbnails on your site. For this example we have four breakpoints total.

Note: These breakpoints maintain the aspect ratio of the source image. You can use the Fit and Fill transformation to place an image in a frame on your site’s page with a thumbnail and the Background Color or Crop transformation. See Resize images to fit an image grid.
Set your Derivative Image Quality to a setting that your business decided on. In this example you can set Perceptual Quality to Medium High. Be aware that setting Perceptual Quality may not be effective in this example because your images are small.
Save the thumbnail policy and push it to staging and production. Since the policy is new and there is no logic to call it yet, it should be safe to push to production.
There are two ways to displaycall the thumbnail policy. The first and simplest is to append a query string parameter to the end of the URL such as “?impolicy=thumbnail”. This would look like this: https://www.secretakamaibeaches.com/destinations/thumb/beach_thumb.jpg?impolicy=thumbnails
The following image appears:

Next steps

Another way to display the thumbnail image, is to use either the path or file name tell Image and Video Manager to use the thumbnail policy you created. You can do this if your site happens to follow a file path or file naming convention that is similar to this one. In our example URL, the beach_thumb.jpg is under a file directory called thumb and even has thumb in the file name itself. This allows you to leverage it within your delivery configuration. Many people structure their web sites this way to keep assets organized. For more information on displaying the images by by path or filename, see Display images using the path or file name. For more information using Image and Video Manager, see the Image and Video Manager Help.