Optimización HTML de Imágenes

Optimización HTML de Imágenes

Revisa si las imágenes están declaradas con atributos HTML que protegen rendimiento, estabilidad visual y accesibilidad.

Ilustración del check Optimización HTML de Imágenes de AISEO
Rendimiento Área
Imágenes HTML Señal
Intermedio Nivel

Qué mide este check

Este check revisa si las imágenes relevantes de una página están bien declaradas en HTML.

AISEO observa señales como dimensiones, carga diferida, estabilidad del layout y atributos que ayudan a interpretar el recurso.

<img src="/images/ejemplo.jpg" width="800" height="450" loading="lazy" alt="Descripción útil">

El objetivo no es decidir el mejor formato de archivo, sino evitar que una imagen mal declarada rompa rendimiento, estabilidad visual o comprensión.

Por qué importa en AISEO

Una imagen mal declarada puede ralentizar la carga y mover el diseño mientras el usuario intenta leer. Eso afecta experiencia y lectura técnica.

Los crawlers y sistemas de IA no interpretan una imagen solo por verla. Necesitan contexto, atributos correctos y una carga que no penalice la página.

  • Las imágenes sin dimensiones pueden provocar saltos visuales.
  • Las imágenes pesadas retrasan el contenido principal.
  • Un alt vacío en imágenes informativas reduce accesibilidad y contexto.

Cómo comprobarlo paso a paso

Revisa dimensiones

Comprueba que las imágenes importantes tengan width y height o una reserva clara de espacio.

Comprueba carga diferida

Usa lazy loading en imágenes secundarias, pero evita aplicarlo de forma ciega al recurso principal del hero.

Revisa responsive images

Comprueba srcset y sizes cuando una imagen se sirve en distintos tamaños o contextos.

Revisa atributos complementarios

Las imágenes informativas deben conservar contexto textual cuando corresponda.

Ejemplo de imagen optimizada

Una imagen optimizada reserva espacio, carga de forma adecuada y aporta contexto cuando es necesario.

<img
src="/images/check.jpg"
width="1200"
height="675"
loading="lazy"
decoding="async"
alt="Panel técnico de validación AISEO">
  • La imagen tiene dimensiones declaradas.
  • La carga está adaptada a su posición en la página.
  • El texto alternativo aporta contexto real.

Errores frecuentes

  • Subir imágenes enormes y reducirlas solo con CSS.
  • No declarar dimensiones y provocar desplazamientos de layout.
  • Usar lazy loading en la imagen crítica del primer pantallazo.
  • Repetir alt genéricos como imagen, foto o gráfico sin contexto.

Checklist final

  • Las imágenes tienen dimensiones y atributos adecuados.
  • Las dimensiones o reservas de espacio evitan saltos visuales.
  • La carga diferida se aplica donde tiene sentido.
  • Las imágenes informativas tienen alt útil.

Preguntas frecuentes

Dudas habituales antes de interpretar o corregir esta señal técnica.

¿Todas las imágenes deben usar lazy loading?
No. Las imágenes fuera del primer pantallazo suelen beneficiarse, pero la imagen principal puede necesitar carga prioritaria.
¿Width y height siguen siendo importantes?
Sí. Ayudan a reservar espacio y reducen saltos visuales durante la carga.
¿El formato WebP es obligatorio?
No siempre, pero suele ser una opción eficiente. Lo importante es servir imágenes ligeras y compatibles.
¿Una imagen decorativa necesita alt descriptivo?
No. Si es puramente decorativa puede usar alt vacío, pero las imágenes informativas sí necesitan contexto.
¿Este check mide diseño visual?
No. Mide señales HTML y de rendimiento relacionadas con cómo se declara y carga la imagen.