SEO de imágenes en 2026: formatos, texto alternativo y carga diferida sin perjudicar el LCP

En qué consiste el SEO de imágenes

El SEO de imágenes son dos tareas. Ayudar a los buscadores a entender cada imagen y evitar que cada imagen ralentice la página. La segunda tarea es donde la mayoría de los sitios pierde: un solo atributo equivocado en la imagen principal puede llevar el Largest Contentful Paint (LCP) por encima del umbral. Las correcciones son pequeñas y están bien documentadas. Esta guía se limita a lo que publican Google y web.dev.

Qué mide el LCP y dónde entran las imágenes

El LCP es el tiempo que tarda en mostrarse el elemento visible más grande, y en la mayoría de las páginas ese elemento es una imagen. La guía de LCP de web.dev (actualizada por última vez el 31 de marzo de 2025) fija el objetivo en 2,5 segundos o menos para al menos el 75% de las visitas a la página.

La guía divide el LCP en cuatro subpartes, cada una con una parte ideal del total:

• Time to First Byte: alrededor del 40% del total. Desde la solicitud hasta el primer byte del HTML.
• Retraso de carga del recurso: menos del 10%. Tiempo antes de que el navegador empiece a pedir la imagen LCP.
• Duración de carga del recurso: alrededor del 40%. Tiempo que tarda en descargarse la imagen.
• Retraso de renderizado del elemento: menos del 10%. Tiempo desde que termina la descarga hasta que se pinta la imagen.

web.dev aclara que estos porcentajes son pautas y no reglas estrictas, y que solo tienen sentido en relación unos con otros. En la práctica, localiza la subparte desproporcionada antes de cambiar nada. Un archivo pesado apunta a la duración de carga. Una solicitud tardía apunta al retraso de carga.

Formatos: AVIF, WebP y una alternativa segura

Google Search admite BMP, GIF, JPEG, PNG, WebP, SVG y AVIF en el atributo src de un elemento img, según las buenas prácticas de imágenes de Google (actualizadas el 2 de marzo de 2026). Por tanto, AVIF frente a WebP no es una cuestión de indexación. Es una cuestión de tamaño de archivo. Haz que la extensión del archivo coincida con el tipo real del archivo.

Los archivos más pequeños ayudan a la subparte de duración de carga. web.dev incluye el cambio a un formato más óptimo, como AVIF o WebP, entre las formas de reducirla. También advierte de que comprimir una imagen por sí solo puede trasladar el tiempo al retraso de renderizado del elemento sin mejorar el LCP. Mide las subpartes antes y después, no solo el tamaño del archivo.

Si usas picture o srcset, mantén una alternativa. La recomendación de Google es indicar siempre una URL alternativa en el atributo src, porque algunos navegadores y rastreadores no entienden esos atributos. Un patrón seguro es poner fuentes AVIF y WebP dentro de picture, con un img JPEG o PNG como último elemento hijo.

Carga diferida: qué aplazar y qué nunca

El atributo loading="lazy" aplaza una imagen hasta que se acerca al viewport. El navegador decide la distancia, y web.dev señala que los umbrales están fijados en el propio navegador. Funciona solo en elementos img, no en imágenes de fondo CSS.

La regla que protege el LCP es tajante: la guía de LCP de web.dev dice: "Nunca apliques carga diferida a tu imagen LCP". Una imagen diferida espera a que el diseño confirme que está cerca del viewport, lo que añade justo el retraso de carga que intentas eliminar. La guía de carga diferida (actualizada el 13 de agosto de 2024) extiende esto a cualquier imagen que probablemente esté en el viewport al cargar. Usa loading="lazy" solo para imágenes fuera del viewport inicial.

Las dimensiones también importan aquí. Sin width y height, una imagen tiene por defecto 0 por 0 píxeles. En una galería, el navegador puede entonces decidir que todo cabe en el primer viewport y cargar todas las imágenes, lo que anula el beneficio.

fetchpriority y precarga para la imagen principal

Por defecto, los navegadores piden las imágenes con prioridad baja y suben la prioridad cuando el diseño muestra que la imagen está en el viewport. La guía de Fetch Priority de web.dev muestra la solución: añade fetchpriority="high" a la imagen que probablemente sea la LCP para que empiece con prioridad alta desde el principio. En una prueba de Google Flights mejoró el LCP de 2,6 segundos a 1,9 segundos.

Tres límites que conviene recordar:

