Cómo optimizar imágenes para SEO y velocidad de carga

Optimizar imágenes para una web consiste en servir cada imagen en un formato moderno (AVIF o WebP), con el tamaño real al que se va a ver y el menor peso posible, y en describirla bien con el atributo alt, el nombre del archivo y el texto que la rodea. Así la página carga rápido y Google entiende la imagen y puede mostrarla en Google Imágenes y en Discover.

Si tienes prisa, estos son los seis pasos que más se notan, por orden:

1. Formato moderno: AVIF o WebP, con un JPEG o PNG de respaldo.
2. Tamaño real: no subas una foto de 4000 píxeles para mostrarla a 800.
3. Compresión: baja la calidad hasta justo antes de que se note.
4. Ancho y alto en el HTML (width y height) para que la página no dé saltos al cargar.
5. Carga diferida (loading="lazy") solo en las imágenes que quedan fuera de la primera pantalla.
6. Texto alternativo (alt) que describa lo que se ve, y un nombre de archivo que se entienda.

El resto de la guía explica cada paso, con código de ejemplo, y qué mirar en WordPress y en una tienda online.

Por qué las imágenes afectan a la velocidad de carga y al SEO

Las imágenes afectan a la velocidad y al SEO porque suelen ser lo que más pesa de una página y, muchas veces, el elemento más grande que ve el usuario al entrar. Si esa imagen tarda, empeora el LCP (Largest Contentful Paint, el tiempo que tarda en pintarse el elemento principal), que es una de las métricas Core Web Vitals de Google.

La propia documentación de Google lo dice así: las imágenes suelen ser los elementos que más incrementan el tamaño general de las páginas. Y los objetivos están publicados: según la guía de Web Vitals de web.dev, una buena experiencia pide un LCP de 2,5 segundos o menos y un CLS (los saltos de la página mientras carga) de 0,1 o menos, medidos en el 75 % de las visitas.

Las imágenes tocan las dos métricas:

• LCP: la foto de cabecera o la imagen principal del producto suele ser el elemento que se mide.
• CLS: una imagen sin dimensiones declaradas empuja el texto hacia abajo cuando termina de cargar.

Hay una frase que le escuché a Sergio Falcón (@runical), de quien aprendí muchas de las cosas que cuento aquí, y que sigo usando: el WPO (Web Performance Optimization, la optimización del rendimiento web) no consiste solo en ser rápido, sino también en parecerlo. Con las imágenes se consiguen las dos cosas.

Y luego está la otra mitad: una imagen bien descrita puede traer visitas por sí misma desde Google Imágenes, desde los bloques de imágenes de la página de resultados y desde Discover. Si quieres ver el resto de factores de rendimiento, los tienes en la guía sobre cómo mejorar la velocidad de carga de tu web.

Qué formato de imagen usar en una web: JPEG, PNG, WebP, AVIF o SVG

El formato de imagen recomendable hoy para una web es AVIF o WebP en fotografías e ilustraciones, y SVG en logotipos e iconos. JPEG y PNG quedan como respaldo para navegadores antiguos. Google indexa todos ellos: su documentación cita BMP, GIF, JPEG, PNG, WebP, SVG y AVIF como formatos admitidos en la Búsqueda.

La lista sale de las prácticas recomendadas de SEO para imágenes de Google. Durante años WebP fue un formato que solo entendía Chrome. Hoy lo admiten todos los navegadores actuales, y AVIF también, así que la regla de «JPG para fotos y PNG para transparencias» ya no es el punto de partida.

Si quieres profundizar en cada formato, Google mantiene un curso gratuito y muy completo: Learn Images, en web.dev.

JPEG progresivo o baseline: qué diferencia hay

Un JPEG baseline se pinta por franjas, de arriba abajo, como una persiana, siempre a máxima calidad. Un JPEG progresivo muestra primero la imagen completa con poca definición y la va afinando a medida que llegan los datos.

El resultado final es el mismo, pero la sensación del usuario es mejor con el progresivo: no ve huecos en blanco ni imágenes cortadas. Si tienes que servir JPEG, yo uso el modo progresivo.

Transparencias y canal alfa

El canal alfa es la información que define la opacidad de cada píxel de una imagen. Es lo que permite colocar un logotipo o un producto recortado sobre cualquier fondo.

Antes esto obligaba a usar PNG. Hoy WebP y AVIF admiten transparencia con bastante menos peso, y para logotipos e iconos lo normal es SVG.

