When does “smaller” mean “bigger”? When your images grow smaller to perfectly adjust themselves to various devices, while your user satisfaction, audience coverage, website’s speed, and profits grow bigger. A nice formula, isn’t it? This magic ability of images to adjust themselves to screens is how responsive web design works. And it works especially well in the latest Drupal version, Drupal 8, which has built-in support for responsive images. That’s what we’re going to discuss right now.
Responsive images: impeccable in Drupal 8
What does Drupal 8’s native support for responsive images mean? Using Drupal out-of-the-box, you will see that its built-in themes are already fully responsive and look awesome on all devices.
Any other theme can be configured in the same way, since Drupal 8 offers modern and convenient built-in tools for responsive image setup. Let’s take a look.
Drupal 8’s native tools to configure responsive images
These tools include the Breakpoint and the Responsive image modules that have become part of Drupal 8’s core. The Breakpoint module is even enabled by default. The Responsive image (formerly knows as the Picture element module) needs to be enabled by you, though.
Together, they let you set up the responsive output of images on various devices, depending on their screen width. The images can be both resized and elegantly cropped. Forget about a heavy 2000px, banner on a mobile screen. Those days are past!
Responsive images of appropriate sizes will be displayed according to the breakpoints that you define. Defining breakpoints means choosing window widths at which your image size should change (for example, min-width: 600px). Let’s briefly look at the process.
A glimpse at responsive image setup process in Drupal 8
- Defining the breakpoints. You can define breakpoints in the YAML file (yourtheme.breakpoints.yml) in your theme’s folder, and organize your breakpoints into groups.
- Creating the image styles for breakpoints. For each breakpoint, you will need to create an image style here: Configuration — Media — Image Styles. Use the “crop and scale” effect.
- Creating your responsive image style. In Configuration — Media — Responsive Image Styles, the "Add responsive image style" button will help you put all these styles together to create your final responsive image style.
- Selecting the style for your field. The final step is to use your style for your actual image field: go to Manage Display — Format — Responsive image and select your responsive image style. Done!
Retina: when “bigger” means “bigger”!
In some cases, the ability of images to get bigger is as important as their ability to get smaller. A great example is HD/Retina displays that have a very high resolution. Here, it’s a great idea to provide a larger image style that’s twice the size using a 2x multiplier in breakpoints. And, of course, the quality of your original images should be impeccable.
Wrap-up
Responsiveness is among Drupal 8’s numerous improvements, for which our two overviews (1 and 2) were not enough. More interesting stories, news, and examples are waiting for you in our newsletter and on our social media pages.
And if you need help with configuring responsive images in Drupal 8, or are thinking to migrate to the latest Drupal version, feel free to contact our Drupal developers. Everything’s gonna be responsive!