Bad value “auto” for attribute “height | weight” on element “img”: Expected a digit but saw “a” instead.

The HTML specification defines the width and height attributes on <img> as accepting only valid non-negative integers — a sequence of one or more digits (0–9) with no letters, units, or symbols. These attributes tell the browser the intrinsic dimensions of the image in pixels, which helps it allocate the correct space in the layout before the image loads, preventing content layout shift (CLS).

When you set height="auto" or width="50%", the validator expects a digit as the first character but instead encounters a letter or symbol, producing the error: “Bad value ‘auto’ for attribute ‘height’ on element ‘img’: Expected a digit but saw ‘a’ instead.”

This matters for several reasons:

• Standards compliance: Browsers may silently ignore invalid attribute values, meaning your intended sizing won’t take effect and you’ll get default behavior without any visible warning to users.
• Layout stability: Valid width and height attributes allow the browser to calculate the image’s aspect ratio before it loads, reserving the correct amount of space and preventing layout shifts. Invalid values defeat this mechanism.
• Predictability: Relying on browser error recovery for invalid markup leads to inconsistent behavior across different browsers and versions.

To fix this, you have two options:

1. Use plain integers in the width and height attributes to specify pixel dimensions (e.g., width="600" height="400").
2. Use CSS for any non-pixel or dynamic sizing like auto, percentages, max-width, viewport units, etc.

A best practice is to set the width and height attributes to the image’s actual intrinsic pixel dimensions (to preserve aspect ratio and prevent layout shift), then use CSS to control the rendered size responsively.

Examples

Invalid: using “auto” or units in attributes

<!-- "auto" is not a valid integer -->

<img src="photo.jpg" alt="A cat sitting on a windowsill" height="auto" width="auto">

<!-- Percentage is not a valid integer -->

<img src="banner.jpg" alt="Site banner" width="100%">

<!-- Units like "px" are not allowed -->

<img src="icon.png" alt="Settings icon" width="32px" height="32px">

Valid: using plain integers in attributes

<!-- Correct: plain integers representing pixels -->

<img src="photo.jpg" alt="A cat sitting on a windowsill" width="800" height="600">

<img src="icon.png" alt="Settings icon" width="32" height="32">

Valid: using CSS for responsive or dynamic sizing

When you need behavior like auto, percentages, or max-width, use CSS instead:

<!-- Use attributes for intrinsic size, CSS for responsive behavior -->

<img
  src="photo.jpg"
  alt="A cat sitting on a windowsill"
  width="800"
  height="600"
  style="max-width: 100%; height: auto;">

This approach gives you the best of both worlds: the browser knows the image’s aspect ratio from the attributes (preventing layout shift), while CSS ensures it scales responsively within its container.

Valid: using a CSS class for reusability

<style>
  .responsive-img {
    max-width: 100%;
    height: auto;
  }
</style>

<img
  src="photo.jpg"
  alt="A cat sitting on a windowsill"
  width="800"
  height="600"
  class="responsive-img">

Learn more:

WHATWG Spec

MDN: the img element

→