Validación HTML: Valor incorrecto X para el atributo "loading" en el elemento "img".

Acerca de este problema HTML

El atributo loading le dice al navegador cómo priorizar la carga de una imagen. Establecerlo en "lazy" aplaza la carga hasta que la imagen esté cerca del viewport, lo que puede mejorar el rendimiento de la página reduciendo el tiempo de carga inicial y ahorrando ancho de banda. Establecerlo en "eager" instruye al navegador a cargar la imagen inmediatamente, independientemente de su posición en la página. Cuando se omite el atributo, el navegador usa por defecto el comportamiento "eager".

Cualquier valor que no sea una de estas dos cadenas exactas en minúsculas es inválido según la especificación HTML. Los errores comunes incluyen usar valores numéricos como "1" o "0", valores de estilo booleano como "true" o "false", variantes en mayúsculas como "Lazy", o errores de ortografía como "laxy". Cuando un navegador encuentra un valor inválido, ignora el atributo y vuelve al comportamiento predeterminado de carga inmediata. Aunque esto significa que la página no se romperá visualmente, la optimización de carga perezosa prevista no tendrá efecto, y el HTML fallará la validación W3C.

Esto importa por varias razones:

Rendimiento: Si tenías la intención de usar "lazy" pero proporcionaste un valor inválido, todas tus imágenes se cargarán inmediatamente, anulando el propósito y potencialmente degradando la velocidad de la página.
Cumplimiento de estándares: Los valores de atributo inválidos señalan posibles errores en tu marcado y pueden causar problemas con herramientas y analizadores que esperan HTML bien formado.
Mantenibilidad: Un marcado válido y predecible es más fácil de mantener y depurar entre equipos y a lo largo del tiempo.

Para solucionar el problema, verifica el valor del atributo loading y reemplázalo con una de las dos opciones válidas. Si quieres carga aplazada, usa "lazy". Si quieres carga inmediata (o no necesitas especificar), usa "eager" o simplemente elimina el atributo.

Ejemplos

Valores inválidos

Cada uno de estos provocará el error de validación:

<!-- Valor numérico -->

<img src="photo.jpg" alt="A sunset over the ocean" loading="1">

<!-- Valor de estilo booleano -->

<img src="photo.jpg" alt="A sunset over the ocean" loading="true">

<!-- Valor mal escrito -->

<img src="photo.jpg" alt="A sunset over the ocean" loading="laxy">

<!-- Mayúsculas incorrectas -->

<img src="photo.jpg" alt="A sunset over the ocean" loading="Lazy">

Correcto: carga perezosa

Usa "lazy" para imágenes que están debajo del pliegue o no son inmediatamente visibles para el usuario:

<img src="photo.jpg" alt="A sunset over the ocean" loading="lazy">

Correcto: carga inmediata

Usa "eager" para imágenes críticas que deberían cargarse de inmediato, como imágenes hero o logotipos:

<img src="logo.png" alt="Company logo" loading="eager">

Correcto: omitir el atributo

Dado que "eager" es el comportamiento predeterminado, puedes simplemente eliminar el atributo si quieres carga inmediata:

<img src="logo.png" alt="Company logo">

Uso práctico en contexto

Un patrón común y efectivo es cargar inmediatamente las imágenes above-the-fold mientras se aplaza la carga de todo lo demás:

<!-- Imagen hero: cargar inmediatamente -->

<img src="hero-banner.jpg" alt="Welcome to our store" loading="eager">

<!-- Imágenes de productos más abajo en la página: aplazar carga -->

<img src="product-1.jpg" alt="Running shoes" loading="lazy">
<img src="product-2.jpg" alt="Hiking boots" loading="lazy">
<img src="product-3.jpg" alt="Sandals" loading="lazy">

Ten en cuenta que el atributo loading también funciona en elementos iframe con los mismos dos valores válidos: "lazy" y "eager".