Adobe Snapshot snapshot

Welcome to Adobe Snapshot. Snapshot is a visual testing and experimentation tool that helps you explore how dynamic media and smart imaging work together to deliver optimized images.

The first thing you’ll want to do when using Snapshot is select the dynamic media API you are using. This option is located at the top of the page and lets you switch between the AEM assets dynamic media open API and the original scene 7 APIs. Once you’ve selected the API type, the next step is choosing the image you want to work with in Snapshot. You have a few options here. You can choose from an Adobe provided set of sample images, upload an image from your local machine, or paste a dynamic media image URL that you want to experiment with. For this walkthrough, we’ll use an Adobe provided image. With an image selected, the preview URL at the top updates automatically. This URL points to the most optimal format of the currently configured dynamic media rendition. We’ll come back to what most optimal means when we discuss smart imaging. The first section of Snapshot is the dynamic renditions section. This is where you apply and configure dynamic media modifiers to the image. You can either start by selecting one of the preset renditions along the top or build your own by adding custom modifiers. You can add as many modifiers as you like. For example, let’s add the blur modifier. Once it’s selected, we can fine tune its values. If we increase the blur to 50, we immediately see the effect on the image in the previews below. Snapshot also supports custom dynamic compositing. This allows you to layer images and text together to create a new composite image without changing the original source asset. This is a powerful capability. For example, we can add a layer and swap the first overlay from a green badge to a red badge.

Just like with dynamic renditions, we can fine tune the settings. We can adjust the X position of the overlay to move it to the right side of the base image, and the updated composite preview appears below. We can always apply dynamic imaging modifiers to our layers, just like we could in dynamic renditions. Now let’s take a closer look at the smart imaging section of the page, which has been providing live previews of our dynamic renditions. This section gives us a live preview of our dynamic and composite renditions. Snapshot displays the active rendition in three different formats, along with each format’s file type, file size, resolution, and the percentage improvement compared to the original image. The smallest, most optimal format is highlighted in green and marked with a trophy icon. This is also the rendition the preview URL at the top points to, making it easy to copy and paste for use anywhere else, ensuring you’re always delivering the most optimized image. Below smart imaging are the smart crop renditions. Selecting one of these works just like choosing a predefined dynamic media rendition. Smart crops are simply shortcuts for creating crop-based dynamic renditions. When you select one, the smart imaging previews update automatically, and the dynamic rendition section is populated with the values used to generate that crop. Just like before, you can copy the preview URL to get a direct link to the smart crop rendition.

As you can see, Snapshot brings the power of dynamic media and smart imaging together in one place, making it easy to experiment, compare results, and see the real-world impact of dynamic media and smart imaging. Thanks for watching, and enjoy exploring Adobe Snapshot.