¿Sabes que una sola imagen mal optimizada puede ralentizar tu web y hacerte perder posiciones en Google? En este artículo te voy a enseñar, paso a paso y con un caso real, cómo optimizar las imágenes para que tu página web cargue rápido y se posicione mejor, sin que tengas que ser un experto en diseño o programación.

Estaba trabajando en la web de una barbería. Habíamos hecho un estudio de palabras clave y para hacer la página más visual, necesitábamos fotos. Como no teníamos suficientes, descargué algunas de bancos de imágenes como Pexels o Unsplash. El problema es que esas fotos en bruto pesaban entre 1.5 y 2.7 megabytes cada una, en formato JPG. Una de una navaja, que pesaba 1.5 MB, tardaba hasta en cargar en el ordenador. Te voy a contar cómo las convertí en imágenes ligeras y listas para posicionar.

El problema de las imágenes en bruto: tu web se ahoga en megabytes

El caso de la barbería: fotos de 2MB para un slider

Lo tenía todo preparado: el estudio de palabras clave, la estructura de la página… pero me faltaban las fotos. Así que, como haría cualquiera, fui a bancos de imágenes gratuitos y descargué unas cuantas. ¿Vale? El resultado fue una carpeta llena de archivos con nombres tipo DSC_0234.jpg que pesaban una barbaridad: 2.7 MB, 2.2 MB, 1.5 MB…

La idea era ponerlas en un slider, en la cabecera de la web. Pero si una sola foto de una navaja de 1.5 MB tardaba varios segundos en mostrarse en mi propio ordenador, imagínate cómo se vería en el móvil de un cliente con una conexión regular. Era un problema técnico de libro, y uno que veo constantemente.

Por qué el peso afecta a la velocidad (y al SEO)

¿Por qué te digo esto? Pues porque Google ya no solo mira las palabras clave. Desde que introdujo las Core Web Vitals, la velocidad de carga es un factor de posicionamiento directo. Si tu página tarda mucho en cargar, Google la penaliza. Es así de simple.

Y las imágenes son, casi siempre, el recurso más pesado de cualquier web. Según el informe anual de HTTP Archive, representan de media más del 50 % del peso total de una página. Ese peso tiene consecuencias directas en métricas que Google mide con lupa, como el LCP (Largest Contentful Paint), que básicamente mide cuánto tarda en cargar el elemento más grande de la pantalla. Si ese elemento es una foto de 2 MB, tu LCP se va a disparar.

No es solo el formato JPG, es el tamaño físico

Aquí hay un matiz importante. Mucha gente piensa que el problema es el formato JPG. Y sí, es parte del problema, pero no es el único. La foto que descargué de la navaja, la de 1.5 MB, era enorme en dimensiones: probablemente 4000 píxeles de ancho o más. Para un slider que en pantalla se va a ver a 1200 píxeles como mucho, es un derroche absoluto de píxeles, y cada uno de esos píxeles sobrantes es peso innecesario que el navegador tiene que cargar.

Así que el primer paso no es solo cambiar el formato, es reducir el tamaño físico de la imagen. Y para eso tengo una herramienta que uso siempre.

Reducir y convertir: mi herramienta imprescindible (y un truco si falla)

Squoosh.app, la herramienta oficial de Google que uso yo

Para optimizar imágenes, yo uso Squoosh.app. Es una herramienta de compresión y optimización de imágenes de código abierto creada por Google. Es gratuita, funciona directamente en el navegador (no tienes que instalar nada) y es la que uso en mis proyectos.

La gracia es que es muy visual. Subes la imagen y ves al momento la diferencia entre la original y la comprimida. Pero yo no me quedo solo en comprimir, yo la transformo.

Dos ajustes clave: tamaño al 25% y formato WebP

