This module is a backport of Drupal 8 Responsive Image module. It allows administrators to optimize images for different devices and resolutions by pairing image styles with CSS media queries. It is implemented as a display formatter for image fields.

The Picture module uses the "<picture>" element, which was recently added to the HTML specification. While browser support for this new element is currently very limited, this module uses a polyfill library to provide backward compatibility with older browsers.

While this module cannot account for different connection speeds (such as WiFi vs. 3g), it does limit wasted bandwidth by ensuring delivery of only one image, optimized for the device being used, and therefor can improve mobile performance.

Version 2.0 (preferred)

Version 2.0 is ready and upgrading should be working, if you start a new project use 2.0, if you want to upgrade, download the 2.0 version and run update.php (drush updb) and check that everything is still working.

Version 2.0 uses the real picture polyfill and has support for sizes as well.

Order of breakpoints

Picture module version 1 (deprecated)

You have to order your breakpoints from the "smallest" (e.g mobile) to the "largest" (e.g. wide), but keep in mind that it depends if you use min or max queries, the polyfill will use the last matching source tag (reading from top to bottom).

You have to order your breakpoints from the "largest" (e.g. wide) to the "smallest" (e.g mobile), but keep in mind that it depends if you use min or max queries, the picture element (and the polyfill) will use the first matching source tag (reading from top to bottom).

Picture module version 2

Since this version uses picturefill 2.0, you have to order your breakpoints from the "largest" (e.g. wide) to the "smallest" (e.g mobile), but keep in mind that it depends if you use min or max queries, the picture element (and the polyfill) will use the first matching source tag (reading from top to bottom).

Demo

Drupal 7 Demo

Screencasts

Using picture with file entities thanks to Mario Hernandez of Mediacurrent
Three part series on how to setup picture.

Dependencies

Breakpoints, make sure you read the documentation and order your breakpoints correctly.

Features

This is a display formatter for image fields
Also support media file display formatters
Supports flexslider 2.x
Supports inline images using wysiwyg and ckeditor #1885766: WYSIWYG support
#1881898: Colorbox support, but needs some testing and fine tuning.

Flattr this to support the development

Difference with Responsive images and styles

This is the successor of Responsive images and styles and is the preferred module to use, it will allow you an easy upgrade to Drupal 8. But it has and . The code works a bit different, resp_img overrides image styles while picture is using a display formatter.

RTBC issues for Picture

Filters