Cómo optimizar las imágenes de un sitio web para SEO

Cuando hablamos de SEO, solemos pensar en palabras clave, enlaces o estructura de contenidos. Sin embargo, las imágenes representan entre el 40 y el 60 % del peso total de una página web. Una imagen mal optimizada puede destruir tu velocidad de carga, hundir tus Core Web Vitals y dejar tráfico sobre la mesa. Esta guía te muestra cómo evitarlo con un proceso de 8 pasos reproducible y sin herramientas de pago.

¿Por qué las imágenes son tan críticas para el SEO?

Google evalúa la experiencia del usuario como un factor de ranking directo a través de las Core Web Vitals. El LCP (Largest Contentful Paint), que mide cuánto tarda en renderizarse el elemento visual principal de una página, está íntimamente ligado al peso y la carga de imágenes. Un LCP deficiente penaliza directamente tu posición en los resultados de búsqueda.

Además, Google Images genera un volumen de tráfico orgánico que muchos negocios subestiman. Si tus imágenes tienen atributos correctos y aparecen en el sitemap, pueden posicionarse por sí solas y atraer usuarios con intención de compra o descubrimiento visual.

Los 8 pasos para optimizar imágenes con criterio SEO

Paso 1: Nombramiento del archivo

Renombra la imagen antes de subirla al servidor usando palabras clave descriptivas separadas por guiones medios. Google lee el nombre del archivo como una señal de relevancia. Un nombre como tenis-deportivos-rojos.jpg le dice al buscador de qué trata la imagen antes de analizar cualquier otro atributo.

Nunca subas archivos con nombres genéricos como IMG_9082.jpg o screenshot_1.png. Estas denominaciones no aportan ningún valor semántico y son una oportunidad perdida.

Paso 2: Redimensionamiento

Ajusta el ancho y el alto a las dimensiones exactas que requiere el contenedor en tu diseño. Subir una imagen de 3.000 px para un espacio de 800 px significa transferir más del triple de los datos necesarios: un despilfarro de ancho de banda que lastra directamente tu velocidad de carga.

Inspecciona tu diseño o usa las DevTools del navegador para conocer el tamaño real del contenedor antes de exportar.

Herramienta recomendada: photopea.com

Paso 3: Selección de formato

Elegir el formato correcto puede reducir el peso de un archivo hasta un 70 % sin pérdida perceptible de calidad. La regla general es:

• WebP / AVIF, para fotografías y gráficos generales. Son más ligeros y la opción preferida.
• SVG, para iconos, logotipos y cualquier gráfico vectorial.
• PNG, solo cuando necesites transparencia obligatoria.
• JPEG, reservado para casos de compatibilidad estricta con sistemas legacy.

WebP ofrece entre un 25 y un 35 % menos de peso que JPEG con calidad equivalente. AVIF puede superar ese margen, aunque su soporte en navegadores antiguos es menor.

Herramienta recomendada: photopea.com

Paso 4: Compresión de peso

Tras elegir formato y dimensiones, aplica compresión para eliminar metadatos innecesarios: datos EXIF, perfiles de color embebidos, coordenadas GPS. El objetivo ideal es que cada imagen pese por debajo de los 100 KB para favorecer las métricas de Core Web Vitals.

Herramientas como TinyPNG aplican compresión inteligente con pérdida mínima visible. Para proyectos a gran escala, considera integrar la compresión en tu pipeline de build con librerías como Sharp o Imagemin.

Herramienta recomendada: tinypng.com

Paso 5: Atributo alt (texto alternativo)

El atributo alt cumple una doble función crítica: aporta contexto semántico a Google Images y garantiza la accesibilidad web para usuarios que navegan con lectores de pantalla. Redacta una descripción clara y natural de lo que se ve en la imagen.

Incorpora la palabra clave principal de la página solo si tiene sentido contextual. El keyword stuffing en atributos alt es penalizable por Google y ofrece una experiencia deficiente para personas con discapacidad visual.

Paso 6: Atributo title (opcional)

El atributo title genera un tooltip que aparece cuando el usuario pasa el cursor sobre la imagen. Su impacto SEO directo es limitado, pero aporta una capa extra de contexto semántico y mejora la experiencia en escritorio.

Mantenlo corto, descriptivo y diferente al texto alt para no duplicar información.

Paso 7: Lazy loading

El atributo loading="lazy" instruye al navegador para que descargue la imagen solo cuando el usuario esté a punto de verla al hacer scroll. Esto reduce drásticamente la cantidad de datos transferidos en el primer renderizado, mejorando el LCP y el TBT.

La mayoría de CMS modernos como WordPress, Shopify o Webflow lo incluyen por defecto. En proyectos con código propio, añádelo manualmente a todas las imágenes fuera del viewport inicial. Importante: la primera imagen visible en pantalla (imagen hero) nunca debe usar lazy loading, ya que retrasaría el LCP.

Paso 8: Inclusión en el sitemap XML

Para que los bots de Google rastreen e indexen tus imágenes correctamente, estas deben estar incluidas en el sitemap XML del sitio. Un sitemap de imágenes bien configurado puede multiplicar tu visibilidad en Google Images y en búsquedas con intención visual.

Plugins como Yoast SEO o RankMath en WordPress generan sitemaps de imágenes automáticamente. En proyectos personalizados, añade las etiquetas <image:image> correspondientes dentro de cada entrada del sitemap.

El código que necesitas implementar

Un elemento <img> correctamente optimizado combina todos los atributos descritos. Este es el patrón que deberías aplicar en cada imagen de tu sitio:

<!-- Imagen correctamente optimizada para SEO -->
<img
  src="tenis-deportivos-rojos.webp"
  alt="Tenis deportivos rojos para running con suela antideslizante"
  title="Tenis deportivos para running"
  width="800"
  height="600"
  loading="lazy"
/>

<!-- Imagen sin optimizar, evita este patrón -->
<img src="IMG_9082.jpg" />

Nota sobre width y height: Declarar explícitamente las dimensiones reserva el espacio en el layout antes de que la imagen cargue, evitando el CLS (Cumulative Layout Shift). El CLS penaliza los saltos visuales durante la carga y es otra métrica clave de Core Web Vitals.

Checklist antes de publicar cada imagen

• El nombre del archivo usa palabras clave y guiones medios, sin espacios ni caracteres especiales.
• Las dimensiones de la imagen coinciden con el contenedor donde se va a mostrar.
• El formato es WebP, AVIF o SVG según el tipo de contenido.
• El peso final está por debajo de 100 KB (o justificado si es imagen hero de gran tamaño).
• El atributo alt describe la imagen con naturalidad e integra la keyword si tiene sentido.
• Se han declarado width y height explícitamente en el HTML.
• El atributo loading="lazy" está presente en todas las imágenes fuera del viewport inicial.
• El sitemap XML del sitio incluye la URL de la imagen.

Conclusión

Cada imagen sin optimizar es una oportunidad de mejora directa en velocidad, accesibilidad y posicionamiento. Implementar estos 8 pasos no requiere conocimientos avanzados ni herramientas de pago: con la checklist anterior y las herramientas descritas, puedes convertir las imágenes de tu web en un activo SEO real.

Aplica este proceso de forma consistente en cada nueva publicación y, si tienes un sitio con historial, considera realizar una auditoría de imágenes existentes con herramientas como Screaming Frog o Google Search Console. Los resultados en Core Web Vitals, y en tráfico orgánico, serán visibles en pocas semanas.