Te voy a contar exactamente lo que hice con la foto de la navaja de 1.5 MB. Es un proceso que repito una y otra vez:

  1. Abrí Squoosh y subí la imagen. La foto en bruto, de esos 1.5 MB.
  2. Reduje el tamaño al 25%. En la barra lateral izquierda, en «Resize», puse 25% en «Width». Automáticamente, el peso bajó de 1.5 MB a unos 70 KB. Sí, has leído bien. Un 95% menos de peso, solo por ajustarla al tamaño que de verdad va a tener en pantalla. La calidad visual, para el uso que le iba a dar, era perfecta.
  3. La convertí a WebP. En el menú desplegable de la derecha, donde pone «Compress», cambié de «MozJPEG» (que es para JPG) a «WebP». El formato WebP ofrece una compresión superior a JPG y PNG, y es soportado por todos los navegadores modernos. Aquí es donde ajusté el quality slider de WebP hasta encontrar el punto dulce: un peso final de unos 30 KB sin que se notara pérdida en pantalla.
  4. Descargué el resultado. Le di al botón de descargar y ya tenía mi nueva imagen, lista para usar.

Una imagen bien comprimida en WebP puede pesar entre un 30% y un 50% menos que su equivalente en JPG sin pérdida de calidad apreciable. En mi caso, la reducción fue mucho mayor porque partía de un tamaño desproporcionado y ajusté la compresión. Pasé de 1.5 MB a 30 KB. Esa es la diferencia entre una web que vuela y una que se arrastra.

¿El botón no funciona? El truco del modo móvil en DevTools

Aquí viene un truco que me ha salvado más de una vez. A veces, en Squoosh, el botón de descarga no responde. No sé por qué pasa, pero tiene una solución rápida.

Si haces clic derecho en la página y seleccionas «Inspeccionar» (o pulsas F12), se abren las herramientas para desarrolladores. Arriba a la izquierda hay un icono que parece un móvil y una tablet (Toggle Device Toolbar). Le das clic, y la página se recarga como si la vieras desde un móvil. Y, por arte de magia, el botón de descarga de Squoosh vuelve a funcionar. Es un bug raro, pero con este truco lo solucionas en 10 segundos.

El nombre del archivo: tu primera señal de SEO (y casi nadie le hace caso)

De ‘IMG_0234.jpg’ a ‘afeitado-clasico-barberia.webp’

Ya tengo la imagen optimizada en peso y formato. Pero todavía se llama algo como squoosh_2.webp. Eso no sirve. Para Google, el nombre del archivo es una señal de contexto. Es lo primero que ve, incluso antes de cargar la imagen o leer el ALT.

Así que, antes de subirla a WordPress, le cambio el nombre. En el caso de la barbería, una foto era de un afeitado clásico con toallas calientes. El nombre pasó de ser un código sin sentido a afeitado-clasico-con-toallas-calientes-barberia.webp.

Por qué Google lee los nombres y cómo usarlo a tu favor

Piensa en el nombre del archivo como el título de un libro. Si el libro se llama «Libro1.pdf», no sabes de qué va. Si se llama «Guia-Practica-Afeitado-Clasico.pdf», ya te haces una idea. Google funciona igual. Rastrea la URL de la imagen, y esa URL incluye el nombre del archivo.

No es la señal más potente, pero es una señal gratuita y que está ahí. Es una oportunidad para reforzar la palabra clave principal de la página de una forma natural. Si tu página habla de «afeitado clásico» y tienes una imagen que se llama así, todo cuadra.

Guiones, nunca espacios o guiones bajos

Esto es un detalle técnico, pero importante. En los nombres de archivo para web, se usan guiones medios (-). Nunca espacios (se convierten en %20 y quedan feos) y nunca guiones bajos (_).

afeitado-clasico-barberia.webp ✅ afeitado clasico barberia.webp ❌ (se ve como afeitado%20clasico%20...) afeitado_clasico_barberia.webp ❌ (los guiones bajos no se interpretan como separadores de palabras para SEO).

