SEO para imágenes: guía completa de optimización

Las imágenes representan, de media, más del 50% del peso de una página web. Son también uno de los elementos más infravalorados en cualquier estrategia SEO: la mayoría de sitios las tratan como decoración y pierden tráfico real que Google Imágenes podría estarles enviando hoy mismo.

Optimizar imágenes para SEO no es solo comprimir archivos para que la página cargue más rápido. Es una disciplina que combina rendimiento técnico, accesibilidad y señales de relevancia que Google usa para entender y clasificar tu contenido visual. Esta guía cubre todo el proceso, desde cómo nombrar los archivos hasta cómo implementar datos estructurados para imágenes.

Por qué optimizar imágenes es crítico para el SEO

El impacto de las imágenes sobre el SEO se produce en dos dimensiones que a menudo se trabajan por separado cuando deberían tratarse de forma integrada.

Impacto en la velocidad de carga

Los Core Web Vitals —las métricas de experiencia de usuario que Google usa como factor de posicionamiento— son extremadamente sensibles al rendimiento de las imágenes. El Largest Contentful Paint (LCP) mide el tiempo que tarda en cargarse el elemento visual más grande de la pantalla, que en la mayoría de páginas es una imagen. Una imagen mal optimizada puede arruinar el LCP aunque el resto del sitio sea rápido.

El Cumulative Layout Shift (CLS) también se ve afectado cuando las imágenes no declaran sus dimensiones en el HTML: el navegador no puede reservar el espacio correcto y el contenido salta cuando la imagen carga, penalizando la experiencia de usuario.

Google Imágenes como fuente de tráfico orgánico

Google Imágenes genera entre el 22% y el 26% de todas las búsquedas en Google, según datos de SparkToro. Para sectores como decoración, moda, recetas, arquitectura, productos de consumo o tutoriales visuales, puede representar una fuente de tráfico significativa y relativamente poco competida.

Aparecer en Google Imágenes requiere las mismas señales de relevancia que el SEO tradicional —contexto, texto alternativo, autoridad de la página— pero tiene sus propias reglas de optimización.

Nombres de archivo: la primera señal de relevancia

El nombre del archivo de imagen es la primera información que Google recibe sobre el contenido de esa imagen. Es también uno de los aspectos que más se descuida.

Convenciones básicas

  • Usa palabras descriptivas, no códigos de cámara ni identificadores genéricos. DSC_4821.jpg no le dice nada a Google; zapatos-running-hombre-azul.jpg sí.
  • Separa las palabras con guiones, no con guiones bajos ni espacios. Google trata los guiones como separadores de palabras; los guiones bajos no. seo-para-imagenes.jpg es correcto; seo_para_imagenes.jpg o seoparaimagenes.jpg son incorrectos.
  • Incluye la keyword principal de forma natural cuando sea relevante. No rellenes el nombre con diez keywords; eso no ayuda y puede penalizar.
  • Usa minúsculas y evita caracteres especiales, tildes y ñ en nombres de archivo para evitar problemas de codificación en algunas URLs.

Un nombre de archivo bien construido para una imagen de portada de artículo sobre SEO de imágenes sería: seo-imagenes-optimizacion-web.jpg.

Alt text: accesibilidad y SEO en el mismo atributo

El atributo alt es el elemento de SEO on-page más importante para las imágenes. Tiene dos funciones distintas pero complementarias: describe la imagen a las personas con discapacidad visual que usan lectores de pantalla, y le dice a Google qué muestra la imagen cuando no puede verla directamente.

Cómo escribir alt text correcto

El alt text debe describir lo que hay en la imagen de forma concisa y específica, incluyendo la keyword cuando sea relevante de forma natural.

<!-- Incorrecto: vacío -->
<img src="grafico-trafico-organico.png" alt="">

<!-- Incorrecto: keyword stuffing -->
<img src="grafico-trafico-organico.png" alt="SEO imágenes SEO optimización imágenes SEO Google">

<!-- Correcto: descriptivo y con keyword natural -->
<img src="grafico-trafico-organico.png" alt="Gráfico de evolución del tráfico orgánico en Google Search Console">

Errores comunes que hay que evitar

Dejar el alt vacío en imágenes de contenido. El alt="" es correcto únicamente para imágenes puramente decorativas que no aportan información. Para cualquier imagen que refuerce el contenido, el alt debe describir lo que muestra.

Repetir el texto que ya aparece en el pie de foto. Si el pie ya dice "Evolución del tráfico en Q1 2026", el alt puede añadir contexto diferente o ser más conciso.

Escribir "Imagen de..." o "Foto de..." al principio. Los lectores de pantalla ya anuncian que es una imagen. Empieza directamente con la descripción.

Usar el mismo alt para imágenes diferentes. Cada imagen debe tener un alt único que la describa específicamente.

Formatos de imagen: JPEG, PNG, WebP y AVIF

Elegir el formato correcto tiene un impacto directo sobre el peso del archivo y, por tanto, sobre la velocidad de carga. No existe un formato universal: cada uno tiene casos de uso específicos.

JPEG

El formato estándar para fotografías y imágenes con gradientes de color. Usa compresión con pérdida, lo que permite reducir el tamaño significativamente a costa de perder algo de calidad. Para fotografías publicadas en web, una calidad del 75-85% suele ser el equilibrio óptimo entre peso y nitidez.

Cuándo usarlo: fotografías de producto, imágenes de portada, fotos de equipo.

PNG

Usa compresión sin pérdida y soporta transparencia. Es el formato correcto cuando la imagen tiene fondo transparente o cuando se necesita máxima nitidez en texto, iconos o gráficos con líneas definidas. Su desventaja es que pesa considerablemente más que JPEG para fotografías.

Cuándo usarlo: logos, capturas de pantalla, infografías, iconos, cualquier imagen que requiera transparencia.

WebP

Desarrollado por Google, WebP ofrece una compresión entre un 25% y un 35% mejor que JPEG o PNG con calidad visual equivalente. Soporta tanto compresión con pérdida como sin pérdida, y también transparencia. El soporte en navegadores es prácticamente universal desde 2020.

Cuándo usarlo: cualquier imagen en producción donde WebP sea compatible con el CMS o el stack tecnológico. Es la mejor opción por defecto hoy.

AVIF

El formato más moderno. Basado en el códec de vídeo AV1, AVIF consigue comprimir imágenes entre un 50% y un 60% más que JPEG con calidad superior. Su único inconveniente es el tiempo de codificación, más lento que WebP, y el soporte en navegadores, que aunque ya es mayoritario no es universal en versiones antiguas de Safari o Edge.

Cuándo usarlo: cuando el rendimiento es prioritario y el soporte de navegadores no es una restricción crítica.

Cómo servir el formato correcto con <picture>

El elemento HTML <picture> permite servir el formato más moderno a los navegadores que lo soportan y el formato de fallback a los que no:

<picture>
  <source srcset="imagen.avif" type="image/avif">
  <source srcset="imagen.webp" type="image/webp">
  <img src="imagen.jpg" alt="Descripción de la imagen" width="800" height="600">
</picture>

Compresión: herramientas y valores objetivo

Incluso eligiendo el formato correcto, las imágenes sin comprimir pueden pesar varios megabytes. El objetivo es encontrar el mínimo peso que no degrada la calidad percibida por el usuario.

Valores objetivo de peso

Como regla general:

  • Imágenes de portada o hero: menos de 200 KB.
  • Imágenes de contenido inline: menos de 100 KB.
  • Miniaturas y thumbnails: menos de 30 KB.

Estos son umbrales orientativos. Una fotografía de alta resolución para un artículo de portada puede justificar más peso; una imagen de icono nunca debería acercarse a 100 KB.

Herramientas de compresión

Squoosh (squoosh.app): herramienta web gratuita de Google. Permite comparar visualmente el original con el resultado comprimido antes de descargar. Soporta JPEG, PNG, WebP, AVIF y otros formatos. Ideal para comprimir imágenes individuales con control total sobre la calidad.

