Using Adaptive Media
Liferay 7.4+
Liferay Adaptive Media processes images stored in the document library to produce copies at different resolutions. Once generated, you can use the adapted images in the Documents and Media application, blogs, web content, and content pages to serve the optimal image resolution for the end user’s device. In most cases, this reduces page size, improves load times, and saves bandwidth.
Adaptive Media improves performance by optimizing image sizes, but adapting formats like webP or AVIF may increase file sizes or convert them to PNG for better browser compatibility.
By default, Adaptive Media includes preview (1000px auto) and thumbnail (300px/300px) resolutions, but you can define additional resolutions. Adaptive Media then listens for when users upload supported media types and begins parallel, asynchronous processes for generating the alternative image sizes. The new images are linked to the original image and scaled to fit your set resolutions while maintaining the same aspect ratio.
Adaptive Media supports these Commerce widgets: Search Results, Product Details, Product Publisher, Mini Cart and component, and Checkout.
If you have upgraded to the latest DXP version from a legacy version that did not support Adaptive Media, you can migrate existing Documents and Media thumbnails to new Adaptive Media defined Image Resolutions; see Migrating Documents and Media Thumbnails.