[wp-trac] [WordPress Trac] #42920: Add support for the picture element

[WordPress Trac]

#42920: Add support for the picture element
-------------------------+-------------------------------------------------
 Reporter:  desrosj      |      Owner:
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:
 Severity:  normal       |   Keywords:  has-patch 2nd-opinion needs-unit-
  Focuses:               |  tests
-------------------------+-------------------------------------------------
 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/42920>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform