How do I handle multiple formats of image on a sitemap? i.e. jpg webp avif jxl

Question

I can't believe this question has not been asked or that no information seems to be available on the web given that many of the big names are pushing new formats as being the way to go.

Scenario:

I am building a sitemap

I have a product page

<url>
  <loc>https://www.example.com/page.html</loc>
</url>

I have a varying number of distinct product images. Each distinct image has 4 associated formats falling back based on filesize from smallest to largest (or until jpg, since that is universal)

What is the CORRECT approach to include the format variants in a sitemap?

This approach indicates to me that they are separate distinct images rather than the same image in different formats:

<url>
  <loc>https://www.example.com/page.html</loc>
  <image:image>
    <image:loc>https://www.example.com/image.jxl</image:loc>
  </image:image>
  <image:image>
    <image:loc>https://www.example.com/image.avif</image:loc>
  </image:image>
  <image:image>
    <image:loc>https://www.example.com/image.webp</image:loc>
  </image:image>
  <image:image>
    <image:loc>https://www.example.com/image.jpg</image:loc>
  </image:image>
</url>

This approach is incomplete as it fails to include the other formats:

<url>
  <loc>https://www.example.com/page.html</loc>
  <image:image>
    <image:loc>https://www.example.com/image.webp</image:loc>
  </image:image>
</url>

This approach is probably syntactically incorrect:

<url>
  <loc>https://www.example.com/page.html</loc>
  <image:image>
    <image:loc>https://www.example.com/image.jxl</image:loc>
    <image:loc>https://www.example.com/image.avif</image:loc>
    <image:loc>https://www.example.com/image.webp</image:loc>
    <image:loc>https://www.example.com/image.jpg</image:loc>
  </image:image>
</url>

Further to my question, if anybody is able to provide a conclusive answer, would it be possible to also reference some documentation indicating such? Many thanks!

Answer 1

The sitemap protocol does not have a defined rule for specifying multiple image format of the same image. In terms of Google, a thread in the Search Console Help discussed about having the same image appeared in multiple pages (not the same image in multiple format) and the rule of thumb is just put one canonical image per page. If you have the same image in multiple formats, it may cause canonicalization problem.

A better approach for multiple image format is to use srcset in the img tag or source in picture tag which GoogleBot can understand.

Also keep in mind different search engine such as Bing has pretty much the same rule of thumb, only provide the canonical image URL in your sitemap and the alternative in the HTML page itself using the appropriate img or picture tag.