Guía sobre optimizar imágenes para web

Las imágenes suelen ser el elemento más pesado de cualquier página web. En muchos casos representan más del 50% del peso total de una URL, y eso tiene un impacto directo en el SEO on-page (más concretamente en la velocidad de carga, la experiencia del usuario y, por supuesto, en el posicionamiento).

El problema es que muchas webs suben las imágenes tal y como salen de la cámara o del banco de stock, sin ningún tipo de tratamiento previo. Un archivo de 4 MB donde podría ir uno de 80 KB. Un formato PNG donde debería haber un WebP. Una imagen sin atributo alt donde Google no puede leer nada.

¿Por qué optimizar imágenes es una parte esencial del SEO?

Google lleva años dejando claro que la velocidad de carga importa. Primero con el Page Speed como señal de posicionamiento, luego con los Core Web Vitals, y ahora integrándolos directamente en cómo evalúa la experiencia de página.

Dentro de las métricas que más afectan al posicionamiento, el LCP (Largest Contentful Paint) mide el tiempo que tarda en aparecer el elemento visual más grande de la página. En la mayoría de los casos, ese elemento es una imagen. Si esa imagen pesa demasiado, está en el formato equivocado o no está priorizada correctamente, el LCP se dispara y eso perjudica directamente al ranking. Pero no es solo velocidad. Las imágenes bien trabajadas también aportan:

• Visibilidad en Google Imágenes, que en algunos sectores genera un volumen de tráfico considerable.
• Contexto semántico a través del atributo alt, que ayuda a Google a entender de qué trata la página.
• Mejor experiencia de navegación, especialmente en móvil, donde una imagen mal dimensionada puede romper el layout y disparar la tasa de rebote.

Formatos de imagen y cuál usar en cada caso

El formato es la primera decisión que hay que tomar y, probablemente, la que tiene más impacto en el peso final del archivo.

En la práctica, la recomendación es clara:

• Para fotografías e imágenes complejas: WebP como formato principal, con JPEG como alternativa si necesitas compatibilidad universal.
• Para logos e iconos: SVG siempre que sea posible. Son vectoriales, pesan muy poco y escalan perfectamente a cualquier resolución.
• Para imágenes con transparencia: WebP, y PNG solo cuando el soporte de WebP no esté garantizado.
• Para animaciones: vídeo en bucle (MP4 o WebM) en lugar de GIF, que es un formato muy ineficiente.

Dimensión y tamaño de las imágenes

Un error muy habitual es subir una imagen de 3000×2000 píxeles cuando el contenedor donde se muestra tiene 800×500. El navegador carga la imagen a tamaño completo y luego la reduce visualmente mediante CSS. Todo ese peso extra se descarga sin ningún propósito.

La regla es sencilla: la imagen debe tener las dimensiones en las que se va a mostrar, o como máximo el doble para pantallas de alta densidad (Retina, por ejemplo). Un buen flujo de trabajo para dimensionar imágenes:

1. Identifica el ancho máximo del contenedor en tu diseño.
2. Si necesitas dar soporte a pantallas Retina (@2x), multiplica ese ancho por 2.
3. Redimensiona la imagen antes de subirla con esas dimensiones exactas.
4. Usa el atributo srcset para servir tamaños diferentes según el dispositivo (lo veremos más adelante).

Como referencia práctica para los tamaños más habituales:

Comprimir imágenes para incluirlas en la web

Comprimir una imagen no significa que tenga que verse mal. La clave está en ajustar el nivel de compresión al tipo de imagen y a cómo se va a usar.

• Compresión con pérdida (lossy): Reduce el tamaño del archivo eliminando información que el ojo humano apenas percibe. Es la más utilizada para fotografías. Un nivel de calidad entre 70 y 85 en JPEG o WebP suele dar resultados visualmente impecables con un peso muy reducido.
• Compresión sin pérdida (lossless): No elimina información, solo la reorganiza y codifica de forma más eficiente. Adecuada para imágenes con texto, capturas de pantalla o gráficos con colores planos, donde cualquier pérdida de calidad se nota enseguida.

No existe una respuesta única sobre cuánto se debe comprimir una imagen, pero hay una regla que funciona: comprime hasta que notes degradación visual y luego sube un punto. En la mayoría de las fotografías, un archivo bien comprimido no debería superar los 150–200 KB. Si estás por encima de eso, merece la pena revisar el proceso.
Para imágenes que no son críticas visualmente (iconos de apoyo, miniaturas en listados, imágenes de fondo) puedes bajar la calidad bastante más sin que el usuario lo perciba.

