Valor incorrecto “Xpx” para el atributo “width | height” en el elemento “img | iframe”: Se esperaba un dígito pero se encontró “p”.

En HTML, los atributos width y height en elementos como <img> e <iframe> están definidos para aceptar solo enteros no negativos válidos. Según la especificación HTML, el valor está implícitamente en píxeles CSS, por lo que añadir px o cualquier otra unidad es tanto innecesario como inválido. El analizador espera que cada carácter en el valor sea un dígito (0–9), y cuando encuentra una letra como p, reporta el error.

Este es un error común, especialmente para desarrolladores que trabajan frecuentemente con CSS, donde las unidades px son requeridas. En los atributos HTML, sin embargo, la convención es diferente — la unidad de píxel está implícita, y añadirla crea un valor malformado. Los navegadores pueden intentar analizar el número ignorando los caracteres finales, pero este comportamiento no está garantizado y no se debe confiar en él.

Hacer estos atributos correctamente importa por varias razones:

• Cumplimiento de estándares asegura que tu marcado sea predecible y portable en todos los navegadores y agentes de usuario.
• Estabilidad del layout depende de que el navegador lea correctamente width y height para reservar espacio para imágenes e iframes antes de que carguen, previniendo el cambio de layout acumulativo (CLS). Un valor malformado podría hacer que el navegador recurra al dimensionado por defecto o ignore el atributo completamente.
• Herramientas de accesibilidad y lectores de pantalla pueden usar estos atributos para transmitir información sobre contenido embebido, y valores inválidos podrían interferir con ese proceso.

Si necesitas establecer dimensiones usando unidades distintas a píxeles (como porcentajes o unidades de viewport), usa CSS en lugar de atributos HTML.

Ejemplos

❌ Inválido: usando px en el valor del atributo

<img src="cat.jpg" alt="A cat sitting on a windowsill" width="225px" height="100px">

El validador reporta un error porque 225px y 100px contienen los caracteres no dígitos px.

✅ Válido: enteros simples sin unidades

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

❌ Inválido: usando porcentaje en el valor del atributo

<iframe src="embed.html" width="100%" height="400px" title="Embedded content"></iframe>

Tanto 100% como 400px son inválidos porque contienen caracteres no dígitos.

✅ Válido: enteros simples en un <iframe>

<iframe src="embed.html" width="800" height="400" title="Embedded content"></iframe>

✅ Usando CSS cuando necesitas unidades que no sean píxeles

Si necesitas dimensionado basado en porcentajes o responsivo, aplícalo a través de CSS en lugar de atributos HTML:

<iframe src="embed.html" style="width: 100%; height: 400px;" title="Embedded content"></iframe>

O mejor aún, usa una hoja de estilos externa:

<style>
  .responsive-frame {
    width: 100%;
    height: 400px;
  }
</style>
<iframe src="embed.html" class="responsive-frame" title="Embedded content"></iframe>

Referencia rápida de valores inválidos vs. válidos

La solución es sencilla: elimina cualquier sufijo de unidad de los atributos HTML width y height y proporciona valores enteros simples. Para cualquier cosa más allá de dimensiones simples en píxeles, mueve tu lógica de dimensionado a CSS.

Más información:

MDN Reference

HTML img element - width and height attributes

→

MDN Reference

HTML iframe element

→

web.dev Article

Images in HTML

→