HTML Validator Error in <Image> Hydrogen Component After Hydrogen Upgrade (2024.7.4 → 2024.7.9)

[sergio-nezhigay]

Hello,

I recently upgraded Hydrogen from version 2024.7.4 to 2024.7.9 and encountered HTML validation errors related to the component in my code. Here’s the specific part of the code causing the issue:

<Image
  loading={index === 0 ? 'eager' : 'lazy'}
  data={image}
  sizes="(max-width: 768px) 100vw, 50vw"
  className="object-contain"
/>

This renders the following HTML, which is producing the errors:

<img 
  src="image-src"
  loading="lazy"
  sizes="(max-width: 768px) 100vw, 50vw"
  class="object-contain"
  width="100"
  height="78.19444444444444"  <!-- HTML validation error: Invalid decimal value -->
  srcset="image-200.jpg 200w, image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w, image-720.jpg 1x"  <!-- HTML validation error: Density descriptor (1x) not allowed when sizes attribute is present -->
/>

Errors:
Error: Bad value for attribute height on element img: Expected an integer but saw a decimal instead.
Error: Bad value for attribute srcset on element img: Expected a width descriptor but found a density descriptor (1x).
These errors occur after the upgrade from version 2024.7.4 to 2024.7.9. Before the upgrade, the code worked as expected without these HTML validation issues.

Steps to Reproduce:
Upgrade Hydrogen from 2024.7.4 to 2024.7.9.
Use the component with dynamic loading and sizes attributes.
Validate the HTML using any standard validator tool.
Expected Behavior:
The component should render without producing HTML validation errors.

Current Behavior:
HTML validation fails due to issues with the height and srcset attributes.
The error mentions that the height attribute is expecting an integer, and the srcset attribute requires a width descriptor instead of 1x.
Environment:
Hydrogen version: 2024.7.9
Node.js version: v20.14.0
NPM version: 10.8.3