Bad value “100%” for attribute “height” on element “img”: Expected a digit but saw “%” instead.

A <source> element inside a <picture> that is followed by another <source> or an <img> with srcset must include a media and/or type attribute.

The <source> element is used inside <picture> for responsive images, allowing different resources to be loaded based on conditions such as viewport width (media) or image format (type). According to the HTML standard, when multiple <source> elements are present (or a following <img> with srcset), each <source> must provide a media and/or type attribute so the browser can choose the appropriate resource based on those hints.

Without media or type, the browser cannot distinguish when to use each source, which can lead to validation errors and unexpected rendering behavior.

Incorrect example (causes the validator error):

<picture>
  <source srcset="image1.webp">
  <source srcset="image2.jpg">
  <img alt="" src="fallback.jpg" srcset="fallback2x.jpg 2x">
</picture>

Correct examples (fixing the error):

<picture>
  <source srcset="image1.webp" type="image/webp">
  <source srcset="image2.jpg" type="image/jpeg">
  <img alt="" src="fallback.jpg" srcset="fallback2x.jpg 2x">
</picture>

or

<picture>
  <source srcset="image-small.jpg" media="(max-width: 600px)">
  <source srcset="image-large.jpg" media="(min-width: 601px)">
  <img alt="" src="fallback.jpg" srcset="fallback2x.jpg 2x">
</picture>

By specifying the media and/or type attributes for each <source>, you satisfy the HTML standard and resolve the W3C validator issue.

To fix the issue of having a bad value for the src attribute on an img element due to having a tab, new line, or carriage return, you need to ensure that the src attribute does not contain any additional whitespace characters like tab, new line, or carriage return.

Incorrect code:

<img src="images/example.jpg
" alt="Example Image">

Corrected code:

<img src="images/example.jpg" alt="Example Image">

By removing the extra whitespace characters (new line in this case) and ensuring that the src attribute value is properly enclosed within quotes, the issue should be resolved.

An empty alt attribute on an img element is a deliberate signal that the image is purely decorative and carries no meaningful content. According to the WHATWG HTML specification, this maps the element to the “presentation” role in the accessibility tree, effectively hiding it from screen readers and other assistive technologies.

When you add a role attribute to an img with alt="", you’re sending contradictory instructions: the empty alt says “this image is decorative, ignore it,” while the role attribute says “this image has a specific semantic purpose.” Browsers and assistive technologies cannot reliably resolve this conflict, which can lead to confusing or inconsistent behavior for users who rely on screen readers.

This rule exists to enforce clarity in how images are exposed to the accessibility tree. If an image is truly decorative, it should have alt="" and no role. If an image serves a functional or semantic purpose — such as acting as a button, link, or illustration — it should have both a descriptive alt value and, if needed, an appropriate role.

How to fix it

You have two options depending on the image’s purpose:

1. The image is decorative: Remove the role attribute entirely. The empty alt attribute already communicates that the image should be ignored by assistive technologies.

2. The image is meaningful: Provide a descriptive alt value that explains the image’s purpose. If a specific role is genuinely needed, keep it alongside the non-empty alt.

Examples

❌ Incorrect: empty alt with a role attribute

<img src="icon.png" alt="" role="img">

<img src="banner.jpg" alt="" role="presentation">

Even role="presentation" is redundant and invalid here — the empty alt already implies presentational semantics.

✅ Correct: decorative image with no role

<img src="icon.png" alt="">

If the image is decorative, simply remove the role attribute. The empty alt is sufficient.

✅ Correct: meaningful image with a descriptive alt and a role

<img src="warning-icon.png" alt="Warning" role="img">

If the image conveys information, give it a descriptive alt value. The role="img" is typically unnecessary here since img elements already have an implicit role of img when alt is non-empty, but it is at least valid.

✅ Correct: meaningful image used in a specific context

<button>
  <img src="search-icon.png" alt="Search">
</button>

Here the image has a descriptive alt and doesn’t need an explicit role because its purpose is conveyed through the alt text and its context within the button.

The src attribute on an <img> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.

srcset contains candidates without a width descriptor while sizes is present, so each candidate must use a width (w) descriptor.

When an img has sizes, every srcset candidate must include a width descriptor like 320w, not a pixel density descriptor like 1x. Mixed descriptors are not allowed in the same srcset. Use either:

• Width descriptors with sizes (e.g., 320w, 640w, 1024w)
• Density descriptors without sizes (e.g., 1x, 2x)

The browser uses sizes to map CSS layout width to the best w candidate. Without sizes, density (x) can be used, but not together with sizes.

HTML examples

Reproduce the issue (invalid: sizes + x descriptors)

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Sample photo">

Fix using width descriptors with sizes (valid)

<img
  src="photo-640.jpg"
  srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1280.jpg 1280w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Sample photo">

Alternative fix: remove sizes and use density descriptors (valid)

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
  alt="Sample photo">