Cómo reducir el peso de una imagen sin perder calidad

El peso de una imagen se reduce con cuatro acciones: ajustar sus dimensiones al tamaño al que se muestra, recortar lo que no aporta, comprimirla y quitarle los metadatos. Hechas en ese orden, lo habitual es que la imagen pese una fracción del original sin que nadie note la diferencia a simple vista.

Compresión con pérdida o sin pérdida

Todas las herramientas de compresión hacen una de estas dos cosas:

• Compresión con pérdida: descarta información de la imagen. Pierde algo de calidad, a veces imperceptible, a cambio de ahorrar muchos bytes. Es la opción normal para fotografías.
• Compresión sin pérdida: reorganiza los datos sin descartar nada. Ahorra menos, pero la imagen queda idéntica. Es la que prefiero cuando el proyecto necesita una calidad de imagen notable, y la adecuada para capturas con texto y gráficos.

Ajusta las dimensiones y recorta lo que sobra

Ajusta cada imagen al tamaño real que tendrá en la web. Si dejas que el navegador reduzca una foto enorme, el usuario descarga píxeles que nunca va a ver.

Dos detalles más que ayudan:

• Recorta la parte relevante. Mostrar solo lo que interesa reduce las dimensiones y, con ellas, el peso.
• Ajusta la imagen a los bordes. Los márgenes en blanco alrededor también ocupan.

Elimina los metadatos EXIF y reduce la paleta

Muchas fotos llevan dentro información que el usuario no necesita: los datos EXIF (modelo de cámara, apertura, fecha, versión del firmware, flash) y datos de autoría. Casi todas las herramientas de compresión los eliminan. La excepción son los datos de copyright o licencia, si quieres conservarlos.

En PNG y GIF, usa la paleta con el mínimo número de colores que la imagen necesite. Un gráfico plano rara vez necesita millones de colores.

Mi flujo de trabajo para comprimir

Para imágenes sueltas yo uso Squoosh, la herramienta gratuita y de código abierto del equipo de Chrome: eliges formato, mueves el control de calidad y comparas el antes y el después en pantalla. Para lotes grandes, lo práctico es automatizarlo en el servidor, con un plugin o con un CDN de imágenes.

En optimizaciones a fondo, mi experiencia es que pasar la imagen por una segunda herramienta después de exportarla desde el editor todavía rasca peso. Y no lo trato como una tarea de una sola vez: optimizo lo que puedo al crear la imagen y, cuando vuelvo a revisar la página, miro si se puede mejorar algo más.

Qué peso y qué tamaño debe tener una imagen para web

No existe un peso ni un tamaño ideal de imagen que valga para todas las webs. El tamaño correcto es el que se ve bien en la pantalla del usuario, y el peso correcto, el más bajo que mantenga esa calidad y deje el LCP por debajo de 2,5 segundos. Como referencia, estos son los rangos que usamos nosotros.

Son rangos de trabajo, no reglas: una foto con mucho detalle pesará más que una ilustración plana del mismo tamaño. Lo que manda es el resultado medido en la página.

Hay un caso con cifra oficial. Para aparecer con imagen grande en Discover, la documentación de Google sobre Discover recomienda imágenes de al menos 1200 píxeles de ancho, con más de 300.000 píxeles en total y relación de aspecto 16:9, y tener activado el ajuste max-image-preview:large.

Cómo cargar las imágenes en el HTML para que la página sea rápida

Las imágenes se cargan bien en el HTML cuando el navegador puede elegir la versión adecuada para cada pantalla (srcset y sizes), conoce de antemano el espacio que ocupan (width y height), da prioridad a la imagen principal y deja para más tarde las que están fuera de la primera pantalla.

Imágenes adaptables con srcset, sizes y picture

Con srcset das al navegador varias versiones de la misma imagen y con sizes le dices a qué ancho se va a mostrar. Él elige la más pequeña que se vea bien. El elemento picture sirve además para ofrecer varios formatos:

<picture>
  <source type="image/avif"
          srcset="zapatilla-roja-800.avif 800w, zapatilla-roja-1600.avif 1600w"
          sizes="(max-width: 800px) 100vw, 800px">
  <source type="image/webp"
          srcset="zapatilla-roja-800.webp 800w, zapatilla-roja-1600.webp 1600w"
          sizes="(max-width: 800px) 100vw, 800px">
  <img src="zapatilla-roja-800.jpg"
       alt="Zapatilla de running roja vista de lado"
       width="800" height="600">