Es una regla simple: todo en minúsculas y separado por guiones. Así te aseguras de que Google lo interprete bien.

Subir a WordPress: el ALT no es opcional, es tu descripción para Google

El flujo en Elementor (o tu editor): subir, seleccionar, pegar

Yo trabajo mucho con Elementor, pero el proceso es similar en cualquier editor. Ya tengo mi imagen renombrada. En la página de WordPress, voy al módulo de imagen, le doy a «Subir archivos», selecciono mi afeitado-clasico-con-toallas-calientes-barberia.webp y la subo.

Hasta aquí, bien. Pero ahora viene la parte más importante para el SEO después del nombre: el texto alternativo (ALT).

¿Qué pongo en el texto alternativo? Describe, no rellenes keywords

El ALT es la descripción que lee Google (y los lectores de pantalla para personas con discapacidad visual) cuando no puede ver la imagen. No es un campo para meter 20 palabras clave seguidas.

Mi enfoque es simple: describe lo que se ve en la imagen, de forma natural, e incluye la palabra clave principal si encaja. Para la foto del afeitado, el ALT podría ser: «Cliente recibiendo un afeitado clásico con toallas calientes en una barbería tradicional». Es descriptivo, útil, y contiene la palabra clave «afeitado clásico» de forma orgánica.

«Afeitado clásico barbería Madrid precio oferta» ❌ Eso es spam, no una descripción.

El error que cometí y cómo lo solucioné: no copies el mismo ALT

Te voy a contar un error que cometí en este mismo proyecto, para que no lo repitas. Tenía varias fotos de afeitados en la misma página. En un principio, por rapidez, puse el mismo texto alternativo en todas: «Afeitado clásico en barbería».

Es un error. Cada imagen es única y debe tener un ALT único que la describa. Si no, pierdes la oportunidad de dar más contexto a Google y, en el peor de los casos, podrían considerarlo contenido duplicado o poco relevante.

Lo que hice fue revisar cada foto y escribir un ALT específico: «Barbero aplicando espuma caliente para afeitado», «Afeitado al ras con navaja clásica», etc. Son pequeños matices que suman.

Resultado visible: así se ve una imagen optimizada vs. una que no lo está

Inspeccionando con DevTools: el antes y el después

La mejor forma de ver la diferencia es con las herramientas del desarrollador en tu navegador (F12). Si vas a la pestaña «Network» y recargas la página, puedes filtrar por «Img». Ahí ves todas las imágenes que carga tu web, su tamaño y el tiempo que tardan.

En el caso de la barbería, las imágenes que no optimicé de otras secciones (como algunos iconos de perfiles de reseñas de Google que se habían colado en el diseño) aparecían con nombres crípticos y pesos de varios kilobytes. En cambio, mis imágenes optimizadas (afeitado-clasico-con-toallas-calientes-barberia.webp) pesaban unos 30 KB y cargaban al instante.

El ‘código’ de las imágenes no optimizadas y el nombre limpio de las buenas

Si inspeccionas el elemento de una imagen (clic derecho > Inspeccionar) verás el código HTML. Una imagen no optimizada suele tener un src con un nombre raro y, a menudo, le faltan los atributos width y height, lo que puede causar saltos de layout mientras carga (un problema llamado CLS que a Google no le gusta nada).

La mía, después de todo el proceso, tenía un nombre claro en el src, el ALT bien puesto, y un peso ridículo. Se recomienda que las imágenes de contenido pesen menos de 100 KB y las imágenes hero menos de 200 KB para un buen rendimiento. Yo había pasado de 1500 KB a unos 30 KB. Estaba sobradamente dentro del objetivo.

El impacto real en la carga de la página

