This article is a primer intended to give you an overview of Liferay 7.1 Adaptive Media. This blog post should give you an idea of what Liferay’s adaptive media is and how to use it. The administrator can define multiple image resolution rules, while the content editor creates a web content or blog and upload an image. The Liferay 7.1 Adaptive Media application generates images based on the rules you have defined. When displaying images from your web content, blog posts, or other Liferay apps, Adaptive Media checks the screen type and resolution and select the appropriate quality image for the device.
Benefits of using Liferay 7.1 Adaptive Media
Why is it a good idea to use Liferay 7.1 Adaptive Media? As a front-end developer, we need to consider responsive design for different screen sizes and devices. A common technique without using Liferay’s Adaptive Media feature is to create multiple images with different sizes and resolutions for different devices on your own. After creating the images, we need to write code using media queries or other techniques to check screen size and device type for selecting the right image. With Adaptive Media, all this work is done for us! We only need to create image resolution rules base on the use cases, the app generates a set of images based on the rules.
Liferay 7.1 Adaptive Media can save a UI developer, Graphic Designer, Content Author and Site Administrator loads of time over the long haul. There’s another added benefit here in that images delivered from Web Content or Blogs will automatically be delivered at the correct image quality without coding! When web content or blog is loaded on Liferay pages, the app checks the device and screen and selects the appropriate image for the end user.
Another huge benefit of using Liferay 7.1 Adaptive Media ultimately comes down to performance. Not just the time/performance of the people involved, but the core network and computer systems that deliver your sites and applications also win with Liferay 7.1 Adaptive Media. Since images are tailored to the specific device and/or amount of real estate available, your Liferay instance will deliver lighter-weight images when there is no benefit of delivering the larger full-sized image. Furthermore, you have control over the configuration that determines when this happens.
What types of sites should use Liferay 7.1 Adaptive Media?
Using Liferay 7.1 Adaptive Media is considered a best practice. It does not take much upfront effort to add the configuration, but since configuration will vary from site to site, Liferay only includes a single configuration out of the box.
In this configuration, you will define each of the breakpoints you’re using in your site(s). Be sure to account for common breakpoints for mobile devices in landscape and portrait in addition to common desktop resolutions.
What does an existing site need to do to prepare for using Liferay 7.1 Adaptive Media?
If it’s not already installed in your Liferay 7.1 environment, you can also download and install it from the Liferay Marketplace. After installing Adaptive Media, the administrator can define resolution rules for images from control panel and you’re on your way! Here is a step-by-step example to walk you through a practical scenario using Liferay 7.1 Adaptive Media
Original testing image: size is 2.98 MB, Width is 4928 pixels, Height is 3264 pixels
- When your Liferay server is up and running, go to the Control Panel > Configuration > Adaptive Media section. By default, it has one resolution rule – Thumbnail 300×300. This rule sets max width to 300 pixels and max height to 300 pixels.
- Create a piece of web content using the large image we prepared. We can use the image upload button to select the image from our local hard drive.
- After creating the Journal Article, add the content to a page. The resolution of my monitor is 1920 x 1080. The dimension of my web page when maximized in Chrome browser is 1903 x 1730(calculated by the browser developer tool).
Inspect the image element using the developer tool. You can see image size on the webpage is 1174 x 777. We didn’t set any fixed width or height to the image, width is 100% of its container, height is auto.
- Test image when page width is 300px. Open the developer tool and enable responsive mode, reduce the screen width to 300px. Inspect the image element using developer tool. We can see that the image source has changed, when the page size is > 300px, the image source is 4928 x 3624, once the page size is <= 300px, image source is 300 x 199.
If we need more adapted image for different screen sizes or device real estate, we can create more resolution rules as needed.
Liferay 7.1 Adaptive Media tailors media in your digital experience platform to the device consuming it. Since users often visit your site or application on multiple devices that have different screen sizes and capabilities, you should make sure your platform presents media in a manner suitable for each device. For example, administrators can configure the Adaptive Media app to send high-res images to high-res devices, low-res images to low-res devices, and so on. This ensures that your users have the best possible experience when consuming your image media.