</picture>

Fíjate en que sigue habiendo un img con su src. Google lo pide de forma expresa: recomienda incluir siempre una URL de respaldo en el atributo src, porque no todos los rastreadores interpretan srcset.

Indica width y height para que la página no dé saltos

Añade el ancho y el alto de cada imagen en el HTML. Con esos dos números el navegador reserva el hueco antes de descargarla y el texto no salta cuando aparece. Es la forma más sencilla de evitar problemas de CLS, y vale para todas las imágenes, con carga diferida o sin ella.

Carga diferida (lazy loading) solo fuera de la primera pantalla

La carga diferida hace que una imagen no se descargue hasta que el usuario se acerca a ella al hacer scroll. Antes hacía falta un plugin o un JavaScript; hoy basta con el atributo loading="lazy", que entienden todos los navegadores principales.

El error que más veo es ponérselo a todas. Según la guía de carga diferida de web.dev, loading="lazy" debe usarse solo en imágenes que quedan fuera de la pantalla inicial, y nunca en la imagen que hace de LCP.

Da prioridad a la imagen principal con fetchpriority

A la imagen principal de la página (la cabecera, la foto del producto) conviene añadirle fetchpriority="high" para que el navegador la descargue antes que el resto:

<img src="cabecera-1600.webp" alt="Equipo revisando una auditoría en pantalla"
     width="1600" height="900" fetchpriority="high">

La guía de web.dev para optimizar el LCP lo recomienda para la imagen que probablemente sea el LCP y avisa de que marcar más de una o dos imágenes le quita el efecto. Otro detalle: esa imagen debe estar en el HTML como img, no como fondo de CSS, para que el navegador la descubra cuanto antes.

Caché del navegador y CDN de imágenes

La caché del navegador guarda una copia de la imagen en el dispositivo del usuario, de modo que en la siguiente visita no hay que volver a pedirla al servidor. Para archivos cuyo nombre cambia cuando cambia el contenido, la guía de caché HTTP de web.dev recomienda una caducidad de un año. En un servidor Apache, en el archivo .htaccess:

<IfModule mod_headers.c>
  <FilesMatch "\.(avif|webp|jpe?g|png|gif|svg|ico)$">
    Header set Cache-Control "public, max-age=31536000"
  </FilesMatch>
</IfModule>

Úsalo solo si, al sustituir una imagen, cambias también el nombre del archivo (o le añades una versión). Si reemplazas imágenes manteniendo el mismo nombre, pon una caducidad más corta, porque quien ya la tenga guardada seguirá viendo la antigua.

Un CDN (Content Delivery Network, red de distribución de contenidos) es un conjunto de servidores repartidos por el mundo que entregan tus archivos desde el punto más cercano a cada usuario.

Muchos CDN actuales hacen además de CDN de imágenes: convierten a WebP o AVIF, redimensionan y comprimen al vuelo según el dispositivo. Mi consejo es el mismo de siempre: pruébalo y mide. En una web con muchas imágenes y visitas de varios países suele compensar; en una web pequeña, de texto y público local, puede que no lo notes y te rinda más dedicar ese esfuerzo a elegir un buen hosting.

CSS sprites y subdominios para imágenes: por qué ya no hacen falta

Los CSS sprites consisten en unir varios iconos en un único archivo de imagen y mostrar cada uno con CSS, para ahorrar peticiones al servidor.

La técnica viene de los videojuegos clásicos, que guardaban en una misma hoja todas las posturas de un personaje para simular su movimiento.

Tanto los sprites como repartir las imágenes en varios subdominios eran soluciones para HTTP/1.1, cuando el navegador abría pocas conexiones por dominio. Con HTTP/2 y HTTP/3 ya no hacen falta, y los subdominios suelen jugar en contra. Para iconos, SVG; para degradados, CSS (linear-gradient) en lugar de una imagen de fondo.

Cómo optimizar imágenes para SEO y aparecer en Google Imágenes

Las imágenes se optimizan para SEO dando a Google contexto sobre lo que muestran: un texto alternativo descriptivo, un nombre de archivo que se entienda, texto relacionado alrededor y una página relevante que las contenga. Además, deben estar insertadas con la etiqueta img, porque Google no indexa las imágenes que se cargan como fondo desde CSS.

Texto alternativo (alt): cómo escribirlo

