Comprobador de texto alt y auditoría SEO de imágenes

Las imágenes hacen mucho trabajo en una página y causan muchos de sus problemas. Un texto alternativo ausente deja fuera a los usuarios de lectores de pantalla y no da nada a los buscadores, una foto principal de 3 MB ralentiza toda la página y una imagen sin ancho ni alto hace que el diseño salte mientras carga.

Este comprobador de texto alternativo de imágenes lista todas las imágenes de la página con su texto alt, peso del archivo, formato (JPEG o PNG frente a WebP o AVIF), dimensiones y atributo de carga diferida. Señala el alt ausente, los archivos demasiado grandes y los riesgos de desplazamiento del diseño, para que corrijas la accesibilidad y el SEO de imágenes de una sola vez.

Cómo comprobar el texto alternativo de las imágenes

1. Introduce la URL de la página

   Leemos el HTML de la página y recopilamos sus imágenes con sus atributos, pesos de archivo y formatos.

2. Ordena por problema

   Empieza por las imágenes sin atributo alt, después por los archivos más pesados y luego por las que no tienen dimensiones.

3. Corrige en tu CMS o plantilla

   Añade el texto alt en la biblioteca de medios, comprime o convierte los archivos grandes y añade width y height a las etiquetas de imagen.

Cómo escribir un texto alt que ayude de verdad

El texto alt es la alternativa textual que un lector de pantalla lee en voz alta y que un buscador lee en lugar de la imagen. Escríbelo pensando en alguien que no puede ver la imagen. El árbol de decisión del W3C sobre el alt resume las reglas:

• Imágenes informativas: describe lo que importa en contexto, por ejemplo alt="Zapatilla de trail roja con suela de tacos profundos", y no alt="zapatilla" ni alt="IMG_4032.jpg".
• Imágenes funcionales dentro de un enlace o un botón: describe la acción. Una lupa que envía una búsqueda lleva alt="Buscar".
• Imágenes decorativas: usa un atributo vacío, alt="", para que los lectores de pantalla las omitan. Vacío no es lo mismo que ausente; sin alt, algunos lectores de pantalla leen el nombre del archivo.
• Imágenes de texto: repite el mismo texto en el alt.

Que no pase de una frase y evita “imagen de”, porque los lectores de pantalla ya anuncian que es una imagen. Usa una palabra clave solo cuando describa la imagen de forma natural. Más información en nuestra definición de texto alternativo (alt).

SEO de imágenes más allá del texto alt

Las prácticas recomendadas de SEO para imágenes de Google añaden algunas reglas que conviene conocer:

• Usa elementos <img> reales con un src. Google no indexa las imágenes de fondo en CSS.
• Da a los archivos nombres descriptivos, como zapatilla-trail-roja.webp, y coloca las imágenes cerca del texto relacionado.
• Usa un formato compatible: BMP, GIF, JPEG, PNG, WebP, SVG o AVIF. WebP y AVIF suelen pesar mucho menos que JPEG o PNG con una calidad visual similar.
• Sirve tamaños que coincidan con el diseño. Una foto de 4000 píxeles mostrada a 800 desperdicia ancho de banda; srcset permite que el navegador elija el archivo adecuado.

<img src="/img/red-trail-shoe-800.webp"
     srcset="/img/red-trail-shoe-800.webp 800w, /img/red-trail-shoe-1600.webp 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="800" height="600"
     alt="Zapatilla de trail roja con suela de tacos profundos"
     loading="lazy">

Para servir formatos modernos con una alternativa, envuelve la imagen en <picture>. El navegador usa la primera fuente que admite, y el texto alt y las dimensiones se quedan en el elemento img:

<picture>
  <source srcset="/img/boot.avif" type="image/avif">
  <source srcset="/img/boot.webp" type="image/webp">
  <img src="/img/boot.jpg" width="800" height="600"
       alt="Bota de senderismo de cuero marrón, vista lateral">
</picture>

Dimensiones y carga diferida

Dos atributos evitan la mayoría de los problemas de rendimiento relacionados con las imágenes:

• width y height permiten que el navegador reserve espacio antes de que llegue el archivo, lo que evita los saltos de diseño que mide el CLS. El CSS puede seguir haciendo la imagen adaptable; el navegador mantiene la proporción.
• loading="lazy" aplaza las imágenes fuera de pantalla hasta que el visitante se acerca al hacer scroll. Úsalo solo por debajo de la primera pantalla: cargar de forma diferida la imagen principal retrasa el LCP. A esa imagen dale en su lugar fetchpriority="high", como explica web.dev.

El comprobador señala los archivos demasiado grandes y las imágenes que pueden provocar saltos de diseño. Para ver cómo afectan las imágenes al conjunto de la página, revisa sus Core Web Vitals y consulta qué es la carga diferida (lazy loading).

Consejos para un mejor SEO de imágenes

• Corrige el texto alt en las plantillas además de en las páginas; los logotipos y los iconos se repiten en todas las páginas.
• Pon a tu logotipo un texto alt con el nombre de la marca, sobre todo cuando enlaza a la página de inicio.
• Convierte las fotos grandes en JPEG y PNG a WebP o AVIF y comprime todo antes de subirlo.
• No apliques carga diferida a la primera imagen grande que ven los visitantes; dale prioridad.
• No rellenes el texto alt de palabras clave: describe la imagen y las palabras relevantes suelen aparecer por sí solas.

Límites a tener en cuenta

El comprobador lee las imágenes referenciadas en el HTML de servidor de la página. Las imágenes añadidas con JavaScript, los fondos CSS y las imágenes dentro de iframes pueden no aparecer en la lista, y no puede juzgar si un texto alt describe con precisión la imagen: eso solo lo puede hacer una persona. Para el rendimiento de carga real, usa el test de velocidad de página; para una revisión completa de accesibilidad, combínalo con Lighthouse y una prueba rápida con un lector de pantalla.

Última actualización: 30 oct 2026 por el equipo de Yes SEO.