Optimizing Image Resources

Images are a core design asset, but serving a single resolution across different types of devices can degrade website performance. Optimizing image resources is a strategic business decision that can improve not only website performance, but also user experience. Clarity wants its users to have a seamless experience with its web solution regardless of the devices they use. To that end, Liferay provides Adaptive Media to help mitigate performance issues related to image resources. 

Using Adaptive Media

Adaptive Media processes images stored in your Liferay instance to produce copies at different resolutions. Once generated, you can serve the appropriate resolution to users based on their device. This reduces page size, improves load times, and conserves bandwidth in most cases.

By default, Adaptive Media creates preview and thumbnail resolutions. However, you can define additional resolutions to optimize performance for common devices. Then, whenever an image is uploaded, Adaptive Media automatically generates new versions for the defined resolutions, all while maintaining the original aspect ratio. You can then add the image to a page, and the correct version will be loaded depending on the target screen size.

While powerful, adaptive media can strain computational resources and storage space. To mitigate impact, you can configure processing based on available system memory. Also, Liferay recommends limiting your usage of adaptive media whenever possible. To minimize storage demands, consider storing alternate image resolutions on a content delivery network (CDN) instead of an asset library.

Conclusion

Optimizing image resources is an important part of managing design assets. As Clarity’s solution grows, they need to consider different possible end user devices to provide the most seamless experience.

Next you’ll review what you’ve learned before moving on to the next module.