TinyPNG / TinyJPG (tinypng.com): compresión automática con pérdida mínima perceptible. La versión gratuita permite comprimir hasta 20 imágenes de 5 MB. Es especialmente eficiente para PNGs. La API de TinyPNG permite integrar la compresión en flujos de publicación automatizados.

ShortPixel: plugin para WordPress que comprime automáticamente las imágenes al subirlas al CMS. Ofrece conversión automática a WebP y AVIF. Es una de las soluciones más completas para webs en WordPress que generan mucho contenido con imágenes.

ImageOptim (para macOS): herramienta de escritorio que combina múltiples algoritmos de compresión sin pérdida. Excelente para PNGs de alta calidad donde no se puede aceptar ninguna degradación visual.

Dimensiones: imágenes responsive con srcset y sizes

Servir una imagen de 2000 píxeles de ancho a un dispositivo móvil con pantalla de 375 píxeles es un desperdicio enorme de ancho de banda. Los atributos srcset y sizes permiten que el navegador descargue exactamente la resolución que necesita.

El atributo srcset

srcset define un conjunto de versiones de la misma imagen a diferentes resoluciones:

<img
  src="imagen-800.jpg"
  srcset="imagen-400.jpg 400w, imagen-800.jpg 800w, imagen-1200.jpg 1200w"
  alt="Descripción de la imagen"
  width="800"
  height="533"
>

El valor 400w indica que esa versión mide 400 píxeles de ancho. El navegador elige la versión más apropiada según el ancho de la pantalla y la densidad de píxeles del dispositivo.

El atributo sizes

sizes le dice al navegador qué ancho ocupará la imagen en el diseño para cada media query:

<img
  src="imagen-800.jpg"
  srcset="imagen-400.jpg 400w, imagen-800.jpg 800w, imagen-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Descripción de la imagen"
  width="800"
  height="533"
>

Declarar siempre width y height es fundamental para evitar el CLS: permite al navegador reservar el espacio correcto antes de que la imagen cargue.

Lazy loading: carga diferida nativa

El lazy loading retrasa la carga de imágenes que están fuera de la pantalla hasta que el usuario se aproxima a ellas al hacer scroll. Reduce el tiempo de carga inicial y el consumo de datos.

Implementación nativa con loading="lazy"

Desde 2019, los navegadores modernos soportan lazy loading nativo sin necesidad de JavaScript:

<img
  src="imagen.jpg"
  alt="Descripción de la imagen"
  loading="lazy"
  width="800"
  height="533"
>

El soporte es prácticamente universal en navegadores modernos. La única excepción es Safari en iOS, que lo soporta desde iOS 15.4.

Qué imágenes NO deben usar lazy loading

La imagen de portada o hero —la que aparece en la parte visible de la página al cargar— nunca debe tener loading="lazy". Si la imagen más grande de la pantalla se carga de forma diferida, el LCP empeora drásticamente. Usa loading="eager" (o simplemente no añadas el atributo) para las imágenes above the fold.

Sitemaps de imágenes: cuándo y cómo crearlos

Un sitemap de imágenes amplía el sitemap XML estándar con metadatos sobre las imágenes de cada URL. Ayuda a Google a descubrir imágenes que de otro modo podrían pasarle desapercibidas, especialmente las cargadas mediante JavaScript.

Cuándo crear un sitemap de imágenes

Es especialmente útil cuando:

  • Las imágenes se cargan dinámicamente con JavaScript y Google puede tener dificultades para rastrearlas.
  • El sitio tiene un catálogo extenso de imágenes (ecommerce, fotografía, galería).
  • Se busca activamente posicionar en Google Imágenes.

Estructura básica

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://comunicua.com/blog/seo-imagenes</loc>
    <image:image>
      <image:loc>https://comunicua.com/blog/images/seo-imagenes-portada.jpg</image:loc>
      <image:title>SEO para imágenes: guía completa de optimización</image:title>
      <image:caption>Guía completa para optimizar imágenes para SEO</image:caption>
    </image:image>
  </url>
</urlset>

