Picture

About

The Picture module provides an image formatter and breakpoint mappings to output responsive images using the HTML5 picture tag. For more information, see the online documentation for the Picture module.

Uses

Defining picture mappings

By creating picture mappings you define the image styles that are being used to output images at certain breakpoints. On the Picture mappings page, click Add picture mapping to create a new mapping. First chose a label and a breakpoint group and click Save. After that you can choose the image styles that will be used for each breakpoint. Image styles can be defined on the Image styles page that is provided by the Image module. Breakpoints are defined in the info files of the theme or you can create custom breakpoints. See the help page of the Breakpoint module for more information.

Using picture mappings in Image fields

After defining responsive image mappings, you can use them in the display settings for your Image fields, so that the site displays responsive images using the HTML5 picture tag. Open the Manage display page for the entity type (content type, taxonomy vocabulary, etc.) that the Image field is attached to. Choose the format Picture, click the Edit icon, and select one of the picture mappings that you have created. For general information on how to manage fields and their display see the help page of the Field UI module.