Firefox fails to load picture elements with srcset, while Chrome and Edge successfully load photos

I’m attempting to use picture elements for the first time, and I’m trying to figure out what is wrong with my srcset syntax.

Chrome and Edge successfully load photos with the srcset attributes included like this:

<picture style="position: absolute;">
  <source srcset="https://example.com/h-768.webp,https://example.com/mh-1728.webp 2x,https://example.com/h-1728.webp 3x" media="(max-height: 768px)">
  <source srcset="https://example.com/h-1080.webp,https://example.com/h-1728.webp 2x,https://example.com/h-2796.webp 3x" media="(max-height: 864px)">
  <source srcset="https://example.com/h-1080.webp,https://example.com/h-2796.webp 2x," media="(max-height: 932px)">
  <source srcset="https://example.com/h-2796.webp" media="(min-height: 1081px)">
  <img src="https://example.com/h-768.webp" alt="alt" class="class">
</picture>

Firefox displays the alt text instead of the image, and when hovering over the element in the Inspector, displays the message “Could not load the image”, although no errors are logged.

Firefox successfully loads the image if the srcset attributes are removed from the source elements:

<picture style="position: absolute;">
  <source media="(max-height: 768px)">
  <source media="(max-height: 864px)">
  <source media="(max-height: 932px)">
  <source media="(min-height: 1081px)">
  <img src="https://example.com/h-768.webp" alt="alt" class="class">
</picture>

What’s the correct syntax for using srcset in Firefox?

Thanks!