Plugins como Yoast SEO generan automáticamente el sitemap de imágenes en WordPress. Para sitios personalizados, se puede automatizar con scripts que recorren las páginas y extraen las referencias a imágenes.

Structured data para imágenes: ImageObject

El tipo ImageObject de Schema.org permite describir imágenes de forma estructurada. Se usa habitualmente como propiedad anidada dentro de otros tipos de schema, como BlogPosting o Product, pero también puede implementarse de forma independiente.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://comunicua.com/blog/images/seo-imagenes-portada.jpg",
  "name": "SEO para imágenes: guía completa",
  "description": "Infografía sobre las técnicas de optimización de imágenes para SEO",
  "author": {
    "@type": "Organization",
    "name": "Comunicua"
  },
  "license": "https://comunicua.com/licencias",
  "acquireLicensePage": "https://comunicua.com/contacto"
}
</script>

Las propiedades license y acquireLicensePage son especialmente relevantes: Google las usa para mostrar información de licencia en Google Imágenes, lo que aumenta la prominencia de la imagen y facilita que los usuarios encuentren el origen correcto del contenido.

Cómo aparecer en Google Imágenes y Google Discover

Señales de relevancia para Google Imágenes

Aparecer bien posicionado en Google Imágenes depende de varios factores combinados:

  • Relevancia del contexto: el texto alrededor de la imagen, el título de la página y la URL deben reforzar el tema de la imagen.
  • Alt text descriptivo con keywords relevantes.
  • Autoridad de la página: las imágenes en páginas con buena autoridad de dominio y muchos enlaces tienden a posicionarse mejor.
  • Originalidad: Google penaliza imágenes duplicadas. Las imágenes originales tienen ventaja sobre las de stock.
  • Alta resolución: Google Imágenes favorece imágenes de buena calidad y resolución suficiente.

Google Discover

Google Discover es el feed personalizado que aparece en la página de inicio de la app de Google y en Chrome móvil. Para aparecer en Discover, las páginas deben:

  • Tener imágenes de al menos 1200 píxeles de ancho (Google lo especifica en su documentación).
  • Usar el schema markup BlogPosting con la propiedad image correctamente declarada.
  • Generar señales de interés y actualidad (contenido reciente con buen engagement).

La etiqueta max-image-preview en el robots meta tag controla el tamaño de vista previa que Google puede usar en Discover. Para maximizar la visibilidad, configúrala como large:

<meta name="robots" content="max-image-preview:large">

Lista de verificación rápida: SEO de imágenes

Antes de publicar cualquier imagen, comprueba:

  • El nombre de archivo es descriptivo, usa guiones y contiene la keyword relevante.
  • El atributo alt describe la imagen de forma concisa e incluye la keyword de forma natural.
  • El formato elegido es el más apropiado (WebP como opción por defecto).
  • La imagen está comprimida por debajo del peso objetivo para su tipo.
  • Se han declarado los atributos width y height en la etiqueta <img>.
  • Las imágenes above the fold no tienen loading="lazy".
  • Las imágenes below the fold tienen loading="lazy".
  • El sitemap de imágenes incluye las imágenes importantes del contenido.

Conclusión: las imágenes como ventaja SEO

El SEO de imágenes es uno de los canales con más margen de mejora en la mayoría de sitios web. La combinación de rendimiento técnico —formatos modernos, compresión, lazy loading, responsive images— y señales de relevancia —nombres de archivo, alt text, datos estructurados— crea una base sólida tanto para mejorar los Core Web Vitals como para capturar tráfico de Google Imágenes.

La implementación no requiere grandes cambios en el sitio: con un flujo de trabajo bien definido para preparar y subir imágenes, y los ajustes técnicos correctos en el CMS, el impacto se acumula en cada nuevo contenido publicado.

Si quieres auditar el estado actual de las imágenes de tu web e implementar un flujo de optimización sistemático, contacta con el equipo de Comunicua. Analizamos tu sitio e identificamos las mejoras con mayor impacto en velocidad y visibilidad.

Sugerencias de enlazado interno