Objetivo del tutorial
Las imágenes mal integradas afectan rendimiento y estabilidad.
No basta con comprimir el archivo. También importa cómo se declara en HTML.
Este tutorial explica cómo revisar dimensiones, carga diferida y atributos básicos de imagen.
Qué mira AISEO en imágenes HTML
Dimensiones
Comprueba si la imagen reserva espacio con ancho y alto definidos.
Carga
Revisa si las imágenes no críticas usan carga diferida.
Responsive
Valora srcset y sizes cuando la imagen necesita adaptarse a varios tamaños.
Estabilidad
Evita saltos visuales cuando la página termina de cargar.
Cómo interpretar el resultado
Pass
Las imágenes principales están bien declaradas y no rompen la estabilidad visual.
Warning
La página funciona, pero algunas imágenes podrían mejorar carga o atributos.
Fail
Hay imágenes sin dimensiones, sin reserva de espacio o integradas de forma que dañan la estabilidad visual y la carga percibida.
Ejemplo técnico orientativo
Una imagen integrada de forma estable puede declararse así:
<img src="/images/informe-aiseo.jpg" width="1200" height="675" loading="lazy" alt="Vista previa de un informe técnico AISEO" >Las imágenes críticas del hero pueden requerir carga prioritaria, no lazy loading automático.
Errores frecuentes
- Insertar imágenes sin adaptar su declaración HTML al tamaño real de uso.
- No declarar width y height en imágenes relevantes.
- Aplicar lazy loading a la imagen principal visible al entrar.
- No usar srcset o sizes cuando la imagen necesita variantes responsive.
Cómo corregirlo
- Declara dimensiones coherentes con el espacio real en el que se muestran.
- Declara width y height para evitar saltos de layout.
- Usa lazy loading en imágenes secundarias o fuera de pantalla.
- Revisa hero, banners, listados, cards y fichas de producto.