How to define the Microdata markup for an image when it's actually a picture tag?

Question

Within the http://schema.org/Product scope, I want to define the markup for an image. Usually it looks as follows:

<img itemprop="image" src="/path-to-image.suffix" alt="image-description" />

However, modern responsive pages use the <picture> tag. I tried...

<picture itemprop="image">
    <source media="(max-width: ${viewport-size-1})" srcset="/path-to-image-size-1.suffix">
    <source media="(min-width: ${viewport-size-2})" srcset="/path-to-image-size-2.suffix">
    <img src="/fallback-path-to-image.suffix" alt="image-description">
</picture>

But it appears not to be accepted by Google's structured data testing tool. Adding it to the <img> tag within the <picture> doesn't seem right to me, as it doesn't highlight the whole context and hence neglects the fact that the image exists in various resolutions...

What is the right Microdata image markup for picture tags?

Answer 1

If you want a URL value

You have to specify the itemprop attribute on the img element, not on the picture element:

<picture>
  <source media="(max-width: ${viewport-size-1})" srcset="/path-to-image-size-1.suffix">
  <source media="(min-width: ${viewport-size-2})" srcset="/path-to-image-size-2.suffix">
  <img itemprop="image" src="/fallback-path-to-image.suffix" alt="image-description">
</picture>

The reason is because only certain elements can be used if the Microdata property should have a URL as value, i.e., all elements with href or src attribute.

If you want an ImageObject value

You have to specify the contentUrl property on the img element:

<picture itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
  <source media="(max-width: ${viewport-size-1})" srcset="/path-to-image-size-1.suffix">
  <source media="(min-width: ${viewport-size-2})" srcset="/path-to-image-size-2.suffix">
  <img itemprop="contentUrl" src="/fallback-path-to-image.suffix" alt="image-description">
</picture>

---

Specifying the itemprop on a source element (instead of the img element) is allowed, too, but it would need to have a src attribute.