Make WordPress Core

Opened 7 years ago

Last modified 5 months ago

#42920 assigned enhancement

Add support for the picture element

Reported by: desrosj's profile desrosj Owned by: adamsilverstein's profile adamsilverstein
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch 2nd-opinion needs-unit-tests
Focuses: Cc:


The <picture> element is in the HTML standard and should be supported in WordPress (

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:

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.


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, 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.

Attachments (1)

42920.diff (1.2 KB) - added by desrosj 7 years ago.
Initial patch.

Download all attachments as: .zip

Change History (15)

7 years ago

Initial patch.

This ticket was mentioned in Slack in #core-media by desrosj. View the logs.

7 years ago

This ticket was mentioned in Slack in #core-media by desrosj. View the logs.

7 years ago

This ticket was mentioned in Slack in #core-media by desrosj. View the logs.

6 years ago

#4 @desrosj
6 years ago

Related #29807.

This ticket was mentioned in Slack in #core-media by desrosj. View the logs.

6 years ago

#6 @willstockstech
5 years ago

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.

This ticket was mentioned in Slack in #core-media by spacedmonkey. View the logs.

4 years ago

#9 @RobertReiser
3 years ago

From a discussion with @adamsilverstein on his post about WordPress 5.8 adding WebP support:

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.

#10 @strarsis
3 years ago

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


    <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=""
         src="image-1-1920.jpg" />


This ticket was mentioned in Slack in #core-media by antpb. View the logs.

2 years ago

#12 @klokie
12 months ago

Hi folks, is this fixed?? I'm trying to figure out what to do about the related issue,

#13 @adamsilverstein
5 months ago

  • Owner set to adamsilverstein
  • Status changed from new to assigned
Note: See TracTickets for help on using tickets.