The proposed HTML "picture" element (see, but has not been accepted for HTML 5) is implemented as a display formatter for image fields. This module is a backport of Drupal 8 picture 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 and provides and alternative polyfill from which should work on older browsers as well.



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


  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.

Project Information