The proposed HTML "picture" element (see responsiveimages.org - almost accepted for HTML 5 (already part of chrome canary) - is implemented as a display formatter for image fields.

This module is a backport of Drupal 8 Responsive Image module. This module will deliver alternate image sources based on device capabilities to prevent wasted bandwidth and optimize display for both screen and print.

This follows the proposal for the new picture element proposal as described in http://picture.responsiveimages.org/ and provides and alternative polyfill from https://github.com/weblinc/picture which should work on older browsers as well.

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

Using weblinc or picturefill:

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).

Using 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).

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

Screencasts

Dependencies

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

Features

  1. This is a display formatter for image fields
  2. Also support media file display formatters
  3. Supports flexslider 2.x
  4. Supports inline images using wysiwyg and ckeditor #1885766: WYSIWYG support
  5. #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 no colorbox support (feel free to open an issue) and no support for inline images (feel free to open an issue). The code works a bit different, resp_img overrides image styles while picture is using a display formatter.

Supporting organizations: 
Development

Project Information

Downloads