Optimizing Digital Assets

Asset optimization is the practice of reducing the size of media files (e.g., images, videos) without sacrificing quality. For media-heavy websites, this is a critical step for improving overall site performance and delivering a better user experience. Benefits include faster load times, improved SEO, and lower storage costs.

This lesson explores key techniques for optimizing images and videos in Liferay.

Optimizing Images

Image optimization is a critical part of managing any media-heavy website, such as a public storefront or intranet. Because images often make up the bulk of a page's total file size, they have the most significant impact on load times and performance. To get the most out of your images, you can employ several key techniques.

Choose the Right Image Format and Size

The first step in optimization happens before you even upload a file. Strategically selecting the right formats and resolutions are fundamental to smooth performance. When preparing your files for upload, consider these factors:

• JPEG/JPG: Use for smaller, static images. Because of their lossy compression, resizing JPEG images may reduce their visual quality.

• PNG: Use for larger, transparent images. PNG files use lossless compression, which maintains the image’s visual quality when resized.

• WebP: Use as a high-performance alternative to JPEG and PNG. This format generally provides superior compression with similar quality levels.

• AVIF: Use for achieving the smallest possible file sizes, but always verify that your target audience's browsers are compatible before using it exclusively.

• GIF: Use for simple animations and to potentially replace short videos. However, keep in mind that GIF files have lower quality, as they only support 256 colors.

• SVG: Use for branding logos and icons. Unlike the other formats (e.g., JPEG, PNG), SVG files are vector-based. This means they can be scaled to any size without losing quality.

In addition to format, ensure images are correctly sized for their intended purpose. For example, if you’re rendering an image within a 200px square element, your image should be exactly 200px by 200px. To achieve the optimal resolution, check the maximum dimensions of the image’s container at the page’s largest supported screen size. This ensures the image won’t degrade when changing the screen size.

Leverage Adaptive Media and Lazy Loading

Liferay provides out-of-the-box features for optimizing images within the platform. These tools help enhance performance and ensure your images are delivered efficiently to different devices.

• Adaptive Media: Automatically generates copies of your uploaded images at predefined resolutions. Liferay then dynamically serves the most appropriate version based on the user’s device (e.g., sending a smaller, lower-resolution image to a mobile phone). Alternatively, you can force a specific resolution for all devices. While this is a powerful tool for responsive design, it increases storage use and computational resource costs, so it should be used strategically.

• Lazy Loading: Configures images to render only when they’re visible in the viewport (i.e., the user’s current visible area), greatly improving page load times. You can enable Lazy Loading for Image fragments.

With these features, you can implement responsive design to accommodate different devices and enhance content rendering for your website. To learn more about Adaptive Media and lazy loading, consider taking the Mastering Liferay Design Elements course.

Optimizing Videos

While images are a more common element, video optimization is just as important for ensuring they play smoothly on all devices and contribute to a positive user experience. Video and image optimization techniques are conceptually similar, but differ in specific key points.

Host Videos Externally

Liferay highly recommends hosting your videos on external, dedicated streaming platforms and linking to them using external video shortcuts. This approach helps avoid system resource strains and oversized files.

There are two methods for leveraging videos hosted on third-party platforms: 

• Fragments: Use the External Video or Video URL fragments to embed external videos on a page. While both fragments function similarly, the Video URL fragment includes additional video controls for autoplay, loop, and mute.

• Video Shortcuts: Create external video shortcuts in Documents and Media. You can then leverage external video shortcuts in other Liferay applications, including fragments, web content, and search.

Liferay’s external video shortcuts support YouTube, Vimeo, Facebook, and Twitch by default. While you can create custom shortcut providers, it requires specialized technical knowledge. See Creating Video Shortcut Providers for more information.

Choose the Right Format and Resolution

When you must host a video file directly in Liferay, it's critical to choose the right format and resolution to balance quality and file size.

• Video Format: Opt for the MP4 file format, since you can display it on Liferay pages using the Video URL and External Video fragments. MP4 files encoded with H.264 for video and AAC for audio ensure better compatibility.

• Video Resolution: Avoid using high resolutions like 4K unless there is a specific business requirement. For most web use cases, 720p or 1080p provides an excellent viewing experience at a much smaller file size.

By choosing the optimal format and resolution, you can improve performance without compromising quality.

Set Maximum Video File Size Limits

To enforce your optimization guidelines, administrators can configure maximum file size limits for different media types at different scopes (e.g., site-level, instance-level). Establishing a limit for video files helps reduce storage use and site latency by preventing users from uploading unnecessarily large files. While setting these limits is a task for system administrators and beyond the scope of this course, it's an important governance capability to be aware of. To learn more, see Limiting File Size.

Leverage Video Streaming on Dedicated Pages

Video streaming breaks the video file down into small packets of data, which are progressively downloaded by the user’s device. Out of the box, Documents and Media provides default friendly and view URLs for each asset. Typically, the formats for both URLs resemble this:

• Friendly URL: https://www.clarityvisionsolutions.com/documents/d/clarity/sunglasses.mp4

• View URL: https://www.clarityvisionsolutions.com/web/clarity/d/sunglasses.mp4

Accessing the friendly URL downloads the file, while the view URL renders the asset on the associated display page template. For videos, it’s best practice to leverage the view URL to stream videos on dedicated pages to improve loading times and reduce bandwidth resources.

Using a Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a distributed infrastructure for caching static, file-based content. It loads assets from the server closest to the user, reducing buffering and accelerating cache requests. Using a CDN is best practice for optimizing your website’s videos and images.

Liferay provides a CDN out of the box for Liferay PaaS and Liferay SaaS customers. While you can connect a CDN to your Liferay Self-Hosted instance, a deep explanation of this process is beyond the scope of this course. To learn more, see Using a CDN.

Clarity’s Asset Optimization Strategy

Clarity plans to display marketing images across their website, including within their structured web content. Additionally, as Clarity expands their distributor resources, they want to create short, how-to videos. To maximize efficiency, they’ll upload their images and videos while considering their optimal format, size, and resolution. While Clarity doesn’t have current plans to host videos externally, they plan to do so in the future.

Conclusion

Asset optimization is crucial for delivering an engaging, smooth digital experience. By planning how to optimize heavy assets like images and videos, you can future-proof your solution and increase performance.

Next, you’ll optimize Clarity’s digital assets.