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:
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.