# Bad value X for attribute “(width | height)” on element “img”: Expected a digit but saw “.” instead.
> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-width-height-on-element-img-expected-a-digit-but-saw-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
According to the HTML specification, the `width` and `height` attributes on `img` elements accept only [valid non-negative integers](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-non-negative-integer). A valid non-negative integer consists of one or more ASCII digits (`0`–`9`) with no other characters — no decimal points, no spaces, no units like `px`. When the validator encounters a value such as `602.88`, it parses the digits `602` successfully, then hits the `.` character where it expects another digit or the end of the value, triggering the error.
This issue commonly arises when dimension values are generated programmatically — for example, when a CMS, image processing tool, or JavaScript calculation produces floating-point numbers and outputs them directly into the HTML. It can also happen when copying dimension values from CSS or design tools that work in sub-pixel units.
### Why this matters
- **Standards compliance:** The HTML specification is explicit that these attributes take integer values. Using decimals produces invalid markup.
- **Unpredictable rendering:** Browsers may handle the malformed value in different ways — some might truncate at the decimal point, others might ignore the attribute entirely. This can lead to layout shifts or incorrectly sized images.
- **Layout stability:** The `width` and `height` attributes are used by browsers to calculate the aspect ratio of an image before it loads, which helps prevent Cumulative Layout Shift (CLS). Invalid values can undermine this behavior, causing content to jump around as images load.
### How to fix it
1. **Round to the nearest integer.** If your value is `602.88`, round it to `603`. If it's `800.2`, round to `800`.
2. **Remove the decimal point entirely.** The value must contain only digits.
3. **Do not include units.** Values like `800px` are also invalid; use just `800`.
4. **Fix the source of the values.** If your CMS or build tool generates these attributes, update the logic to output integers (e.g., using `Math.round()` in JavaScript or `round()` in PHP/Python).
## Examples
### ❌ Incorrect: decimal values in `width` and `height`
```html
```
The validator reports errors for both attributes because `.` is not a valid character in a non-negative integer.
### ✅ Correct: whole number values
```html
```
Both values are valid non-negative integers with no decimal points.
### ❌ Incorrect: trailing decimal point with no fractional part
```html
```
Even a trailing `.` with nothing after it is invalid — the parser still encounters an unexpected character.
### ✅ Correct: clean integer values
```html
```
### Using CSS for sub-pixel precision
If you genuinely need sub-pixel sizing (which is rare for images), use CSS instead of HTML attributes. CSS `width` and `height` properties do accept decimal values:
```html
```
However, keep in mind that you should still provide integer `width` and `height` HTML attributes for aspect ratio hinting, and then override with CSS if sub-pixel precision is needed:
```html
```
This approach gives you valid HTML, proper aspect ratio hints for layout stability, and the precise sizing you need.