Skip to content

backdrop-contrib/picture

Repository files navigation

Picture element

This module 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 along with 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.

Order of breakpoints

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

Installation

Dependencies

Usage

Issues

  • Bugs and Feature requests should be reported in the Issue Queue.

Current Maintainers

Credits

License

This project is GPL v2 software. See the LICENSE.txt file in this directory for complete text.