Categories

(111)
(64)
(165)
(21)

Responsive images in Drupal 8: beautiful on every device!

03.11.2017
Responsive images in Drupal 8: beautiful on every device!
Author:

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 are 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 developers. Everything’s gonna be responsive!

3 votes, Rating: 5

Read also

1

We created a list of free online services that allow you to see how your website displays on different devices.

2

If you want your business to stand up to the competition, you should ask yourself:...

3

As long as any site or app needs to be not only multifunctional, but attractive too, the work of UX designers...

4

Let’s delve into the world of bad design examples and the art of being truly annoying to your audience. Too many customers — too many troubles! So discover 10 web design elements that serve as...

5

There are special Drupal themes perfectly suited for construction businesses — so feel free to check out their collection. We have included Drupal 7 and Drupal 8 themes with plenty of useful...

Need a quote? Let's discuss the project

Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

Join the people who have already subscribed!

Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

No charge. Unsubscribe anytime