HTML Guides for nan

The width of an <img> holds the text NaN, which usually means a script or template calculated the size from a missing or non-numeric value.

The width attribute takes a non-negative integer: digits only. NaN ("not a number") is what JavaScript returns when arithmetic runs on undefined or a non-numeric string, for example Math.round(data.width * scale) when data.width is missing. Writing that result into the markup puts the literal text NaN in the attribute. Other words that start with that letter, such as null or none, trigger the same message with a lowercase n.

Browsers can't read a number from NaN, so they ignore the attribute. The image then gets no reserved space before it loads, and the content below it shifts once it arrives. The height attribute often has the same bug and gets its own error.

Fix the code that produces the value. Check that the number is finite before you write it (Number.isFinite(width) in JavaScript), and leave the attribute out when the size isn't known.

Invalid example

<img src="photo.jpg" alt="A red car" width="NaN" height="NaN">

Valid example

<img src="photo.jpg" alt="A red car" width="640" height="480">