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 Documents and Media, Blogs, Web Content, and Content Pages to serve the optimal image resolution for the end user’s device. This reduces page size, improves load times, and saves bandwidth.
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.