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

The HTML Living Standard defines the width and height attributes on img elements as accepting only valid non-negative integers. These values represent pixel dimensions and must consist solely of digits (e.g., "200", "1024"). Setting width="auto" causes a validation error because "auto" is not a number — the parser expects a digit as the first character but encounters the letter "a" instead.

This confusion often arises because auto is a perfectly valid value in CSS (e.g., width: auto;), but HTML attributes and CSS properties follow different rules. The width HTML attribute is strictly for declaring the image’s intrinsic pixel dimensions, while CSS handles flexible, responsive, or automatic sizing.

Why this matters

• Standards compliance: Invalid attribute values can cause unpredictable rendering behavior across different browsers. While most browsers will simply ignore an invalid width value, relying on error recovery is fragile and not guaranteed.
• Layout stability: The width and height HTML attributes help browsers reserve the correct amount of space for an image before it loads, preventing Cumulative Layout Shift (CLS). When these values are invalid, the browser can’t calculate the aspect ratio in advance, leading to content jumping as images load.
• Accessibility and tooling: Screen readers, search engine crawlers, and other automated tools may rely on valid markup to correctly interpret page content.

How to fix it

1. If you know the image’s pixel dimensions, set width and height to the actual values. This is the recommended approach because it gives browsers the aspect ratio needed to reserve space during loading.

2. If you want the image to resize fluidly, remove the width attribute (or keep it as a pixel value for aspect-ratio hints) and use CSS instead — for example, width: 100%; or max-width: 100%; height: auto;.

3. If you want the browser to determine the size automatically, simply omit the width attribute. The browser will use the image’s native dimensions by default.

Examples

❌ Invalid: using "auto" as the width value

<img src="photo.jpg" alt="A sunset over the ocean" width="auto" height="400">

This triggers the error because "auto" is not a valid non-negative integer.

✅ Fixed: using a pixel value

<img src="photo.jpg" alt="A sunset over the ocean" width="600" height="400">

Both width and height are set to integers representing pixel dimensions. This also lets the browser calculate a 3:2 aspect ratio to reserve space before the image loads.

✅ Fixed: omitting width and using CSS for responsive sizing

<img src="photo.jpg" alt="A sunset over the ocean" width="600" height="400" style="width: 100%; height: auto;">

Here, the HTML attributes still declare the image’s natural dimensions (for aspect-ratio calculation), while CSS overrides the rendered size to make the image responsive. The height: auto in CSS ensures the aspect ratio is preserved — this is the CSS equivalent of the "auto" behavior you may have been looking for.

✅ Fixed: omitting both attributes entirely

<img src="photo.jpg" alt="A sunset over the ocean">

If you don’t specify width or height, the browser renders the image at its native size. This is valid, though you lose the layout-shift prevention benefit.

Recommended pattern for responsive images

For the best combination of validity, performance, and responsiveness, include the pixel dimensions in HTML and apply responsive styles via CSS:

<img
  src="photo.jpg"
  alt="A sunset over the ocean"
  width="1200"
  height="800"
  style="max-width: 100%; height: auto;">

This approach tells the browser the image’s intrinsic aspect ratio (via width and height), prevents layout shifts, and allows the image to scale down gracefully within its container.

Learn more:

MDN Reference

MDN Web Docs: <img>: The Image Embed element

→

WHATWG Spec

HTML Standard - Embedded content

→

web.dev Article

Images on the web

→