No tengo una cifra exacta de segundos ganados en este caso concreto, porque fue una de las primeras optimizaciones que hice. Pero te lo puedo asegurar por experiencia: cuando reduces el peso de las imágenes más grandes de una página, la mejora en la velocidad de carga es inmediata y palpable. Y eso se traduce directamente en una mejor experiencia para el usuario y en mejores señales para el algoritmo de Google. Es una de las optimizaciones con mejor relación esfuerzo/resultado que existen.

Más allá de lo básico: qué puedes hacer si quieres llevar la optimización al siguiente nivel

Lo que te he contado es el flujo básico que sirve para el 90% de los casos. Pero si tienes un proyecto grande o quieres exprimir al máximo, hay algunas cosas más que puedes hacer.

  • Compresión masiva con APIs para proyectos grandes. Si tienes que optimizar cientos de imágenes, hacerlo una a una en Squoosh es inviable. Para eso existen servicios como Kraken.io o ShortPixel, que tienen APIs o plugins para WordPress que comprimen imágenes de forma masiva, incluso de forma automática al subirlas. Tienen un coste, pero para una tienda online con miles de productos puede merecer mucho la pena.
  • Uso de srcset para servir diferentes tamaños. Esto ya es un poco más técnico. La etiqueta srcset le dice al navegador que hay disponibles diferentes versiones de una misma imagen (por ejemplo, una pequeña para móvil y una grande para escritorio) y le deja elegir la más adecuada. Muchos temas y plugins modernos de WordPress lo gestionan automáticamente. Si no, requiere tocar código.
  • Atributos width y height para evitar saltos de layout (CLS). Este es un detalle crucial que mucha gente pasa por alto. Siempre que subas una imagen, asegúrate de que en el HTML se especifican sus dimensiones intrínsecas (los atributos width y height). Esto le permite al navegador reservar el espacio que ocupará la imagen antes de que cargue, evitando esos molestos saltos del contenido. Es clave para una buena puntuación en Core Web Vitals.
  • Plugins como Smush para automatizar en WordPress. Si no quieres complicarte la vida, hay plugins como WP Smush o Imagify que automatizan gran parte del proceso: comprimen las imágenes al subirlas, las convierten a WebP (creando una copia además del original) y algunas incluso gestionan el lazy loading (que carga las imágenes solo cuando el usuario se acerca a ellas). Son una buena solución «todo en uno» si prefieres no hacerlo manualmente.

Conclusión: optimizar imágenes no es magia, es seguir un proceso

Optimizar imágenes para SEO y velocidad no requiere ser un gurú de la programación. Solo requiere seguir un proceso sistemático y ser constante. En el caso de la barbería, el flujo fue siempre el mismo:

  1. Descargar la imagen de calidad de un banco de fotos.
  2. Pasar por Squoosh: Reducir el tamaño físico (a menudo al 25% o menos) y convertir a WebP, ajustando el quality slider hasta que el peso sea ridículo pero la calidad se mantenga.
  3. Renombrar el archivo con un nombre descriptivo, usando guiones.
  4. Subir a WordPress y completar el campo de texto alternativo (ALT) con una descripción única y natural.

El beneficio es doble: por un lado, tu web carga más rápido, lo que mejora la experiencia de usuario y reduce la tasa de rebote. Por otro, le das a Google señales claras (nombre de archivo, ALT, peso reducido) de que tu contenido es relevante y está bien estructurado, lo que ayuda al posicionamiento.

Mi recomendación es que no intentes optimizar todas las imágenes de tu web de golpe si es muy grande. Empieza por las más pesadas, las que están «above the fold» (en la parte visible nada más cargar) o las de las páginas más importantes. Verás la diferencia enseguida.

Si quieres ver el proceso en acción, con los clics y los errores incluidos, échale un vistazo al vídeo que grabé mientras trabajaba en este proyecto. Y si tienes dudas sobre cómo aplicar esto a tu web, ya sabes dónde encontrarme.

Herramientas y recursos que menciono

Algunos de estos enlaces son de afiliado: si compras a través de ellos me llevo una pequeña comisión, sin coste extra para ti.