La importancia del atributo alt

El atributo alt es texto alternativo que describe el contenido de la imagen. Los motores de búsqueda lo leen para entender de qué trata la imagen, y los lectores de pantalla lo usan para describírsela a personas con discapacidad visual.

Muchos tratan el alt como un campo que hay que rellenar para que no salga el aviso en el validador. Eso es un error. Un alt bien escrito puede ayudar a posicionar en Google Imágenes y aporta contexto semántico a la página completa. Algunos ejemplos concretos para entender la diferencia:

Sobre lo último: las imágenes puramente decorativas deben tener el atributo alt vacío (alt=""), no ausente. Sin el atributo, algunos lectores de pantalla leerán el nombre del archivo, que suele ser inútil para el usuario.

¿Hay que meter la keyword en el alt? Sí, cuando es natural y tiene sentido. No se trata de repetirla en cada imagen de la página, sino de incluirla en las imágenes donde realmente describe lo que se ve. Forzar la keyword en imágenes que no tienen relación con ella es sobreoptimización y Google lo detecta.

¿Es importante el nombre del archivo para el SEO?

El nombre del archivo de imagen es otro punto de contacto que Google utiliza para entender su contenido. No es una señal SEO de gran peso, pero cuesta cero aplicarla bien. La norma es simple:

• Usa palabras descriptivas separadas por guiones.
• Escribe en minúsculas.
• Sin espacios, sin caracteres especiales, sin acentos.
• Incluye la keyword principal cuando sea relevante.

Imágenes responsive con srcset

El atributo srcset permite indicarle al navegador varias versiones de la misma imagen a diferentes tamaños, y que él mismo decida cuál cargar según la pantalla y la resolución del dispositivo.

Sin srcset, un móvil de 400 px de ancho descarga exactamente la misma imagen que un monitor de 1600 px. Con srcset, cada dispositivo descarga solo lo que necesita. La sintaxis básica:

<img
  src="imagen-800w.webp"
  srcset="
    imagen-400w.webp 400w,
    imagen-800w.webp 800w,
    imagen-1200w.webp 1200w
  "
  sizes="
    (max-width: 600px) 400px,
    (max-width: 1000px) 800px,
    1200px
  "
  alt="Descripción de la imagen"
  width="1200"
  height="800"
/>

Lo que hace cada atributo:

• src: imagen por defecto para navegadores que no soporten srcset.
• srcset: lista de versiones disponibles con su ancho real en píxeles.
• sizes: le dice al navegador a qué tamaño se va a mostrar la imagen según el viewport, para que pueda elegir la versión más adecuada.
• width y height: imprescindibles para evitar el CLS (saltos de layout) mientras carga la imagen.

¿Qué es el Lazy loading y como ayuda a la optimización?

El lazy loading (carga diferida) retrasa la descarga de imágenes hasta que el usuario se acerca a ellas al hacer scroll. Esto reduce significativamente el peso de la carga inicial de la página, ya que las imágenes que están por debajo del fold simplemente no se descargan hasta que hacen falta. Para implementarlo en HTML, se hace a través de un atributo:

<img
  src="imagen-fuera-del-fold.webp"
  alt="Descripción"
  width="800"
  height="600"
  loading="lazy"
/>

Tiene soporte en la mayoría de navegadores modernos, así que no necesitas ninguna librería adicional para la mayoría de los casos.

Aquí viene el error más común: aplicar loading="lazy" a la imagen principal de la página, la que está visible nada más cargar. Eso le dice al navegador que espere para cargarla, lo que dispara el LCP y penaliza directamente los Core Web Vitals. La regla es clara:

• Imágenes por encima del fold (visibles sin scroll): sin lazy loading, o mejor aún, con loading="eager" y preload.
• Imágenes por debajo del fold: loading="lazy".

La relación entre imágenes y Core Web Vitals

Dos de las tres métricas principales de Core Web Vitals están directamente relacionadas con las imágenes.

LCP: Largest Contentful Paint

Mide cuánto tarda en renderizarse el elemento más grande visible en pantalla. En la mayoría de las páginas, ese elemento es una imagen o un banner de cabecera. Para que el LCP sea bueno, Google establece que debe producirse en menos de 2,5 segundos. Los factores que más afectan al LCP de una imagen:

• Peso del archivo (compresión y formato).
• Si el navegador la descubre tarde en el código (imágenes en CSS o cargadas con JavaScript).
• Si no está priorizada explícitamente.

