Responsive Images in Drupal (Part 1 of 3)

In this series, I'm going to be showing you how to setup your site to automatically display images using different image styles based on the size of the browser window. This is incredibly useful for sites that use a responsive theme. A common issue is that the site layout responds to the window size, for example on a mobile device. However, the images stay the same size, which often requires the user to scroll horizontally to view them fully, or even worse, the images overlap content on the page.

So, this series will cover the following:

In part 1, we'll create a new content type called "Featured Content", and we'll add an image field to it.

In part 2, we'll do the work to make our images responsive. This involves creating the image styles, as well as configuring the Responsive Images and Styles module to know when to apply a different style to our images

And in part 3, we'll actually add some content so that we can see everything in action. And we'll even create an image slideshow, to demonstrate that this can work with images that are not static as well.

After you've watched this series, you'll know how to configure your images to respond along with your layout, so that everything looks exactly the way you want across all devices.