Las imágenes son, en la mayoría de webs que audito, lo que más pesa. Y una web pesada carga lenta, empeora las Core Web Vitals, posiciona peor y vende menos. La buena noticia: comprimir y redimensionar bien las imágenes es de lo más fácil y rentable que puedes hacer por tu web.
Este post es la versión actualizada de una guía que publiqué hace años. He quitado las herramientas que han desaparecido, he añadido los formatos modernos (WebP y AVIF) y te cuento el proceso que sigo hoy, tanto en WordPress como en Shopify.
Respuesta rápida: cómo comprimir imágenes sin perder calidad
- Redimensiona la imagen al tamaño máximo al que se va a mostrar (por ejemplo, 1.600 px de ancho para una imagen a ancho completo).
- Convierte a WebP o AVIF con una calidad de alrededor de 75-80.
- Comprime con una herramienta como Squoosh o TinyPNG, o deja que lo haga un plugin.
- Súbela con un nombre y un alt descriptivos.
Por qué importa tanto optimizar las imágenes
- Velocidad y Core Web Vitals. La imagen principal de una página suele ser el elemento que marca el LCP (Largest Contentful Paint), una de las métricas que Google usa para medir la experiencia de usuario.
- Conversión. Cada segundo de carga de más se traduce en visitas que se van, sobre todo en móvil.
- Hosting y coste. Menos peso significa menos espacio y menos transferencia.
- SEO de imágenes. Un buen nombre de archivo y un buen alt ayudan a aparecer en Google Imágenes.
Formatos: cuál usar en cada caso
- WebP: el estándar actual. Pesa bastante menos que JPG o PNG con la misma calidad y lo soportan todos los navegadores.
- AVIF: comprime todavía más que WebP. Soporte muy amplio en navegadores modernos; ideal si tu plugin o plataforma lo genera automáticamente.
- JPG: sigue valiendo para fotos si no puedes usar formatos modernos.
- PNG: solo para gráficos con transparencia o texto nítido, y mejor aún en WebP.
- SVG: para logotipos e iconos. Pesa muy poco y se ve perfecto a cualquier tamaño.
El mejor plugin de compresión es no subir una foto de 4 MB para un hueco de 800 píxeles.
Tuitear esto →Herramientas online para comprimir imágenes
Squoosh
Squoosh, creada por el equipo de Chrome, es mi favorita para imágenes sueltas: redimensionas, eliges formato (WebP, AVIF, JPG…) y ves el antes y el después en tiempo real, con el peso resultante. Todo se procesa en tu navegador, sin subir nada a ningún servidor.
TinyPNG
TinyPNG sigue siendo la opción más rápida: arrastras las imágenes y te las devuelve comprimidas. Acepta PNG, JPG, WebP y AVIF, y la reducción de peso suele ser espectacular sin pérdida visible.
Compressor.io
Compressor.io permite elegir entre compresión con pérdida o sin pérdida y trabaja con JPG, PNG, WebP, GIF y SVG.
iLoveIMG
iLoveIMG es útil para trabajar por lotes: comprimir, redimensionar, recortar y convertir muchas imágenes a la vez.
Programas de escritorio
- Photoshop: Archivo > Exportar > Exportar como, eligiendo formato, calidad y tamaño. Es lo que uso para piezas de diseño.
- Caesium: gratuito y de código abierto, ideal para comprimir carpetas enteras.
- ImageOptim (Mac): arrastras y optimiza sin tocar la calidad visible.
Recortar y redimensionar
Para recortar o cambiar el tamaño sin complicaciones, Canva, Pixlr o el propio Squoosh son más que suficientes. Recorta pensando en dónde se va a ver: no es lo mismo una imagen destacada horizontal que una ficha de producto cuadrada o una story vertical.
Optimizar imágenes en WordPress
En WordPress lo más cómodo es que un plugin lo haga automáticamente al subir cada imagen:
- ShortPixel: compresión excelente, WebP y AVIF, y optimización de las imágenes ya subidas.
- Imagify: de los creadores de WP Rocket, muy sencillo de configurar.
- EWWW Image Optimizer: buena opción que puede comprimir en tu propio servidor.
- Converter for Media: se centra en servir WebP y AVIF sin tocar los originales.
Combínalo con la carga diferida (lazy load), que WordPress ya trae de serie, y con un plugin de caché. Tienes más detalle en los mejores plugins de WordPress.
Optimizar imágenes en Shopify
Shopify sirve las imágenes a través de su CDN y las entrega automáticamente en formatos modernos y en el tamaño adecuado según el dispositivo, siempre que el tema esté bien programado. Aun así, sube las imágenes redimensionadas (no fotos de cámara de 6.000 px) y con nombres y alt descriptivos: el tema no lo hace por ti.
El hosting también cuenta
Unas imágenes perfectas en un servidor lento siguen cargando lento. Un buen hosting, con caché de servidor, HTTP/2 o HTTP/3 y buena conexión, multiplica el efecto de todo lo anterior. Yo recomiendo Raiola Networks, un hosting español con un soporte excelente (el enlace es de afiliado). Si además usas un CDN, las imágenes se sirven desde el servidor más cercano a cada visitante.
Errores habituales con las imágenes
- Subir la foto tal cual sale del móvil o de la cámara. 4.000 píxeles y 5 MB para un hueco de 800 píxeles.
- Usar PNG para fotografías. Pesan muchísimo más que un JPG o un WebP sin ganar calidad.
- Aplicar lazy load a la imagen principal. La imagen que se ve nada más cargar (la del LCP) debe cargarse cuanto antes; la carga diferida es para las de más abajo.
- No indicar ancho y alto. Provoca saltos de diseño mientras carga la página, que penalizan el CLS, otra de las Core Web Vitals.
- Nombres como IMG_4532.jpg y alt vacíos. Oportunidad perdida para el SEO de imágenes y para la accesibilidad.
- Comprimir dos veces con pérdida. Cada pasada degrada un poco más la imagen. Parte siempre del original.
Cómo comprobar si tus imágenes están bien optimizadas
- Pasa tus páginas principales por PageSpeed Insights y revisa las recomendaciones sobre imágenes («Mejora la entrega de imágenes», «Elemento LCP»).
- Rastrea tu web con Screaming Frog y filtra las imágenes de más de 100 KB para ver las que más pesan.
- Revisa el informe de Core Web Vitals de Search Console para detectar plantillas con problemas.
- Abre la pestaña Red de las herramientas de desarrollador del navegador y ordena por tamaño.
¿Y la inteligencia artificial?
La IA ya ayuda en este terreno: herramientas como Canva, Photoshop o Clipdrop quitan fondos, amplían imágenes pequeñas sin que se pixelen o generan variaciones. Si generas imágenes con herramientas text-to-image, recuerda que suelen salir en alta resolución y muy pesadas: pásalas siempre por el mismo proceso de redimensionar y comprimir.
Preguntas frecuentes
¿Cuánto debe pesar una imagen para web?
Como referencia, una imagen a ancho completo debería quedarse por debajo de 200 KB y las imágenes de contenido, por debajo de 100 KB. Menos es mejor, siempre que se vea bien.
¿Comprimir una imagen le quita calidad?
La compresión con pérdida elimina información, pero con calidades en torno a 75-80 la diferencia no se aprecia a simple vista y el ahorro de peso es enorme.
¿Es mejor WebP o AVIF?
AVIF comprime más, pero tarda más en generarse. WebP es el estándar seguro. Si tu plugin genera los dos, perfecto.
¿Debo reoptimizar las imágenes que ya tengo subidas?
Sí, sobre todo las de las páginas con más tráfico. Plugins como ShortPixel o Imagify optimizan en bloque toda la biblioteca de medios y guardan una copia del original por si quieres volver atrás.
¿Afecta el peso de las imágenes al SEO?
Sí, de forma indirecta: afecta a la velocidad y a las Core Web Vitals, que forman parte de la experiencia de página que evalúa Google.
Conclusión
Redimensionar, convertir a WebP o AVIF y comprimir: tres pasos que hacen tu web más rápida, mejor posicionada y más rentable. Con Squoosh o TinyPNG para lo puntual y un plugin como ShortPixel para el día a día, lo tienes resuelto.
Si tu web o tu tienda va lenta y no sabes por dónde empezar, ¡te escucho!
Hola Carlos!
Yo utilizo Caesium, es un programita que es muy fácil de utilizar y que muestra unos resultados realmente buenos.
Algunas de las herramientas que nombras no las conocía, Un saludo.
Hola @@pablogpelaez:disqus.
Gracias por la información sobre Caesium, tampoco la conocía, le echaré un vistazo.
Gracias por pasarte por el blog y comentar. Saludos.
Yo utilizo Pixlr y Pixlr express (también para móvil), el primero es cómo un photoshop, te permite hacer muchísimas cosas y el segundo es una versión express para recortar, filtros y retoques va genial. Saludos!
Hola @miriamac:disqus.
¡Qué bueno! Me suena haberlo oído, lo anoto y lo subo en la siguiente actualización del post.
Muchas gracias por pasarte y comentar.
Saludos.
Hola @@carlosmiana:disqus, me ha gustado mucho el post. Tengo una duda al respecto:
¿Qué es más recomendable, subir las imágenes optimizadas por ejemplo con Tinypng o se puede sustituir este paso con el plugin EWWW Image Optimizer?
¿Son herramientas diferentes que te llevan al mismo destino?
Gracias y saludos!
Hola @alfredomira82:disqus.
Yo haría lo siguiente y es como lo hago yo:
1.- Utilizaría Photoshop.
2.- TinyPng.
3.- Instalar el EWWW Imagen Optimizer.
Espero que sea de ayuda.
Un abrazo.
Muchas gracias, por supuesto que es de ayuda! Saludos
Hola @carlosmiana:disqus!
Ya sabes que te voy a decir yo, no?
Comprimo y recorto la foto con………
Telegram!!!
jaja, un abrazo!
Hola @gastre:disqus.
jajajjaja, que crack estás hecho. 🙂
Lo pienso poner en al siguiente actualización del post, los resultados y, sobre todo, la facilidad son bestiales.
Gracias por comentarnos ese gran truco.
Un fuerte abrazo.
Genial la actualización!!!!
El que no comprime es porque no quiere!
Muchas gracias @gastre:disqus.
Gracias a ti he conocido Telegram, una herramienta que es bestial.
Recomiendo a todo aquel que nos lea que se la instale y la prueba, va a alucinar con todas las opciones que tiene. 🙂
Abrazos sir.
Hola, Buenas!
Muy buen artículo, aunque en este caso echo de menos la mención de imagify como herramienta online.
También acabo de descubrir otra herramienta Online (compressjpeg) que comprime más (que no es mejor), porque sacrifica calidad de imagen.
Pero mi truco es pasarlo por tinypng, después pasarlo por la otra herramienta que te permite medir el % de compresión y ya te basas en el ojo técnico o hasta donde quieres sacrificar calidad.
Espero que me digas que opinas también de esta app
Saludos
Hola @Fernando19ac:disqus.
Echaré un ojo a las herramienta que comentas. Yo lo suelo hacer con el tinypng y luego con Photoshop. Aunque ahora más recientemente lo hago como dice, un poco más abajo, @gastre:disqus.
Saludos y gracias por pasarte y comentar.
Buena lista Carlos. Yo uso pixlr y ríot. Probare Tiny y telegram a ver si ahorramos en tiempo y se reduce más. Probaremos 😉
Hola @Wb6Q4WAiF8:disqus.
Utiliza Telegram, es una pasada. La facilidad de uso es bestial.
Ya me contarás.
Abrazos.
Muchas gracias por estos consejos. Desconocía que telegram pudiera hacer esto, yo sólo lo uso como simple mensajería.
Generalmente yo optimizo las fotografías e infografías en Photoshop, pero probaré con algunas de ellas.
Hola @enriqueruizprieto:disqus.
Telegram es la gran desconocida, es una súper herramienta. Si lo complementas con Bots, la productividad que puede aportarte es bestial.
En este campo, el que mejor nos puede asesorar es @gastre:disqus, un auténtico crack de esta aplicación.
Antes de conocer Telegram, utilizaba Photoshop, ahora mi opción nº1 es Telegram.
Gracias por pasarte y comentar Enrique.
Abrazos.
Muy buenas aplicaciones Carlos! Yo también utilizo habitualmente tinypng y es una pasada lo que llega a comprimir la imagen. En cuanto a Telegram es nuestra herramienta favorita de contacto con mi socio Raúl y es una pasada. Además sigo algún bot de algún medio social y estoy enterado al momento de sus nuevos artículos.
Un abrazo! 🙂
Hola @juanjosantana:disqus.
Ya te digo, Telegram es una pasada. Cada vez que lo utilizo más me gusta. 🙂 Los bots son una maravilla.
En cuanto a tinypng, poco que decir, comprime a la máxima potencia. 🙂
Un abrazo.
Hola Carlos, increíble posts amigo, realmente muy muy bueno y completo, me has dejado con la boca abierta, a tal punto que decidí incluir un enlace a tu post en mi nueva publicación sobre como lograr que un blog retenga a los lectores por más tiempo, concretamente: http://expertodeinternet.com/aumentar-el-tiempo-de-visita-de-tu-blog/
Espero que le des un vistazo así me cuentas que te parece!
Saludos!
Hola @maurobernoco:disqus.
Muchas gracias por nombrarme en tu blog, molaaaa 🙂
Lo he visto, está muy currado y con ideas muy acertadas.
Un abrazo.
[…] que estén enfocadas a ese fin; si eres fotógrafo selecciona un portfolio o aquella donde prime la imagen sobre el texto; si quieres abrir un blog el texto debe ser lo más […]
[…] primer lugar, debes poner una foto de perfil que te defina perfectamente, clara y con buen encuadre. Si la foto de perfil ya no es […]
[…] Edición de fotos. […]
[…] Si te interesa saber más sobre esta temática, te animo a mirar este artículo. Por otro lado, si estás buscando recortar imágenes te recomiendo este post para comprimir fotos. […]
[…] de otras redes sociales a tu contenido de Instagram. De este modo cuando publiques cualquier fotografía o vídeo estas se publicarán a la vez en todas […]
[…] primer lugar, la velocidad de carga de las versiones AMP es muy superior al de las versiones móviles tradicionales, y por lo tanto […]
[…] banco de imágenes gratuitas que lleva operativo desde el 2006 con alrededor de unas 3.000 fotografías. En cuanto al diseño, deja mucho que desear, es antiguo y con una UX muy […]
[…] banco de imágenes gratuitas que lleva operativo desde el 2006 con alrededor de unas 3.000 fotografías. En cuanto al diseño, deja mucho que desear, es antiguo y con una UX muy […]
[…] banco de imágenes gratuitas que lleva operativo desde el 2006 con alrededor de unas 3.000 fotografías. En cuanto al diseño, deja mucho que desear, es antiguo y con una UX muy […]
[…] banco de imágenes gratuitas que lleva operativo desde el 2006 con alrededor de unas 3.000 fotografías. En cuanto al diseño, deja mucho que desear, es antiguo y con una UX muy […]