Para la imagen LCP, lo mejor que puedes hacer es añadir un <link rel="preload"> en el <head>:

<!-- En el <head> del documento -->
<link
  rel="preload"
  as="image"
  href="imagen-hero.webp"
  imagesrcset="imagen-hero-400w.webp 400w, imagen-hero-800w.webp 800w, imagen-hero-1200w.webp 1200w"
  imagesizes="100vw"
/>

Esto le dice al navegador que descargue esa imagen con la máxima prioridad, antes incluso de que el parser haya terminado de leer el HTML. En HTML también puedes usar el atributo fetchpriority="high" directamente en la etiqueta de imagen:

<img
  src="imagen-hero.webp"
  alt="Título descriptivo de la imagen principal"
  width="1200"
  height="600"
  fetchpriority="high"
/>

CLS: Cumulative Layout Shift

Mide los saltos de layout inesperados. Cuando el navegador empieza a renderizar la página sin saber las dimensiones de una imagen, reserva cero espacio para ella. Cuando la imagen termina de cargarse, empuja todo el contenido hacia abajo. Ese salto suma al CLS. La solución es añadir siempre los atributos width y height en el HTML:

<!-- Mal: el navegador no sabe cuánto espacio reservar -->
<img src="foto.webp" alt="Descripción" />

<!-- Bien: el navegador calcula el aspect ratio y reserva el espacio -->
<img src="foto.webp" alt="Descripción" width="800" height="600" />

Con los valores de width y height, el navegador puede calcular el aspect ratio de la imagen antes de descargarla y reservar el espacio exacto. No importa si luego cambias el tamaño con CSS, el aspect ratio se mantiene y no hay saltos.

La influencia del CDN en la carga de imágenes

Una imagen perfectamente comprimida que viaja desde un servidor en Frankfurt hasta un usuario en Buenos Aires va a tardar más que la misma imagen servida desde un nodo en São Paulo. Eso es lo que resuelve una CDN (Content Delivery Network).

Una CDN distribuye tus archivos estáticos (imágenes incluidas) en múltiples puntos de presencia alrededor del mundo. Cuando alguien pide una imagen, la recibe desde el nodo más cercano a su ubicación.

Algunos CDN como Cloudflare, Fastly o Bunny.net además incluyen optimización automática de imágenes: conversión a WebP según el navegador, redimensionado al vuelo, compresión automática. Si tienes una web con mucho tráfico internacional, usar un CDN con estas capacidades puede marcar una diferencia muy notable en el rendimiento.

Herramientas para optimizar imágenes

No hace falta hacer todo esto a mano. Hay herramientas que automatizan gran parte del proceso:

Plugins para CMS

Herramientas de análisis y auditoría

• PageSpeed Insights: detecta imágenes sin dimensiones, sin lazy loading, en formato no eficiente o sin comprimir.
• Lighthouse (DevTools de Chrome): misma información pero en local, con más detalle.
• WebPageTest: muestra el waterfall de carga con el peso y orden de cada imagen.
• Screaming Frog: audita todas las imágenes del sitio en busca de alt vacíos, tamaños excesivos y URLs rotas.

¿Merece la pena incluir imágenes en el sitemap?

Google tiene un protocolo de extensión para sitemaps (si quieres saber como crear un sitemap en Prestashop, tenemos un artiículo completo en nuestra web) que permite declarar las imágenes asociadas a cada URL. No es imprescindible, pero puede ayudar al rastreo en webs con mucho contenido visual donde no todas las imágenes son fácilmente detectables por el crawler. La estructura básica sería:

<?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://www.tusitio.com/articulo-ejemplo/</loc>
    <image:image>
      <image:loc>https://www.tusitio.com/wp-content/uploads/imagen-principal.webp</image:loc>
      <image:title>Título descriptivo de la imagen</image:title>
      <image:caption>Pie de foto o descripción extendida</image:caption>
    </image:image>
  </url>
</urlset>

Si usas WordPress con Yoast SEO o RankMath, estos plugins ya incluyen las imágenes en el sitemap de forma automática.

Errores frecuentes al optimizar imágenes para web

Tener en cuenta todo lo anterior no sirve de mucho si se cometen errores en la ejecución. Estos son los errores más habituales:

