Image and Video Manager uses multiple permutations (called derivatives) of an original pristine image or video to optimize and deliver high-quality visuals, regardless of the device or browser making the request.

Retail website example

To illustrate how this works, take the example of a retail website which may require three versions of an image for each product: the small thumbnail that appears in the search results, the larger "quick view" image on the product details page, and the high-resolution, full-size version that appears when you click the "quick view" image. The company would need to create three image files for every product. For example:

• myproductThumb.jpg
• myproductQuickView.jpg
• myproductZoom.jpg

Using Image and Video Manager, the company can create one policy that defines the appearance of a product thumbnail ("thumb"), a second policy that defines the appearance of a quick view image ("qv"), and a third policy that defines the appearance of a full-sized image ("zoom"). Once these policies are in place, the company need only manage a single image file per product: myproduct.jpg. Image and Video Manager will apply the policies to create and serve three derivative versions of the product image.

Now consider the number of different devices and browsers that could be used to access the website. Image and Video Manager will also automatically generate and serve the image width and format best suited to the requesting device and browser.

Features that can be applied to images and videos

When your website receives a request for an image or video, Image and Video Manager checks for a matching Image and Video Manager rule. If a matching rule exists, appropriate features are applied.

Image and Video Manager features can be divided into two types:

• Features in your Property Manager configuration such as "Automatic breakpoint selection", which serves a derivative in the best width for the requesting device, and "Use Best File Type" which serves a derivative in the best format for the requesting browser. No further configuration is needed for these features.

• Features in your policy such as breakpoint widths, derivative quality, quality value override for slow connections, and artistic image transformations such as cropping, rotation, color adjustment, and watermarking. To use these features, you must define a policy (via either the Image and Video Manager Policy Manager or the Image Manager API) and apply it using a parameter. Only one policy can be applied to a single image or video URL.

When a user visits your website

When a user accesses a page on your website containing an image or short-form video, the following occurs:

1. Image and Video Manager checks if the received request matches a Property Manager rule.

2. If a matching rule is found, Image and Video Manager checks for an existing derivative image cached on the CDN. If the correct derivative image already exists, this existing image is served.

3. If the derivative image does not yet exist:

   1. Image and Video Manager generates a set of derivative images with the size, quality level, and transformation specifications from the policy.

   2. Image and Video Manager applies the scale and format settings to the image or video as defined in the Property Manager rule.

   3. The correct derivative image is served.