Fun fact: the web is powered by cat photos.

But hark, far too many cat photos are larger than they need to be! 

How can I view as many cat photos as possible on my phone, so I can see every detail of each cute kitty, without them taking forever to download? Then, when I get home, those gorgeous cats absolutely must look fabulous on my large-screen high-resolution monitor, too.

When there’s a problem that involves cats, you can bet that Drupal is ready to help!

Drupal 8 has built-in responsive images support based off of Drupal 7’s contributed Picture and Breakpoint modules. Understanding how to use those modules without first making a plan could easily lead to a cat-tastrophe!

So we’ll start not by reviewing every detail of the responsive images specification or every option you’ll need on Drupal’s configuration screen, but instead by studying cats. We’ll look at how our cat photos fit into our site’s layout. Once we understand that, we can plan how to create multiple versions of a cat photo. Then we can provide different size options based on the browser width and resolution. Best of all, we’ll get Drupal to take care of that tedious work so we can spend more time with cats.

Don’t worry! No cats will be harmed or cloned in this process! Even though cloning cats would create a more purr-fect world.

Learning objectives and outcomes:

We want our sites to shine with beautiful images that load quickly.

To do so, we’ll first learn how to analyze how a particular type of image fits into a site’s layout. Then we’ll use that analysis to make a plan for the image file sizes we’ll need at various viewport widths.

Once we have that plan, we’ll learn how to let Drupal take care of generating the image files and writing the HTML markup we’ll need for our responsive images solution. That includes learning how to do that today with Drupal 7’s Picture and Breakpoint modules, as well as how to do so Drupal 8, which simplifies several key steps. We’ll look at responsive image configuration and image style setup, field formatter settings as well as how to work with responsive images in preprocessor functions.

While we will discuss the key concepts of the new responsive image specification, we won’t be going into great detail on the history of how these specifications were developed. Instead we’ll focus on practical lessons on how to make images more responsive with Drupal, based on my experience as a front-end developer and as as someone who helped work on Drupal 8’s Breakpoint and Responsive Image modules.