• Aplicar lazy loading a la imagen hero: Ya lo mencionamos antes, pero vale la pena repetirlo porque es el error más dañino. La imagen principal de la página debe cargarse lo antes posible, no de forma diferida. Aplicarle loading="lazy" retrasa el LCP y lo penaliza directamente en los Core Web Vitals.
• No incluir width y height en las imágenes: Sin estas dimensiones, el navegador no puede reservar el espacio antes de que la imagen cargue. El resultado son saltos de layout que afectan al CLS y a la experiencia de usuario, especialmente en conexiones lentas.
• Subir PNG cuando la imagen es una fotografía: El PNG sin pérdida es ideal para capturas de pantalla, logos e ilustraciones planas. Para una fotografía, genera archivos enormes sin ningún beneficio visual. Una fotografía en WebP o JPEG comprimido al 80% es prácticamente indistinguible de su versión PNG, pero puede pesar 10 veces menos.
• Alt text ausente, genérico o sobreoptimizado: Ni dejar el alt vacío en imágenes con contenido, ni rellenarlo con un listado de keywords. El alt debe describir lo que hay en la imagen de forma precisa y natural. Si la keyword encaja ahí, bien. Si no, no hay que forzarla.
• No revisar las imágenes en móvil: Una imagen puede verse perfectamente en escritorio y comportarse fatal en pantallas pequeñas: desbordarse del contenedor, aparecer con una resolución ridícula o cargar a un peso que agota la conexión móvil. Revisar el rendimiento de imágenes en móvil por separado es imprescindible, especialmente porque Google usa la versión móvil para indexar.
• Olvidar las imágenes en páginas de categoría y fichas de producto: En ecommerce, la optimización de imágenes suele pensarse para el blog o la home, y se olvidan los miles de fichas de producto que pueden tener imágenes pesadas sin comprimir, sin alt o servidas en JPEG cuando podrían estar en WebP. En un catálogo grande, esto puede suponer decenas de megabytes de peso innecesario por página de categoría.

Lista de comprobación para optimizar imágenes para web

Un resumen de todo lo que hay que revisar antes de publicar o auditar imágenes en una web (también puedes dejarlo en manos de nuestro equipo experto en posicionamiento SEO):

Preguntas frecuentes sobre optimización de imágenes para web

¿Qué formato es mejor para las imágenes de una web?

WebP es la elección más equilibrada entre compatibilidad y eficiencia. Tiene un soporte de más del 95% entre navegadores modernos y ofrece entre un 25% y un 40% de ahorro de peso respecto a JPEG. Si tu CMS genera AVIF de forma nativa y no tienes restricciones de compatibilidad, AVIF puede reducir el peso aún más, pero su soporte todavía no es universal.

¿Cuánto debe pesar una imagen en una web?

No hay un límite absoluto, porque depende del tamaño y la importancia visual de la imagen. Como referencia general: imágenes de contenido por debajo de 100 KB, miniaturas e iconos por debajo de 30 KB, e imágenes hero entre 100 y 250 KB en función de sus dimensiones y calidad.

¿Las imágenes en CSS también afectan al LCP?

Sí, y más que las imágenes en HTML. Las imágenes cargadas mediante background-image en CSS no se descubren hasta que el navegador ha procesado la hoja de estilos. Esto retrasa su carga respecto a las imágenes declaradas directamente en el HTML. Para la imagen LCP, lo mejor es usar siempre un elemento <img> o <picture> en el HTML.

¿Merece la pena usar AVIF si no todos los navegadores lo soportan?

Sí, usando el elemento <picture> con fallback a WebP o JPEG. De ese modo, los navegadores que soporten AVIF lo descargarán y el resto recibirán la versión WebP o JPEG. No hay pérdida de compatibilidad y el ahorro de peso en los navegadores modernos puede ser considerable.

¿El alt text de las imágenes ayuda al SEO de la página?

Sí, de dos formas. Primero, aporta contexto semántico a la página y refuerza la relevancia temática cuando la keyword encaja de forma natural. Segundo, es la vía principal para que Google indexe las imágenes en Google Imágenes, que en sectores como gastronomía, viajes, moda o decoración puede generar un volumen de tráfico notable.

¿Cómo sé si las imágenes están afectando al LCP de mi web?

Abre PageSpeed Insights, introduce la URL de la página principal o de las páginas más importantes y revisa la sección de diagnósticos. Si el LCP es una imagen, la propia herramienta la identifica y te indica qué parte del tiempo de carga corresponde a la descarga de esa imagen. Lighthouse en las DevTools de Chrome ofrece la misma información con más detalle, directamente en el navegador.