Dynamic Media Snapshot snapshot
Dynamic Media Snapshot is a visual demonstration tool, designed to illustrate the power of Dynamic Media for optimized and dynamic image delivery. Experiment with test images or Dynamic Media URLs, to visually observe the output of various Dynamic Media image modifiers, and Smart Imaging optimizations for file size (with WebP and AVIF delivery), network, and Device Pixel Ratio (DPR).
Transcript
Welcome to Snapshot, a testing environment and demonstration tool designed to illustrate the power of dynamic media and smart imaging, Adobe’s automated image optimization feature. Smart imaging extends and complements dynamic media’s powerful image creation on-demand delivery by producing the smallest and best-looking image, eliminating the need to solve for browser image support variability. Dynamic media’s image serving versus classic web serving offers tremendous advantages and efficiencies since images are created upon request. Dynamic media images render in milliseconds and are always delivered from the CDN edge cache. Snapshot allows us to easily visualize different image commands and the resulting images created from those commands and the best practice of letting smart imaging determine the most optimized file format for you, automatically. Snapshot is the best tool for learning, experimenting, developing and testing dynamic media queries. Snapshot’s default 3-Up interface shows the reference image on the left and two smart imaging optimized versions to the right. Optimized versions are smaller in image size, allowing for faster page loading. It is useful to see the effects of smart imaging applied to a variety of image styles. Scroll to the bottom of the page and click on any of the test images to see the results. Browser format conversion is off on the left reference image and on in the other two panels. Browser format conversion, BFC, is the main smart imaging feature that automatically produces the smallest image size and format compatible with the user’s browser. The modifiers drop-down menu shows a few examples of the many dynamic media image modifiers. Choices made here will add to the list of image effects that are being applied to the images. Smart imaging can also respond to the available network bandwidth by automatically reducing image size to accommodate slower network conditions. Set the network modifier to poor to observe smart imaging produce smaller images automatically. The DPR feature produces the right number of pixels with respect to the user’s screen resolution in order to produce the highest quality image at the expense of larger image sizes. You can also enter any dynamic media enabled URL to compare smart imaging’s benefits. Snapshot is a powerful way to demonstrate the value of dynamic media.
a483189e-e5e6-49b5-a6dd-9c16d9dc0519