How to Display Responsive Images Using Picture Module

In Drupal, there are a few modules that offer responsive image functionality, but today I want to talk about the Picture module. The Picture module allows you to define different image styles for specific screen sizes or breakpoints, and you define the breakpoints using the Breakpoints module.

In this video, I’ll show you how to make images displayed from the Image field responsive. And just a quick side note: Both the Picture and Breakpoints module are part of Drupal 8 core. The Drupal 7 version of the modules are backports.

Modules and Theme

drush dl picture breakpoints ctools omega

Resources

Breakpoints:

Name Value
mobile (min-width: 0px)
narrow (min-width: 740px)
normal (min-width: 980px)