El atributo alt es el texto que describe la imagen para quien no puede verla: lectores de pantalla y buscadores. Google lo define como el atributo más importante para dar metadatos de una imagen.

• Describe lo que se ve, en una frase corta: «Zapatilla de running roja vista de lado».
• Incluye la palabra clave solo si encaja de forma natural. Google avisa de que rellenar el alt de palabras clave da mala experiencia y puede hacer que el sitio se considere spam.
• En imágenes puramente decorativas, deja el alt vacío (alt="").

Sobre otros atributos: longdesc está obsoleto en HTML y no hay que usarlo. El title de la imagen solo muestra un texto al pasar el ratón; no lo trato como un factor de posicionamiento y no sustituye al alt.

Nombre del archivo y URL de la imagen

Usa nombres cortos y descriptivos, con guiones: zapatilla-running-roja.webp mejor que IMG_0234.webp. Google recomienda evitar nombres genéricos como image1.jpg.

Evita eñes, tildes, espacios y caracteres especiales. No es una manía: me ha pasado al migrar una web de servidor que el antiguo reconocía esos caracteres y el nuevo no, y de repente aparecieron errores 404 en imágenes por todo el sitio. Tocó corregirlas una a una.

Y ya que hablamos de 404: una imagen que no existe es una petición perdida en cada carga. Revísalo de vez en cuando, sobre todo después de cambios de diseño o migraciones.

Texto alrededor y pie de foto

El texto que hay antes y después de la imagen debe hablar de lo mismo que la imagen. Google saca el tema de una imagen también del contenido de la página, de los titulares y de los pies de foto. En HTML, el pie se marca con figure y figcaption:

<figure>
  <img src="/img/ck-one.webp" alt="Frasco de CK One visto de frente"
       width="300" height="300" loading="lazy">
  <figcaption>CK One, el perfume unisex de Calvin Klein.</figcaption>
</figure>

Imágenes propias y de calidad

Usa imágenes propias siempre que puedas y huye de los bancos genéricos: una foto que está en cientos de webs no te diferencia. Google insiste en que las fotos de alta calidad atraen más que las borrosas, y en Discover, como has visto, hay medidas mínimas recomendadas.

La página y los enlaces también cuentan

No todo acaba en la imagen. Una imagen hereda parte de la relevancia de la página en la que está:

• Las URL bien enlazadas internamente son las que los buscadores encuentran y rastrean con más facilidad, y con ellas sus imágenes.
• Las imágenes situadas en páginas relevantes del sitio, con enlaces externos, tienen más opciones de posicionar.
• Mantén una única URL para cada imagen aunque la uses en varias páginas: se cachea mejor y Google no tiene que rastrear varias copias.

Datos estructurados y sitemap de imágenes

Los datos estructurados (un marcado en el código que explica a Google qué es cada cosa) permiten que la imagen aparezca en resultados enriquecidos: en los tipos que los admiten, como producto, receta o artículo, la propiedad de imagen es obligatoria. Si vives de tus fotografías, existe también un marcado específico de licencia de imágenes.

Si tus imágenes se cargan con JavaScript o están en un CDN con otro dominio, un sitemap de imágenes ayuda a Google a descubrirlas.

Cómo optimizar imágenes en WordPress

WordPress ya hace buena parte de la optimización de imágenes sin plugins: genera varios tamaños de cada imagen y el atributo srcset, añade las dimensiones, aplica carga diferida desde la versión 5.5 y, desde la 6.3, da prioridad a la imagen principal. Lo que no hace por sí solo es comprimir bien ni convertir a formatos modernos.

En detalle, el núcleo de WordPress:

• Crea versiones de distintos tamaños al subir la imagen y deja que el navegador elija con srcset y sizes.
• Añade loading="lazy" a las imágenes que calcula que quedan más abajo y fetchpriority="high" a la que cree que será el LCP, y nunca los dos a la vez (lo explica el equipo de rendimiento en las mejoras de imágenes de WordPress 6.3).
• Admite subir WebP y, desde la versión 6.5, AVIF, siempre que tu hosting lo soporte (se comprueba en Herramientas, Salud del sitio).

Lo que añade un plugin de optimización de imágenes:

• Compresión automática al subir, eliminando metadatos.
• Conversión a WebP o AVIF de lo que subes en JPEG o PNG.
• Optimización masiva de la biblioteca que ya tenías.

Hay varios que hacen esto. Uno de los más conocidos es Smush (antes WP Smush.it). Su optimización masiva es la función que más he usado: al instalarlo en una web que ya llevaba tiempo funcionando, para tratar todas las imágenes subidas antes.