• Úsalo en una o dos imágenes. web.dev advierte de que dar prioridad alta a más imágenes hace que la señal deje de servir para el LCP.
• Es una indicación, no una orden. El navegador puede ignorarla.
• Combinar loading="lazy" con fetchpriority="high" no es realmente necesario, así que elige la carga inmediata para la imagen principal.

La indicación contraria también ayuda. Usa fetchpriority="low" en imágenes visibles al cargar que no son inmediatamente importantes, como las diapositivas 2 a 4 de un carrusel.

Si la imagen LCP es un fondo CSS, o solo se referencia desde un archivo CSS o JavaScript, el navegador no puede descubrirla pronto. web.dev aconseja precargarla con <link rel="preload" as="image"> y añadir fetchpriority="high" a la precarga, ya que la precarga por sí sola no cambia la prioridad.

Texto alternativo y nombres de archivo que ayudan a la búsqueda

Google afirma que "el atributo más importante para dar más metadatos a una imagen es el texto alternativo". Escríbelo para una persona que no puede ver la imagen: qué muestra, con palabras sencillas. El ejemplo de Google es alt="Cachorro dálmata jugando a buscar". Rellenar de palabras clave hace que una página parezca spam y no aporta nada.

Incluye siempre el atributo. web.dev señala que un alt vacío indica a un lector de pantalla que la imagen es decorativa, mientras que la ausencia del atributo deja esa cuestión sin aclarar. Usa alt vacío para imágenes puramente decorativas y descripciones reales para todo lo que aporte significado.

Los nombres de archivo dan una señal ligera. Google recomienda nombres cortos pero descriptivos, de modo que tetera-ceramica-azul.webp es mejor que imagen1.webp. Traduce los nombres de archivo cuando localices la página.

Ancho, alto y desplazamiento del diseño

Añade width y height a cada img. web.dev lo recomienda para todas las imágenes, porque el navegador reserva el espacio antes de que llegue el archivo y el diseño no salta. El efecto es mayor en las imágenes diferidas, que llegan tarde. Si controlas objetivos de velocidad en tu proceso, incluye el peso de las imágenes y el LCP en tus presupuestos de rendimiento aplicados en CI, de modo que una imagen principal pesada rompa la compilación en lugar de agotar la paciencia de un usuario.

Mapas de sitio de imágenes y imágenes en una CDN

Un mapa de sitio de imágenes ayuda a Google a encontrar imágenes que de otro modo podría pasar por alto. A diferencia de un mapa de sitio normal, puede incluir URL de imágenes de otros dominios en el elemento image:loc, así que los archivos alojados en una CDN no suponen un problema. Verifica el dominio de la CDN en Search Console para recibir informes de errores de rastreo. Para ver el panorama general del descubrimiento, consulta mapas de sitio e indexación.

Lista de comprobación breve

1. Sirve AVIF o WebP con una alternativa JPEG o PNG.
2. Deja la imagen LCP con carga inmediata, con fetchpriority="high", y precárgala si el CSS la oculta.
3. Aplica carga diferida solo a imágenes situadas debajo del primer viewport.
4. Escribe un texto alternativo claro y concreto, y nombres de archivo cortos y descriptivos.
5. Define width y height en cada imagen y después mide el resultado en Search Console.

Si quieres una segunda opinión sobre una plantilla lenta, nuestro servicio de SEO y AEO cubre este tipo de auditoría.

Preguntas frecuentes

¿Debo aplicar carga diferida a todas las imágenes de la página?

No. Aplica carga diferida a las imágenes fuera del viewport inicial y deja la imagen LCP y las demás imágenes de la primera pantalla con la carga inmediata por defecto. Una imagen LCP diferida espera a que el diseño confirme que está cerca del viewport, lo que retrasa su solicitud.

¿Es AVIF mejor que WebP para el SEO?

Ninguno es por sí solo una señal de posicionamiento, porque Google Search admite ambos. La diferencia está en la duración de carga: un archivo más pequeño ayuda, pero solo si el tiempo no se traslada sin más al retraso de renderizado del elemento.

¿Afecta el texto alternativo al posicionamiento?

Google considera el texto alternativo el atributo de metadatos de imagen más importante, porque ayuda a explicar la imagen y la página. Escríbelo para las personas que no pueden ver la imagen y evita rellenarlo de palabras clave.

¿Cuántas imágenes deben tener fetchpriority en high?

Una o dos como máximo, normalmente la imagen principal o la imagen LCP. web.dev advierte de que dar prioridad alta a más imágenes hace que la señal deje de servir para el LCP.