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.