Validación HTML: Valor incorrecto "" para el atributo "(width|height)" en el elemento "img": La cadena vacía no es un entero no negativo válido.

Acerca de este problema HTML

La especificación HTML requiere que los atributos width y height en elementos <img>, cuando están presentes, contengan una cadena que represente un entero no negativo — es decir, una secuencia de uno o más dígitos ASCII como "0", "150", o "1920". Una cadena vacía ("") no satisface este requisito, por lo que el validador W3C la marca como un error.

Este problema comúnmente surge cuando:

Un CMS o motor de plantillas genera width="" o height="" porque no se configuró ningún valor de dimensión.
JavaScript establece dinámicamente img.setAttribute("width", "") en lugar de eliminar el atributo.
Un desarrollador añade los atributos como marcadores de posición con la intención de completarlos más tarde pero olvida hacerlo.

Por qué es importante

Proporcionar atributos width y height válidos es una de las formas más efectivas de prevenir el Cumulative Layout Shift (CLS). Los navegadores usan estos valores para calcular la relación de aspecto de la imagen y reservar la cantidad correcta de espacio antes de que la imagen se cargue. Cuando los valores son cadenas vacías, el navegador no puede determinar la relación de aspecto, por lo que no se reserva espacio — llevando a cambios de diseño mientras las imágenes se cargan, lo que perjudica tanto la experiencia del usuario como las puntuaciones de Core Web Vitals.

Más allá del rendimiento, los valores de atributo inválidos pueden causar comportamiento de renderizado impredecible entre navegadores. Algunos navegadores pueden ignorar el atributo, otros pueden interpretar la cadena vacía como 0, colapsando la imagen a cero píxeles en esa dimensión. El HTML que cumple con los estándares también mejora la accesibilidad al garantizar que las tecnologías asistivas puedan analizar el documento de manera confiable.

Ejemplos

❌ Inválido: valores de cadena vacía

<img src="photo.jpg" alt="Una puesta de sol sobre el océano" width="" height="">

Tanto width como height están establecidos como cadenas vacías, lo cual no es válido.

✅ Corregido: proporcionar dimensiones reales

<img src="photo.jpg" alt="Una puesta de sol sobre el océano" width="800" height="600">

Reemplaza las cadenas vacías con las dimensiones reales en píxeles de la imagen. Estos valores deben reflejar el tamaño intrínseco (natural) de la imagen. CSS aún puede usarse para escalar la imagen visualmente — el navegador usará la proporción de width y height para reservar el espacio correcto.

✅ Corregido: eliminar los atributos completamente

<img src="photo.jpg" alt="Una puesta de sol sobre el océano">

Si no conoces las dimensiones o prefieres manejar el tamaño puramente a través de CSS, elimina los atributos por completo. Un atributo ausente es válido; uno vacío no lo es.

❌ Inválido: solo un atributo está vacío

<img src="banner.jpg" alt="Banner promocional" width="1200" height="">

Incluso si solo un atributo tiene un valor vacío, el error de validación se activará para ese atributo.

✅ Corregido: ambos atributos con valores válidos

<img src="banner.jpg" alt="Banner promocional" width="1200" height="400">

Corrigiendo marcado generado dinámicamente/por plantillas

Si un lenguaje de plantillas está generando atributos vacíos, usa un condicional para omitirlos cuando no haya valor disponible. Por ejemplo, en una plantilla:

<!-- En lugar de siempre generar los atributos: -->

<img src="photo.jpg" alt="Descripción" width="" height="">

<!-- Inclúyelos condicionalmente solo cuando existan valores: -->

<img src="photo.jpg" alt="Descripción" width="800" height="600">

Si estás estableciendo dimensiones a través de JavaScript, elimina el atributo en lugar de establecerlo como una cadena vacía:

// ❌ No hagas esto
img.setAttribute("width", "");

// ✅ Haz esto en su lugar
img.removeAttribute("width");

// ✅ O establece un valor válido
img.setAttribute("width", "800");

Una nota sobre los valores

Los atributos width y height solo aceptan enteros no negativos — números enteros sin unidades, decimales o signos de porcentaje. Valores como "100px", "50%", o "3.5" también son inválidos. Usa enteros simples como "100" o "600". Si necesitas dimensionamiento responsivo con porcentajes u otras unidades CSS, aplícalas a través de estilos CSS en su lugar.