Create a Thumbnail Retaining the Original Aspect Ratio

Before you begin

To create a thumbnail with the same aspect ratio as your original image, locate the URL of the image for which you want to create a thumbnail. For example, if you want to create a thumbnail for the following image:

Find that the URL for the above image is:

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

Now create a policy in Image Manager called thumbnail.

How to

  1. Go to > CDN > Image Manager.
  2. Select a Contract and a Policy Set Name, then click Manage Policies.
  3. Click Add New Policy.
    The Name Your Policy window appears:
  4. Enter thumbnail in the Policy Name field and click OK.
  5. 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 an Image to Fit in an Image Grid.
  6. 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.
  7. 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.
  8. 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 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 Manager, see the Image Manager Help.