Dos avisos de auditoría. Primero, comprueba que tu tema o tu constructor visual no aplican carga diferida a la imagen de cabecera ni la cargan como fondo de CSS: es de lo que más veo y penaliza el LCP. Segundo, no acumules plugins que hagan lo mismo (dos sistemas de lazy loading a la vez dan problemas). Tienes más ajustes del gestor en la guía de SEO en WordPress.

Cómo optimizar las imágenes de producto de una tienda online

En una tienda online las imágenes de producto se optimizan igual que el resto, con tres añadidos: varias vistas de cada producto con su propio alt, miniaturas ligeras en los listados con la imagen grande solo en la ficha o en el zoom, y datos estructurados de producto que incluyan la imagen.

• Listados de categoría: miniaturas pequeñas y con carga diferida a partir de la segunda fila. Son páginas con decenas de imágenes.
• Ficha de producto: la foto principal es casi siempre el LCP. Sin lazy, con fetchpriority="high" y en el tamaño justo.
• Zoom y galerías: la versión de alta resolución solo debe descargarse cuando el usuario hace clic para ampliar (el clásico lightbox), no al cargar la ficha.
• Varias vistas: frontal, lateral, detalle, en uso. Cada una con un alt distinto que diga qué muestra.
• Datos estructurados de producto con la imagen, para optar a resultados enriquecidos.

El resto de la optimización de una tienda (categorías, filtros, fichas) lo tienes en la guía de SEO para ecommerce.

Herramientas para optimizar imágenes y detectar las que pesan demasiado

Las herramientas para optimizar imágenes se dividen en dos grupos: las que comprimen y convierten (Squoosh, TinyPNG, los plugins y los CDN de imágenes) y las que te dicen qué imágenes dan problemas (PageSpeed Insights, Lighthouse y un rastreador como Screaming Frog). Para empezar, con una de cada grupo es suficiente.

En una auditoría empezamos por las plantillas, no por las imágenes sueltas: si la cabecera de la plantilla de producto está mal resuelta, el problema se repite en miles de URL. El listado completo de imágenes pesadas, sin alt o rotas lo sacamos con un rastreador: aquí tienes la guía de Screaming Frog.

Preguntas frecuentes

¿No está tu pregunta? Escríbeme a alberto@ingenieroseo.com y te contesto en menos de 24 horas.

¿WebP o AVIF: qué formato es mejor para SEO?

Google indexa igual WebP y AVIF, así que para el SEO ninguno tiene ventaja directa. La diferencia está en el peso: AVIF suele comprimir más, y WebP es más rápido de generar y lo admite prácticamente cualquier herramienta. Lo más práctico es servir AVIF con WebP o JPEG de respaldo mediante el elemento picture.

¿Cómo convertir imágenes a WebP gratis?

Para convertir imágenes sueltas a WebP gratis puedes usar Squoosh, que funciona en el navegador sin instalar nada. En WordPress, los plugins de optimización de imágenes convierten automáticamente lo que subes. Si tienes muchas imágenes, un CDN de imágenes hace la conversión al vuelo sin tocar los archivos originales.

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

No hay un peso oficial para las imágenes de una web. Como referencia de trabajo, una imagen de contenido debería quedar por debajo de 100 KB y una cabecera a toda pantalla por debajo de 200 KB. Lo que cuenta es que la página cumpla un LCP de 2,5 segundos o menos.

¿El atributo title de una imagen ayuda al posicionamiento?

El atributo title de una imagen no sustituye al texto alternativo. Google señala el atributo alt como el más importante para entender una imagen, junto al nombre del archivo y el texto que la rodea. El title solo muestra un texto al pasar el ratón, así que es opcional.

¿Hay que poner loading=»lazy» en todas las imágenes?

No. La carga diferida con loading=»lazy» es para las imágenes que quedan fuera de la primera pantalla. La imagen principal de la página debe cargarse de forma normal y, si es el elemento LCP, con fetchpriority=»high». Aplicar lazy a esa imagen retrasa la carga visible de la página.

Si tuviera que elegir por dónde empezar: abre PageSpeed Insights con tu página más visitada, mira cuál es el elemento LCP y arregla esa imagen primero. Después, las plantillas. ¿Conoces alguna herramienta o técnica que no esté aquí? Cuéntamela en los comentarios y la añadimos.