What is Liferay Adaptive Media?
Liferay Adaptive Media is a powerful feature within the Liferay Digital Experience Platform (DXP) that automatically optimizes images and media content for faster delivery across different devices. This tool intelligently resizes, compresses, and serves images based on the device's screen size, resolution, and bandwidth, ensuring users experience faster load times without compromising the quality of media.
How Liferay Adaptive Media Improves Website Speed?
Liferay Adaptive Media helps websites deliver optimized media content, resulting in faster load times. Here's how:
- 1. Automatic Image Resizing: Adaptive Media automatically adjusts image sizes based on the user's device, reducing unnecessary data usage without affecting visual quality.
- 2. Image Compression: The feature intelligently compresses images to balance quality and size, ensuring they load quickly without sacrificing detail.
- 3. Lazy Loading: Adaptive Media uses lazy loading to delay the loading of images and media files until they're needed. This means users only download media that is visible on their screens, reducing initial load times.
Liferay Adaptive Media is a game-changer for businesses looking to optimize their websites for speed and mobile performance. By automatically optimizing images, videos, and other media content, it ensures that your site loads faster, performs better, and provides a seamless user experience on all devices.
- Faster Load Times: Optimizes media for faster delivery without sacrificing quality.
- Mobile Optimization: Automatically adapts images and media for mobile devices, enhancing the user experience.
- SEO Benefits: A faster website can lead to improved SEO rankings and enhanced search engine visibility.
How to Use Liferay Adaptive Media?
Implementing Liferay Adaptive Media in your Liferay DXP environment is a relatively straightforward process. It involves configuring the platform to automatically optimize media based on the device, size, and bandwidth. Here's how to get started:
Define the image variant you want to use
- Go to the Control Panel, and click Adaptive Media.
- * Add a unique name and description.
- Define Max Width and/or Max Height in pixels.
- Enable/disable adding a resolution for high pixel density displays. This resolution uses the same name as the current resolution and adds the -2x suffix to it.
- Keep the identifier Automatic if you are not using third-party APIs for changing image resolutions.
i.e, we can add different variants according to our screen size. Let's say we can define Max Width 480px-767px for mobiles, 767px to 1024px for tablet, and after that for desktops as well. We can add as many variants as we want to use.
Now click on actions for that variant and click on Adapt Remaining or if we don't want to do this one by one, we can select the action button on Adaptive media and can use Adapt All Images.
This may take some time because Liferay is adding variants for all the images available in your system. As this process is finished we can move on further.
If you have defined multiple variants and want to use only few of them according to your need ? You can disable or enable them anytime from actions.
Use this variant in ADT / Web content pages
Let's say we have a web-content which have an image field named as HeroBanner. To use adaptive images for HeroBanner, we can write the code as:
<#if HeroBanner.getData()?? && HeroBanner.getData() !="">
<img data-fileentryid="${HeroBanner.getAttribute("fileEntryId")}" alt="${HeroBanner.getAttribute("alt")}" src="${HeroBanner.getData()}" />
</#if>Now you are all set. You can see the changes in your HeroBanner images.
Notes:
- You cannot edit a resolution's size and identifier if Adaptive Media has used it to generate adapted images.
- Be careful when deleting image resolutions. Once deleted, the resolution's adapted images are irretrievably lost and are not replaced automatically by new image resolutions you create.
- Adaptive Media doesn't work with images added from the URL tab in the file selector for both blog entries and media content articles.
- Adaptive Media, which is included by default starting with DXP 7.1+. If you're upgrading from an older version that didn't support Adaptive Media and want to manage your thumbnails using this feature, reference.
Limitations of Liferay Adaptive Media and How to Overcome Them
This solution is highly effective for scenarios involving full-width images, such as full-screen banners or carousels, where the image spans the entire viewport. However, in our specific use case, we typically do not utilize full-screen images. Instead, layouts often feature images that occupy half or less of the screen width, typically alongside textual content.
In such cases, Liferay Adaptive Media does not automatically adjust the image resolution based on the actual rendered size within the layout. As a result, images may be served at higher resolutions than necessary, impacting performance.
To address this, a custom implementation is required to ensure image variants are dynamically selected based on the rendered dimensions in the layout. This can involve custom taglibs, responsive image handling in templates, or additional frontend logic.
If you're interested in implementing this level of optimization, feel free to contact us for further guidance or consultation.
