The Breakpoints and Picture modules (that will be part of Drupal 8 core!), in combination with a responsive theme (like Omega) are powerful tools to create a truly responsive site. In this post, I will provide you with the basic steps to create a responsive site using these tools. First of all, you need to install the latest stable versions of the Picture and Breakpoints modules, along with a responsive theme. I will use the Omega theme for this eample.

Once you've downloaded and enabled these modules, you need to configure the breakpoints. Go to Administration » Configuration » Media » Breakpoints to configure them. Below is a screenshot of the breakpoints I will use for this example.

Next, click "Add a new group" at the top of the page. Give your breakpoint group a name and select the breakpoints you want to enable for this group. I named my group "Picture" since we'll be using it to display images with the Picture module. Next I enabled all the breakpoints for this group (Note: make sure your breakpoints are in the right order: smallest screens on top, largest at the bottom. If they aren't drag them to reorder until they are).

Now we have to create an image style for each breakpoint. Normally that would mean that we have to go through the steps for creating a style four times. Luckily the Breakpoints module has a shortcut so we can speed things up a little. Click on "Add responsive style" and fill in the form. Choose the basic style you want to start from, in my case, I chose medium. Enter a base name for the image styles that will be created. Again I chose "picture_", so it's consistent with the breakpoint group they belong to. You can fill in any machine readable name here. Select the breakpoints for which you want to create the image style. Normally these are the breakpoints that are also in your newly created breakpoint group (in my case all breakpoints).

After submitting the form you will be redirected to the overview page of the image styles. You will see the newly created image styles.

You will still have to edit them so the right effects are applied to the images for the right styles. My configuration looks like this:

• picture_custom_user_mobile_1x
  • scale 200x200
  • Allow upscaling
• picture_custom_user_narrow_1x
  • scale 400x400
  • Allow upscaling
• picture_custom_user_wide_1x
  • scale 600x600
  • Allow upscaling
• picture_custom_user_tv_1x
  • scale 800x800
  • Allow upscaling

So, now we've created breakpoints, added them to a group and created image styles for each breakpoint. Now we have to tell the Picture module which image style belongs to which breakpoint. So navigate to Administration » Configuration » Media » Picture and select the group you created earlier ("Picture" in my case).

Select the right image style for each breakpoint and save the settings. It should look something like this:

Go to the field you want to make responsive. In my case I want to make the Image field of my Article content type responsive so I go to Administration » Structure » Content types » Article » Manage display. There I select "Picture" as the format for the Image field.

Click on the gear icon to the right and select the breakpoint group you created earlier ("Picture" in my case). Click "Update" and then "Save" at the bottom of the page.

Now you can create articles with responsive images. Just create an article as you normally would (Fill in a title, enter some body text and upload an image). When you view the article and resize your browser window, the Picture module will load the right image (read: image style) based on the media query that matches the current window size.

Wide:

Narrow:

Mobile:

And there you have it. You have successfully set up a responsive site with responsive images! It requires a bit of setup and preparation, but it's well-worth your time. I hope you've found this helpful!