SEO de imágenes: texto alternativo, formatos, compresión y lazy load

Google Images procesa miles de millones de búsquedas cada mes. Según datos de Jumpshot, alrededor del 22 % de todas las búsquedas web incluye búsqueda de imágenes. Para tiendas online, plataformas de contenido y portafolios, es un canal de tráfico importante que la mayoría de los sitios ignora por completo.

La optimización de imágenes afecta no solo a la visibilidad en Google Images, sino también a la búsqueda orgánica: a la velocidad de carga de la página (LCP), a Core Web Vitals, a la experiencia de usuario y, de forma indirecta, a las posiciones en los resultados de búsqueda principales.

zoom_in

Por qué optimizar imágenes para el SEO

Una buena optimización de imágenes resuelve varios problemas a la vez: mejora la accesibilidad del sitio para usuarios con discapacidad visual, acelera la carga de las páginas, da a Google un contexto claro y abre un canal de tráfico orgánico adicional a través de Google Images.

zoom_in

Las imágenes son el recurso más pesado en la mayoría de las páginas. Las imágenes sin optimizar ralentizan la carga, empeoran el LCP (Largest Contentful Paint) y afectan directamente a las puntuaciones de Core Web Vitals. Desde 2021, Google incluye los CWV como señal de posicionamiento.

Texto alternativo: reglas de redacción

El atributo alt (alt="...") es la única forma de explicar a Google qué muestra una imagen. También se muestra cuando una imagen no carga, y lo leen en voz alta los lectores de pantalla para usuarios con discapacidad visual.

Cómo escribirlo correctamente

Reglas para el texto alternativo: describe lo que se ve en la imagen; incluye la palabra clave objetivo de forma natural si viene al caso; no empieces con frases como «imagen de…», «foto de…» o «ilustración de…», porque Google ya sabe que es una imagen. Longitud óptima: de 5 a 15 palabras.

<!-- Informative image -->
<img
  src="/images/crawl-budget-chart.webp"
  alt="Crawl budget distribution chart by page type"
  width="800"
  height="450"
/>

<!-- Decorative image -->
<img
  src="/images/divider.svg"
  alt=""
  role="presentation"
/>

<!-- Image link: alt describes the link purpose -->
<a href="/tools">
  <img
    src="/images/seo-scripts-icon.webp"
    alt="SEO Scripts: tools for technical audits"
    width="64"
    height="64"
  />
</a>

Nombres de archivo y rutas

Google analiza el nombre del archivo de imagen como señal adicional. El nombre DSC_0047.jpg no aporta información; canonical-url-diagram.webp indica el tema y el contexto.

Formatos: WebP, AVIF, JPEG, PNG

La elección del formato es uno de los factores clave de la optimización. Los formatos modernos (WebP, AVIF) ofrecen archivos considerablemente más pequeños con la misma calidad visual.

Estrategia recomendada: usa WebP como formato principal, con un JPEG de respaldo mediante el elemento <picture>. Pasa a AVIF cuando la mayor parte de tu audiencia use Chrome 85+ y Safari 16+. Usa SVG para todos los gráficos vectoriales, sin excepción.

<!-- Modern approach: AVIF → WebP → JPEG -->
<picture>
  <source srcset="/images/hero.avif" type="image/avif" />
  <source srcset="/images/hero.webp" type="image/webp" />
  <img
    src="/images/hero.jpg"
    alt="SEO audit of an online store: 340% traffic growth"
    width="1200"
    height="675"
    loading="eager"
    fetchpriority="high"
  />
</picture>

Compresión sin pérdida de calidad

La mayoría de las imágenes puede comprimirse entre un 30 % y un 70 % sin pérdida visible de calidad. Herramientas clave: Squoosh (en línea), ImageMagick (CLI), Sharp (Node.js) y Pillow (Python).

Ajustes de calidad óptimos

// Next.js: automatic optimisation via next/image
import Image from 'next/image';

// next/image automatically:
// - converts to WebP/AVIF
// - generates srcset
// - adds lazy loading
// - prevents layout shift (requires width/height)
export function HeroImage() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Organic traffic growth after SEO audit"
      width={1200}
      height={675}
      priority // disables lazy load for the hero image
    />
  );
}

Lazy load y loading='eager'

El lazy loading retrasa la carga de las imágenes que están fuera de la pantalla hasta que el usuario se desplaza hasta ellas. Así se reduce el peso inicial de la página y se acorta el tiempo hasta la interactividad (Time to Interactive).

<!-- Below-fold images: lazy loading -->
<img
  src="/images/article-thumbnail.webp"
  alt="XML sitemap audit screenshot"
  width="400"
  height="225"
  loading="lazy"
/>

<!-- Hero and LCP images: eager + fetchpriority -->
<img
  src="/images/hero.webp"
  alt="Real-time SEO analytics"
  width="1200"
  height="675"
  loading="eager"
  fetchpriority="high"
/>

Dimensiones, srcset y dirección artística

Indica siempre los atributos width y height. Así el navegador reserva el espacio de la imagen antes de que cargue y evita el Cumulative Layout Shift (CLS), es decir, que el contenido salte durante la carga.

<!-- srcset: different sizes for different screens -->
<img
  src="/images/blog-cover.webp"
  srcset="
    /images/blog-cover-480.webp 480w,
    /images/blog-cover-800.webp 800w,
    /images/blog-cover-1200.webp 1200w
  "
  sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
  alt="Internal linking architecture guide: site structure diagram"
  width="1200"
  height="675"
  loading="lazy"
/>

El atributo srcset permite al navegador elegir el tamaño óptimo de la imagen para la pantalla actual y la densidad de píxeles. En un dispositivo móvil con 2x DPI, el navegador carga la versión de 800 px en lugar de la de 1200 px, lo que ahorra ancho de banda y mejora la velocidad.

Datos estructurados

El marcado Schema.org ayuda a Google a mostrar imágenes en resultados enriquecidos: fichas de producto, recetas y artículos. Los tipos más relevantes para las imágenes son ImageObject, Article, Product y Recipe.

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Image SEO: complete guide",
  "image": {
    "@type": "ImageObject",
    "url": "https://seohead.tech/images/blog/image-seo.webp",
    "width": 1200,
    "height": 675,
    "caption": "Image optimisation for search: formats, alt text, compression"
  },
  "datePublished": "2026-05-17",
  "author": {
    "@type": "Person",
    "name": "seohead"
  }
}

Sitemap de imágenes

Google recomienda incluir información de imagen en tu sitemap XML. Así se ayuda a indexar las imágenes cargadas mediante JavaScript y se aporta contexto adicional (título, pie de foto y licencia).

<?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://seohead.tech/blog/image-seo</loc>
    <image:image>
      <image:loc>https://seohead.tech/images/blog/image-seo.webp</image:loc>
      <image:title>Image SEO: alt text, formats, compression, and lazy load</image:title>
      <image:caption>Complete guide to image optimisation for search</image:caption>
    </image:image>
  </url>
</urlset>

Preguntas frecuentes