Optimize images using Dynamic Media with OpenAPI Capabilities Optimize-images-using-Dynamic-Media-with-OpenAPI-Capabilities
Dynamic Media with OpenAPI capabilities offers image optimization capabilities such as Smart Crop, Image Presets, and Smart Imaging. These capabilities help deliver high-quality, responsive images that load fast across different devices and networks.
Smart Crop smart-crop-using-dynamic-media-with-openapi-capabilities
Smart Crop is a dynamic sizing capability of Dynamic Media with OpenAPI capabilities. Smart Crop is an advanced image processing technique that uses AI-powered content-aware cropping to intelligently crop images for various screen sizes while preserving the visual context in cropped versions. The AI analyses the image to identify the focal point or intended point of interest, and then automatically crops the image to retain the focal point in all the cropped versions. Smart Crop, a key element of responsive design, provides a cost-effective and time-efficient way to crop images.
See the Dynamic Media Image Profiles article to learn how to create Smart Crop renditions in Admin View, apply them to folders, or edit renditions already applied to an image or a folder. Learn to create a Smart Crop step by step in this video.
The Smart Crop parameter expects that named-smartcrop-profiles exist and have been applied to the asset. See Smart Crop profiles to learn more about the Smart Crop parameter and how named Smart Crop profiles are applied.
Image presets image-presets-using-dynamic-media-with-openapi-capabilities
Transform images on the fly using Image Presets capability in Dynamic Media with OpenAPI capabilities. An image preset is a predefined set of sizing and formatting rules for an output image.
Dynamic Media with OpenAPI capabilities uses preset names to transform an image on the fly and generate its rendition instantly. When you request an image through a Dynamic Media with OpenAPI delivery URL that includes a preset parameter, DM with OpenAPI applies the preset’s transformations, creates the rendition on demand, and delivers it to the user.
You can apply a single preset to multiple images through their Dynamic Media with OpenAPI delivery URLs. This ensures consistent formatting across assets without manually editing each one.
See managing Image Presets article to learn how to create image presets in Admin View, and how to create responsive image presets that automatically adapt assets to fit different screen sizes.
Benefits of using Image presets benefits-of-image-presets
Image Presets provide several advantages for managing and delivering images in Dynamic Media with OpenAPI. Some of the key benefits include the following:
- Presets make image delivery URLs shorter. Instead of adding multiple image modifiers that make the delivery URL longer, use a single preset. Shorter URLs are easier to manage and ensure consistent image delivery across websites, mobile apps, emails, and other channels.
- Image presets create just-in-time renditions from a source image file. This on-demand rendition generation capability eliminates the need to create and store multiple static renditions of the same file, saving both time and storage.
- Apply a single preset to a large set of assets at once, avoiding manual edits to each asset individually, ensuring consistent formatting, and enabling scalability.
- When you update a preset’s parameters, all images using that preset are reformatted automatically. This streamlines editing by centralizing formatting updates, eliminating the need to re-edit individual assets or web code.
- Improves efficiency and performance with dynamic renditions cached by the CDN, resulting in faster loading and optimized performance across devices and networks.
Use Image presets use-image-presets-using-dynamic-media-with-openapi-capabilities
After creating the Image Presets, you can use them for the following workflows:
Use presets in image delivery URL use-presets-in-delivery-urls
Presets make your delivery URLs shorter and easier to use. Each preset name serves as a unique identifier in the delivery URL. Instead of adding multiple modifiers to an asset’s delivery URL, reference the preset name to generate its rendition instantly. Learn to appply Dynamic Media Image Presets to your image.
The following example compares a URL with a preset to a URL without a preset.
URL without a preset (long URL):
https://delivery-p30902-e145436-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:393d5579-5be2-49a5-ac5f-8fed72bfb614/as/AdobeStock_63266433.avif?width=400&height=300&fit=crop&qualit=85&sharpen=true
URL with a preset (short URL):
https://delivery-p30902-e145436-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:393d5579-5be2-49a5-ac5f-8fed72bfb614/as/AdobeStock_63266433.avif?preset=thumbnail
The preset thumbnail bundles the same image modifier settings.
Use presets during authoring in AEM Sites use-presets-during-authoring-in-aem-sites
Authors can select Image Presets during page editing in AEM Sites authoring page when Dynamic Media support is enabled.
Execute the following steps to use image presets in your authoring page:
- Navigate to your Sites authoring page.
- Execute the steps in Access remote assets in AEM Page Editor section to use the Asset Selector panel for selecting an asset.
- In the asset selector panel, scroll down to Preset type, and specify
Preset=Preset Namein the Image Modifiers field and click Done.
Smart Imaging use-smart-imaging-using-dynamic-media-with-openapi-capabilities
When you use Dynamic Media with OpenAPI capabilities for image delivery, images are automatically optimized through Smart imaging. Optimized delivery ensures images load faster, have maximum visual quality, and minimal file size. This results in the fastest page loads and consistently high visual quality across devices and networks, while consuming minimal bandwidth, making your website faster and more responsive.
Smart Imaging includes the following capabilities:
Auto format conversion auto-format-conversion
Dynamic Media with OpenAPI automatically converts images to modern, web-optimized formats such as AVIF or WEBP. The conversion depends on the browser’s capabilities and license-entitlement, regardless of the requested format.
AVIF and WEBP formats provide better compression, making images smaller and faster to deliver and load. AVIF is used as the default format as it handles all the browser capabilities.
Dynamic Media with OpenAPI uses the auto-format query parameter to control the behaviour of browser for coverting an image to various formats for optimized delivery. Auto format conversion includes auto promotion and auto demotion. When the system promotes a web-optimized format (AVIF or WEBP) over JPEG or PNG for delivery, it is called auto-promotion.
By default, the auto-format query parameter is set to true. When auto-format is enabled (true), the system ignores the requested format and automatically selects a web-optimized format (AVIF or WEBP) based on image characteristics, browser capabilities, and license-entitlement.
When auto-format is true, the system delivers the image format in the following sequence:
- AVIF: AVIF is delivered if the browser supports it and the license allows it. This is called as auto promotion.
- WEBP: WEBP is delivered if AVIF is not supported or licensed. This is also auto promotion.
- JPEG: JPEG is delivered only when AVIF and WEBP are unsupported, and the image has no alpha channel (transparency). This is called as auto demotion.
- PNG: PNG is delivered when the browser does not support modern formats and the image has alpha channel (transparency). This is also called auto demotion.
Disable auto-format by setting the query parameter to false, then specify the required format to get the image delivered in that format.
Network bandwidth optimisation network-bandwidth-optimisation
Images are automatically optimized based on the client’s network conditions to ensure faster delivery and smooth loading. The Quality and Max-quality parameters automatically adjusts the quality by controlling the image compression levels, with values ranging from 1 to 100.
See the following key behaviors of quality and max-quality parameters:
- If both quality and max-quality are specified, quality takes precedence.
- If only quality is specified, the quality is delivered regardless of load time based on network speed.
- If only max-quality is specified, the image quality adjusts automatically based on network conditions, delivering the best possible quality up to the specified max-quality value.
- If neither is specified, the system applies dynamic optimization with a default
max-qualityof85.
Quality parameter quality-parameter
The quality parameter prioritizes image quality over loading speed. It fixes the output image quality to the requested value (between 1 and 100) and ignores network conditions. Learn more about the quality parameter.
Max-quality parameter max-quality-parameter
Max-quality balances image quality and load time based on the client’s network speed. It prioritizes faster load times by lowering image quality on slower networks, while still delivering the highest possible quality (1–100) for the given network conditions. Learn more about the max-quality parameter.