Picture Everywhere

Picture Everywhere provides a plug and play override for image templates and preprocessing to enforce use of the HTML <picture> tag everywhere, as opposed to standalone <img> tags.

This may be useful to developers in particular:

• Leave no question whether any given image element will be an <img> tag or a <picture> tag. Whatever the site's browser support matrix, and no matter any discussion around potential art direction for the specific image element, it's a <picture>.
• Prepare for future possibilities. One of the <picture> tag's main use cases is offering multiple image formats to browsers. The last major browser to lack WebP support only reached its end of life in June 2022 - several years after WebP support had already started to see wide adoption. In any future cycle of adoption for a new image formats, serving the latest and smallest format may once again require offering browsers multiple formats via <picture> and <source> tags. That will be easiest to implement for existing sites if <picture>'s use is universal already.

Integration with SVG Image Field

This module also integrates with the SVG Image Field module automatically, if it is installed.

Optional enhancement with WebP module

Picture Everywhere also offers an optional enhancement meant to work together with the WebP module.

On websites that still need to support PNG and JPG formats, the out-of-the-box approach to serving both these formats and WebP requires a lot of configuration work. Duplicative image styles must be created that are "just like this other image style, but this time convert it to WebP." Then one still has to tie the two image styles together by way of a third piece of configuration in the Responsive Image module. Picture Everywhere can add a .webp <source> for all JPEG and PNG files. The WebP module is able to serve that source URL automatically. This means that Picture Everywhere together with WebP can let you go back to using the Responsive Image module only for pictures whose art direction requires it.

This enhancement is disabled by default and is not recommended for sites that no longer have to support browsers without WebP support. If you don't have to support older browsers, simply include WebP conversion in all of your image styles instead. You can still use this module to prepare for the possibility of future formats.