Valor incorrecto X para el atributo “(width | height)” en el elemento “img”: Se esperaba un dígito pero se encontró “.” en su lugar.

Según la especificación HTML, los atributos width y height en elementos img aceptan solo enteros no negativos válidos. Un entero no negativo válido consiste en uno o más dígitos ASCII (0–9) sin otros caracteres — sin puntos decimales, sin espacios, sin unidades como px. Cuando el validador encuentra un valor como 602.88, analiza los dígitos 602 exitosamente, luego encuentra el carácter . donde espera otro dígito o el final del valor, lo que dispara el error.

Este problema surge comúnmente cuando los valores de dimensiones se generan programáticamente — por ejemplo, cuando un CMS, herramienta de procesamiento de imágenes o cálculo JavaScript produce números de punto flotante y los muestra directamente en el HTML. También puede ocurrir cuando se copian valores de dimensiones desde CSS o herramientas de diseño que trabajan en unidades sub-píxel.

Por qué es importante

• Cumplimiento de estándares: La especificación HTML es explícita en que estos atributos toman valores enteros. Usar decimales produce marcado inválido.
• Renderizado impredecible: Los navegadores pueden manejar el valor malformado de diferentes maneras — algunos podrían truncar en el punto decimal, otros podrían ignorar el atributo por completo. Esto puede llevar a cambios de diseño o imágenes con tamaño incorrecto.
• Estabilidad del diseño: Los atributos width y height son utilizados por los navegadores para calcular la relación de aspecto de una imagen antes de que se cargue, lo que ayuda a prevenir el Cumulative Layout Shift (CLS). Los valores inválidos pueden socavar este comportamiento, causando que el contenido salte mientras se cargan las imágenes.

Cómo solucionarlo

1. Redondea al entero más cercano. Si tu valor es 602.88, redondealo a 603. Si es 800.2, redondea a 800.
2. Elimina el punto decimal por completo. El valor debe contener solo dígitos.
3. No incluyas unidades. Valores como 800px también son inválidos; usa solo 800.
4. Corrige la fuente de los valores. Si tu CMS o herramienta de construcción genera estos atributos, actualiza la lógica para generar enteros (ej., usando Math.round() en JavaScript o round() en PHP/Python).

Ejemplos

❌ Incorrecto: valores decimales en width y height

<img src="photo.jpg" alt="A golden retriever" height="602.88" width="800.2">

El validador reporta errores para ambos atributos porque . no es un carácter válido en un entero no negativo.

✅ Correcto: valores de números enteros

<img src="photo.jpg" alt="A golden retriever" height="603" width="800">

Ambos valores son enteros no negativos válidos sin puntos decimales.

❌ Incorrecto: punto decimal al final sin parte fraccionaria

<img src="banner.png" alt="Sale banner" width="1200." height="400.">

Incluso un . al final sin nada después es inválido — el analizador aún encuentra un carácter inesperado.

✅ Correcto: valores enteros limpios

<img src="banner.png" alt="Sale banner" width="1200" height="400">

Usando CSS para precisión sub-píxel

Si realmente necesitas dimensionado sub-píxel (lo cual es raro para imágenes), usa CSS en lugar de atributos HTML. Las propiedades CSS width y height sí aceptan valores decimales:

<img src="icon.svg" alt="Settings icon" style="width: 24.5px; height: 24.5px;">

Sin embargo, ten en cuenta que aún debes proporcionar atributos HTML width y height enteros para el hint de relación de aspecto, y luego sobrescribir con CSS si necesitas precisión sub-píxel:

<img
  src="icon.svg"
  alt="Settings icon"
  width="25"
  height="25"
  style="width: 24.5px; height: 24.5px;">

Este enfoque te da HTML válido, hints apropiados de relación de aspecto para estabilidad del diseño, y el dimensionado preciso que necesitas.

Más información:

WHATWG Spec

HTML Spec: dimension attributes

→

MDN Reference

MDN - img, The Image Embed element

→