Drupal's responsive image styles provide a mechanism for delivering appropriately sized images based on device screen size, optimizing performance and user experience by reducing unnecessary data loading.
This course covers the basics of responsive images, the configuration of responsive image styles, and practical use cases for different viewport sizes and display densities. By the end of the course, learners will be able to implement responsive images that adapt to various screen sizes and resolutions, enhancing the performance and visual appeal of their Drupal sites.
Key topics
- Overview of the Responsive Image module
- Understanding different use cases for responsive images
- Creating responsive image styles
- Detailed walk-through of the responsive image style configuration form
- Practical application of responsive image styles to image fields
The Responsive Image module provides a process for transforming images uploaded through image fields into responsive images. This is accomplished through the configuration of responsive image styles. The configuration form for adding and editing responsive image styles is quite extensive. In this tutorial, we'll go through this form and learn what each option entails. By the end of this lesson, you should have a good understanding of the various options in the responsive image style configuration form.
You might already be familiar with image styles in Drupal. Image styles are a popular and commonly used feature of Drupal because they enable your site's content creators to upload an image once, but have it displayed at various sizes and resolutions depending on its context. Image styles are configured and then applied to an image field's display settings, whether using view modes, Views field settings, or other contexts. Responsive image style field formatters are applied in the same exact way, but the process of creating responsive image styles is a bit different.
Using responsive image styles as image field formatters enables your Drupal site to produce specific HTML markup for images so that either:
- The browser can choose an appropriately sized image source, given the size of the user device's viewport size
- You can dictate to the browser which image sources to use at different breakpoints.
In the first case, the resulting markup uses the srcset and sizes attribute in an <img> element. In the second case, <picture> and <source> elements are generated in conjunction with the <img> tag.
It is also possible to create a responsive image style that just provides alternate images depending on the display-density (i.e. 1.5x or 2x) of the user device.
In this tutorial, we'll look at three use cases for responsive images, how those use cases are handled in HTML, and how they can be handled using Drupal's Responsive Image module. By the end of this tutorial, you should be ready to create a responsive image style appropriate for your Drupal site.
In this tutorial, we're going to add a responsive image style to an image field on the Article content type. This will add the srcset and sizes attributes to the output <img> element, providing media conditions, width descriptors, and a set of image sources for the browser to choose from, depending on the user device's viewport size.
This solution, especially when used in conjunction with CSS, will provide flexible, fluid, and faster-loading images for your site, and will work for probably 80% of use cases. It does not provide "art direction", that is, making cropping, aspect ratio, or orientation changes to an image. This solution also provides for different display-densities, like 1.5x and 2x image sources without the need for display-density descriptors.
Another benefit of this solution is that it uses the Responsive Image module's breakpoint configuration file, so there is no need for you to create a breakpoint file in your theme to implement this flavor of responsive image style.
