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)
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).
- Using picture with file entities thanks to Mario Hernandez of Mediacurrent
- Three part series on how to setup picture.
- 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
- , but needs some testing and fine tuning.
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.
- Maintenance status: Actively maintained
- Development status: Under active development
- Reported installs: 20,157 sites currently report using this module. View usage statistics.
- Downloads: 137,527
- Automated tests: Enabled
- Last modified: June 18, 2015
- Stable releases are covered by the security advisory policy.
Look for the shield icon below.