Drupal
Enhancing the Drupal Media Experience using WebP, Lazy Loading, Image Widget Crop, and more
Drupal, a CMS known for its flexibility and powerful content management capabilities, offers an impressive suite of tools for media management, both in core as well as with some excellent contrib modules. In the ever-changing landscape of web design and development, the handling and optimization of media is crucial. Media in core starting in Drupal 8 has been a real game changer for content editors and developers alike. Now with Drupal 10.2, the media experience continues to evolve.
Media Library Edit: enhanced media editing capabilities
Drupal's Media Library, built upon media in core, offers a centralized location for managing all types of media files across your site. Media Library not only simplifies the media handling experience but also enhances the efficiency of content editors. Building upon Drupal's core Media Library, the Media Library Edit module provides additional functionality to edit media directly on a node, paragraph, or any other kind of entity that references a media entity. This is a great time-saving feature as well as a nice UX improvement for content editors.
- Streamlined process: Edit images, videos, or documents directly within the library without navigating to individual media pages.
- Bulk editing: Handle multiple media items simultaneously, making content updates more efficient and consistent.
WebP: a modern image format, now in Drupal core
Embracing modern web technologies, Drupal now offers core support for WebP images. This image format is not only lighter but also maintains quality, a combination that is vital for improving site performance. Here are some key observations:
- Size reduction: WebP images are generally smaller than their JPEG or PNG counterparts, making pages load faster.
- Quality retention: Despite the reduction in size, the quality of WebP images remains impressive, providing a visually appealing experience.
- SEO benefits: Faster loading images can improve search engine rankings, making WebP an attractive option for SEO-conscious projects.
Native image lazy loading in Drupal core
Native browser image lazy loading landed a while back so that by now, all modern browsers support this feature. Image lazy loading Note the "loading" attribute in the example code below.
<!-- An example of an image with the loading attribute -->
<img
src="farmhouse.jpg"
alt="An old weathered farmhouse in the midwest countryside"
width="720"
height="360"
loading="lazy">
Drupal core can now leverage the loading attribute right in the UI for media and you are given two options, "lazy" or "eager." Lazy is ideal for images below the fold but if say you gave a banner or hero image at the top of the page, then eager is recommended.
Responsive images: adapting to various screens
In today's multi-device world, responsive images are no longer a nice to have but a necessity. Drupal's Responsive Image and Breakpoint core modules ensure that images are delivered in the appropriate size and resolution for different devices. The Breakpoint module allows themes to provide image breakpoint parameters via a YAML file for the UI which the Responsive Image module can then leverage. This approach has distinct advantages:
- Performance optimization: By serving the right image size for each device, site speed is maintained without compromising quality.
- User experience: Responsive images ensure that visuals look crisp and clean, regardless of the screen size or resolution.
Crop API: a foundation for image manipulation
Drupal's contrib modules Crop API and Image Widget Crop allow site builders and content editors to manage and crop images with ease. In Drupal's robust ecosystem, Crop API serves as a fundamental building block for image cropping and manipulation. It's a flexible tool that can integrate with various contrib modules to offer more control over how images are displayed and used.
- Flexible cropping: Crop API provides a unified way to crop images, allowing developers to define custom crop types and sizes.
- Integration with image styles: You can combine Crop API with Drupal's image styles to create automated cropping and scaling, ensuring consistency across your site.
Extendable architecture: The Crop API can be extended and customized through contrib modules or custom code, allowing you to tailor the cropping experience to your specific needs.
Image Widget Crop: A User-Friendly Approach to Image Cropping
While the Crop API provides the underlying foundation, Image Widget Crop brings it to life for content editors. Developers can define precise cropping rules, while content editors enjoy a seamless and intuitive experience. As a contrib module that integrates with the Crop API, Image Widget Crop adds a user-friendly interface for cropping images right within the content editing forms. Here are some of the key features:
- Intuitive drag-and-drop cropping: Content editors can crop images using a simple drag-and-drop interface without needing any technical skills.
- Real-time previews: The module provides real-time previews of cropped images, ensuring that editors can see exactly how the image will appear on the site.
- Multiple crop types: You can define different crop types (e.g., thumbnail, banner) and allow editors to select the appropriate one for each image.
- Integration with Core Media: Image Widget Crop works seamlessly with Drupal's core media module, making it a natural extension of the media handling system.
- Compatibility with various image file types: Whether it's JPG, PNG, or other popular image formats, Image Widget Crop handles them with ease.
Together, Crop API and Image Widget Crop offer a robust and user-friendly approach to image manipulation within Drupal. From experience on various projects, Image Widget Crop is always a welcome tool for content editors as image aspect ratios and precise cropping solves a very common pain point for image editing.
Media Remote
The contrib module, Media Remote provides a great way to pull in all different kinds of media that is not otherwise covered by Drupal core media by simply supplying a media URL. The neat thing about this module is that remote media URLs are converted into full fledged Drupal media entities and are therefore available in the media library. For example, we recently had a use case for displaying Brightcove videos on a client site. There is a Brightcove module but it does not import videos as media entities. As we wanted Brightcove videos to be on par with other media entities so as to provide a cohesive media experience, the Media Remote module was the way forward on our project. Media remote supports almost 20 different 3rd party media platforms and is actively maintained such that you can put in a PR for your favorite 3rd party media provider.
Conclusion
Drupal's media tools continue to showcase its adaptability and forward-thinking nature in the domain of web design and content management systems. With the integration of modern web technologies, such as WebP image support and native lazy loading, coupled with the intuitive functionalities of Crop API and Image Widget Crop, Drupal ensures a streamlined media experience that bridges the gap between advanced technical functionalities and user-friendly interfaces. The introduction of the Media Remote module further amplifies Drupal's commitment to offering a comprehensive media solution by seamlessly integrating third-party media platforms into the Drupal ecosystem. Media core and contrib modules show Drupal's strength in providing tools that cater to both technical and non-technical users, bridging the gap between complex functionality and ease of use. By integrating these tools into your media management strategy, you can ensure a consistent and engaging visual experience across your site, all while empowering your content team with the tools they need. The result is a cohesive media experience, where diverse media types are harmonized and easily accessible. For organizations and developers, this rich suite of media tools guarantees an efficient, high-performing, and visually captivating website.