Add support for the picture element

[desrosj]

The <picture> element is in the HTML standard and should be supported in WordPress (​https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element).

Similar to the <audio> and <video> elements, the <picture> element can contain multiple <source> child attributes, providing the browser with different formats for the same resource. Each source can have its own srcset, media, and sizes attributes, among others, to control which source is used under specific circumstances (such as screen width). After all <source> tags are output, an <img /> tag is required as a fallback.

Adding support for the <picture> element can help in many areas. Here are a few:

• Allowing support for more modern image formats, such as SVG or WebP (https://core.trac.wordpress.org/timeline?from=2017-12-16T21%3A15%3A32Z&precision=second)
• Provides a way to solve the responsive image art direction problem (rough POC: ​https://github.com/desrosj/respect-art-direction).

Adding <picture> elements to core's output could be tricky for backwards compatibility. Themes are most likely targeting <img /> tags as direct children of other elements in CSS and JS. There are also a few oddities in CSS with styling the <picture> element.

Proposed Solution

The solution I am proposing is to add picture to the html5 array in registered theme support. This would allow us to encourage themes to add support and proper styling for the picture element when they are ready. When themes adopt this feature, future releases of WordPress (or plugins) could add <source> elements to <picture> elements as more performant formats are supported. Sites would receive all of the benefits of the new enhancements without any updates needed from themes.

Unsolved

Hardcoded images in post content and widgets would not be solved with this approach. They would continue as hardcoded <img /> tags. This may not be a bad thing but may require additional CSS rules in themes to handle correctly.

Browser support for the <picture> element is very good. According to ​https://caniuse.com/#feat=picture, the only modern browser lacking support is IE11.

Other notes

Tackling this may also be dependant on #29807.

Initial Patch

My initial incoming patch adds documentation for the html5 picture support for themes and wraps the get_image_tag()/wp_get_attachment_image() <img /> output in a <picture> element.

[desrosj]

Initial patch.

[desrosj]

Related #29807.

[willstockstech]

Hey @desrosj!

Would this feature include the "automated"/"transparent" handling of adding .webp <source>'s in conjunction with #35725 (assuming that a webp version of a file is generated upon media upload)? Or would that be a post-<picture>-implementation feature/future thing?

It would be great to see this functionality (both <picture> and webp) in WP natively, as opposed to having to either patch something together or utilize plugins (that only seem to do a partial amount of each piece of the work). Given webp support is a bit wider now at over 80.5% (only Apple holding out it seems), as well as <picture> having over 93.5% browser support - it seems like this would be "quick win" for WordPress in todays performance/data consumption culture.

[spacedmonkey]

Related: #35726 #35725 #24718

[RobertReiser]

From a discussion with @adamsilverstein on his post about WordPress 5.8 adding WebP support:
​https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/#comment-41383

The idea was to let WordPress know about the supported picture formats and their preferred order, for example something like this:

add_theme_support( 'image-format', array( 'jxl', 'webp', 'jpeg' ) );

to indicate which image formats are supported – the order would determine the priority in the picture / srcset element.

[strarsis]

(Maybe this is helpful) Example HTML for using <picture> and <srcset> for different formats and resolutions/densities:

<picture>

    <source type="image/webp"
            srcset="image-1-300.webp 300w,
			image-1-800.webp 800w"
            sizes="[...], 100vw" />

    <source type="image/jpeg"
            srcset="image-1-300.jpg 300w,
			image-1-800.jpg 800w"
            sizes="[...], 100vw" />

    <img alt=""
         class="background"
         src="image-1-1920.jpg" />

</picture>

[klokie]

Hi folks, is this fixed?? I'm trying to figure out what to do about the related issue, ​https://github.com/WordPress/gutenberg/issues/41087#issuecomment-1396266836

Trac ticket: https://core.trac.wordpress.org/ticket/42920