Cómo comprimir y reducir el tamaño de las imágenes para tu página web (incluídas 9 herramientas TOP GRATUITAS)

Cómo comprimir y reducir el tamaño de las imágenes para tu página web (incluídas 9 herramientas TOP GRATUITAS)

Una de las razones más grandes de que una página web sea lenta es la mala optimización de las imágenes.

Sí, ya sé que los vídeos y los archivos Javascript son unos capullos y merecen nuestra indiferencia porque nos están tocando la moral cada dos por tres, pero es que digamos que los vídeos y los JS son más difíciles de «domar» y hacen lo que les da la gana, como niños de 8 años creyéndose adultos.

Sin embargo, a las imágenes sí que podemos atarlas más en corto, adiestrarlas y que hagan lo que nosotros (más o menos) queramos que hagan.

Veamos por qué es importante tratar debidamente las imágenes de tu web y cómo podemos comprimirlas y reducirles el tamaño fácilmente para no caer en errores básicos al diseñar una página web.

pasos para diseñar una página web

Las 9 fases cruciales para diseñar una página web atractiva y efectiva

Aprende todos los pasos para diseñar una web profesional con la que conseguir resultados reales.

Por qué es importante comprimir y optimizar las imágenes de tu web

La parte más importante de una web son los textos, así de claro. Sin unos buenos textos, no vendes.

Pero a la importancia de los textos en nuestra web, hay que sumarles el aporte visual que dan las imágenes, no lo olvidemos.

Y las imágenes son las responsables de un alto porcentaje de problemas de carga en una web, algo que puede provocar que vendamos menos.

¿No te lo crees?

Mira lo que podrás conseguir si las optimizas correctamente…

Incrementas la velocidad de carga

Uno de los aspectos más importantes hoy en día en una página web, junto a que sea responsive, es la velocidad de carga.

El tiempo de carga de tu web debería ser inferior a 3 segundos.

Si no consigues estos tiempos, deberías revisar las imágenes que utilizas en tu web y optimizarlas mejor.

Que sí, que ya sé que no siempre las imágenes son las responsables, pero hay que empezar por ellas para luego tocar otros aspectos de la web.

Mejora la experiencia de tus visitantes

Una de las consecuencias más positivas de aumentar la velocidad de carga de tu página web es que mejorará la experiencia del usuario que la visita.

Si pensamos más en las personas y menos en Google, deberíamos saber que los seres humanos somos impacientes y que, como una página web tarde más de la cuenta en cargar y vaya como el caballo del malo en el desierto, nuestros visitantes van a darse el piro en 0,2.

Mejoras tu posicionamiento en Google

Google es la nueva biblia del mundo moderno -qué le vamos a hacer- y uno de los aspectos que más tiene en cuenta el algoritmo este de los coj… es que, desde la aparición de los smartphones, la velocidad de carga de las páginas web se ha vuelto uno de los puntos más determinantes de cara al posicionamiento SEO.

Si quieres que tu web vaya más rápido que Usain Bold en la apertura de puertas del primer día de las rebajas, ya sabes lo que debes hacer…

Ahorras espacio en el hosting

Cuando contratas un hosting te dan el trozo de una parte de una porción de espacio en un servidor para que lo utilices como mejor te venga (se entiende que es para tener ahí tu web, vaya).

Lo mínimo es que tu hosting te proporcione 10Gb de espacio.

O si eres  un gurú fan de las 7 cifras seguramente podrás permitirte uno o varios servidores dedicados para ti solito.

Pero los mortales solemos tener un hosting compartido con un puñao de Gigabytes que, como te pases subiendo imágenes más grandes que los 47 baños de la casa de Jeff Bezos, en poco tiempo tendrás que cambiarte de plan de hosting y pasar por caja.

Así que optimiza tus imágenes y ahorrarás espacio.

¡El tamaño (de las imágenes) sí que importa!

Para optimizar las imágenes siempre se nos viene a la cabeza el peso en Kb (Kilobytes).

Pero algo en lo que alguna gente no cae (lo sé por mi propia experiencia con algunos de mis clientes) es que el tamaño en pixels de las imágenes también influye mucho a la hora de optimizarlas.

No te rías, que te veo…

Hay mucha gente que cree que cuanto más grande sea una imagen, más calidad tendrá.

Y tiene cierta lógica, pero ¿de qué nos vale meter una imagen de 20 millones de pixels en un espacio de 100×100???

Hazme caso; antes de subir las imágenes a tu web, mide en qué espacio las vas a insertar e intenta que se adapten lo mejor posible a esas dimensiones.

Formatos de imagen para una página web

Antes de meternos en faena a ver cómo comprimir y optimizar imágenes, es importante que conozcas (si no los conoces ya) los formatos más utilizados en una web.

¡Edu, eso ya lo sabe todo el mundo!

Sí, ya. He visto gente queriendo subir archivos PSD de Photoshop… ¡ahí lo dejo!

Estos son los formatos recomendados:

JPG

Formato por excelencia para imágenes a todo color o en blanco y negro formadas por pixels (lo que viene siendo lo opuesto a una imagen vectorial). Es un formato de compresión que permite tener imágenes con poco peso pero sin apenas pérdida de calidad para el ojo humano.

PNG

Formato para imágenes de colores planos, dibujos vectoriales, logos,  etc. También es el formato estándar para imágenes con transparencia.

GIF

Aunque para algunas cosas se sigue utilizando el formato GIF, el PNG se lo ha ido comiendo con patatas desde hace tiempo. Yo solo lo utilizo en ocasiones para crear algún GIF animado, pero ¡OJO!, pues estos archivos pueden pesar lo suyo…

SVG

Tipo de imagen vectorial similar al PNG. Destaca porque es un formato de bajo peso, escalable sin pérdida de calidad (es vectorial) y que se puede modificar «in-situ» en la propia web (tamaño, colores…), sin tener que volver a subir la imagen modificada (por ejemplo, desde un maquetador visual como Elementor)

WebP

Formato de imagen que ha saltado al ruedo hace poco tiempo. Desarrollado por Google, que se mete en todo, jeje… Este formato pretende coger las ventajas del JPG, PNG y GIF para hacer un formato «universal» de poco peso para utilizar en las páginas web. De momento no está muy extendido y hasta el propio WordPress no está preparado todavía para cargar este tipo de imágenes, pero si Google dice que será el formato por excelencia, ¡ve tú y discúteselo!

Cómo comprobar si mis imágenes están optimizadas

Para comprobar cómo se está comportando tu web en general y tus imágenes en particular en lo que a velocidad de carga se refiere, puedes probar con una de las herramientas más utilizadas para comprobar el rendimiento y optimización de páginas web: GTmetrix.

Te voy a poner un ejemplo con una web real cuyo nombre no voy a decir. Solamente quiero que sepas que es la web de un periódico español del top 5.  

Como ves en esta primera captura de GTmetrix, la pestaña de PageSpeed (herramienta de Google, como no) nos «anima», por decirlo suavemente, a trabajar un poco más la optimización de nuestras imágenes.

Concretamente, de las tres primeras recomendaciones que nos da la herramienta, dos tienen que ver con las imágenes. De hecho, la puntuación es muy mala:

  • Servir imágenes escaladas (Serve scaled images): si desplegamos la flechita de esta recomendación, podrás ver que en cada línea nos hace referencia a imágenes que tienen un tamaño original ‘X’ pero que en la web se muestran a un tamaño más pequeño ‘Y’. GTmetrix nos recomienda bajar el tamaño de la imagen y nos indica cuánto peso nos ahorraremos.

  • Optimizar imágenes (Optimize images): en este apartado, la herramienta nos muestra las imágenes que son susceptibles de ser optimizadas y el ahorro que conseguiremos. Pero es que además nos ofrece una versión ya optimizada de la imagen (clic en ‘See optimized version’) para poder descargarla y subirla directamente a la web… Genial, ¿no?

Pues ahora que ya sabes cómo optimizar las imágenes, te voy a mostrar un puñado de herramientas para ayudarte en esta tarea.

¡No te vayas ahora, caray!

Test de herramientas de compresión de imágenes

Para poder decir si una herramienta es mejor que otra, lo suyo es compararlas, ¿verdad? De lo contrario, se puede caer en hablar por hablar.

Lo que he hecho es un test de cada una de ellas con una misma imagen de tamaño 1920x1080px y un peso de 633 Kb.

Captura de pantalla con propiedades de imagen

Aquí verás que esos 618 Kb se transforman en 633 Kb reales al subirlos a la web:

Concretamente la imagen original es esta:

Ahora te mostraré el ranking de herramientas y en cada una podrás ver el resultado del test. Las imágenes que verás están sin comprimir, únicamente guardadas desde Photoshop como JPG con calidad 100%.

Las 9 mejores herramientas para comprimir las imágenes de una página web

Mira una cosa.

Yo odio esos posts en los que te muestran «Las 75 + 1 herramientas para…». Y sé que tú también los odias, ¿a que sí?

Es que coño, ¡¡¡si cuando voy por la número 15 ya empiezo a colapsar!!!

Bueno, pues como yo no quiero aburrirte (si no has llegado a leer esto es que te has aburrido ya más arriba, jajaja), te voy a hablar SOLO de 9 herramientas. Pero son las mejores, te lo aseguro.

Y como yo quiero darte solamente lo mejor, para llegar a esas 9, ¡¡¡he testeado hasta 20!!!

Así, a ti te llegará todo masticadito para que luego me dejes un comentario que diga «Edu, ¡¡¡que bien masticadito todo!!!», ¿vale?

Una cosa a resaltar:

De las que herramientas que te voy a mostrar, hay algunas que hacen compresión automática y no te permiten configurar nada.

Otras sí te permiten tocar la configuración, así que en estas segundas he puesto un porcentaje de reducción del 20%, para que todas participen más o menos con las mismas reglas.

Te las pongo en orden inverso, como en los concursos:

9. Tiny PNG

Una de las herramientas básicas de mi día a día. Sencilla y rápida. Solo tienes que arrastrar las imágenes a la pantalla y automáticamente el osito panda se pone a comprimir.

Te permite comprimir hasta 20 imágenes al mismo tiempo y descargarlas todas juntas en un ZIP.

Hay una opción paralela llamada TinyJPG, pero la he probado y la compresión ha sido la misma. Lo harán por posicionar ambos formatos.

Resultado:

8. Gift of Speed

Cargas la imagen en la web, le indicas el nivel de calidad que quieres mantener, la procesas y la descargas. También te permite redimensionarla.

Resultado:

7. Compressor

Con esta opción podrás comprimir imágenes con formatos JPG, PNG, GIF y SVG, comprimir sin pérdida de información (lossless) o con pérdida (lossy) y además te permite comprimir hasta un 90% tus imágenes.

He realizado la prueba con Lossless y Lossy y con la segunda opción no ha comprimido nada; ni un mísero 1%.

Resultado:

6. Kraken

Una de las herramientas más configurables de todas. Te permite utilizar hasta 3 modos de compresión (Lossy, Lossless y Expert). Dispone de versión PRO, que te permite subir imágenes de hasta 32Mb.

Para el test he utilizado la opción Expert con una reducción del 20%.

Resultado:

5. Squoosh

Squoosh me gusta mucho porque te permite ver la imagen original y el resultado en paralelo, para que puedas comparar el antes y el después.

Esta herramienta es mucho más configurable y podrás determinar tú mismo el porcentaje de calidad que quieres dejar (del 0 al 100) e incluso escoger entre diferentes formatos de exportación.

Para la prueba he puesto calidad 80% y formato de compresión MozJPEG.

Resultado:

4. Optimizilla (Image Compressor)

Herramienta fácil y sencilla que te permite variar el nivel de compresión del 0 al 100 antes de descargarla y podrás comparar en la propia pantalla cómo quedaría la imagen final comparada con la original.

Yo he utilizado un porcentaje de calidad del 80% y solo se nota la pérdida si acercas el zoom y te fijas mucho en ciertos detalles. ¡Aprobada!

Resultado:

3. I Love IMG

Ojito con esta opción, que es de las que más ha comprimido la imagen… Además, te da otras opciones para personalizarlas: rotarlas, redimensionarlas, etc.

Aunque no la más potente de las nueve herramientas, ha quedado en el Top 3 y una de las grandes ventajas que la catapultan por encima de las demás es que permite comprimir hasta la friolera de 60 imágenes al mismo tiempo ¡¡¡y sin límites de peso!!!

Resultado:

2. ImageSmaller

ImageSmaller te permitirá comprimir hasta un 90% tus imágenes. Subes la imagen, la comprimes y la descargas; no te permite configurar nada ni personalizar la compresión.

Visualmente no es la más atractiva, pero me importa un pepino. Hace un trabajo fabuloso y se merece el puesto Nº 2.

Resultado:

1. ImageResizer

Y la ganadora de esta «batalla»…

The winner of the winners…

La Muhamad Ali de las herramientas de compresión esssssss…

¡¡¡ImageResizeeeeeerrrrr!!! ¡¡¡Clap, clap!!!

Sencilla y rápida, como la mayoría, pero con un resultado sencillamente brutal.

Simplemente arrastras la imagen a la pantalla y pones a ImageResizer a trabajar. Luego te la descargas y listo.

Ha bajado el peso de la imagen del test en un 76,30%!!! ¡¡¡WOOOWWW!!!

Resultado:

Es cierto que si miramos con lupa el antes y después de cada test, veremos que en algunos la calidad baja en cierta medida, pero siempre podemos jugar con los ajustes de compresión antes de descargarlas, si la herramienta lo permite.

Tabla comparativa de herramientas de compresión de imágenes

Ahora te dejo aquí la tabla comparativa que he realizado.

En ella verás 11 herramientas, y es porque 2 de ellas, que las pongo al final fuera de la tabla, digamos que son «clones» de 2 de las que sí están entre las 9 ganadoras y eso debe ser porque, o son del mismo proveedor o utilizan la misma tecnología.

Debajo de la imagen te dejo un link para descargarte la tabla en PDF.

¡¡¡Toma la tabla y corre!!!

Tabla comparativa herramientas compresión imágenes

Puedes descargarte la tabla en formato PDF aquí.

 

¿Una herramienta de Marketing Multicanal por el precio de una pizza???

Logo E-Goi

Código descuento 25%
REFRESCANDONEGOCIOS25

Logo E-Goi

¿Una herramienta de Marketing Multicanal por el precio de una pizza???

Código descuento 25%
REFRESCANDONEGOCIOS25

Conclusión y opinión personal

La verdad es que al hacer esta comparativa me he llevado un palo de cuidao!!!

Mi herramienta de cabecera siempre ha sido TinyPNG, pero hoy me he llevado una buena leche para espabilar… Ahora ya sé cuál será mi nueva herramienta de compresión.

¡Y pensar que podría haberlo hecho mejor hasta ahora!!! ¡¡¡Me muero!!!

Bueno, nunca es tarde para aprender, ¿verdad? Nos creemos los Reyes del Mambo y luego haces una comparativa y te despiertas de golpe como si te echaran un jarro de agua fría lleno de pirañas hambrientas.

También es cierto que, dependiendo de para qué necesites las imágenes, podrás utilizar una u otra, pues por ejemplo TinyPNG conserva muy buena calidad tras la compresión y otras penalizan más este aspecto. Para gustos.

No tengo mucho más que decir, amigo, amiga… Haz tu elección y di aquello de «and the Oscar goes to…».

Simplemente puedo pedirte que te animes a dejarme 5 estrellitas si te ha gustado el post, me hagas un comentario diciéndome lo guapo, sexi y buen marido que soy (si eres mi mujer, claro) y que compartas esto en tus redes sociales, en tu club de tute o con tus amigos del pueblo y conseguiremos no ser castigados con una plaga de langostas. 

Aunque ahora que lo pienso, si la plaga de langostas es de las de mar, ¡¡¡me apunto a la plaga con una botella de Albariño!!! 😛

¡Qué! ¿Con qué herramienta te quedas tú? 

¡Haz clic para valorar esta entrada!
(Votos: 8 Promedio: 5)

Edu Rubianes

Soy Diseñador Freelance de Páginas Web con WordPress. Mi misión es ayudar a emprendedores y pequeños negocios a tener una web moderna y fresca para mejorar su imagen y sus ventas.

Esta entrada tiene 4 comentarios

  1. Laura

    «Edu, ¡¡¡que bien masticadito todo!!!», ¿vale? Era esto lo decias que pusiesemos, no?
    Ahora en serio, muy bueno, yo tb uso el panda para las imagenes. me gustaba precisamente porque no me hacia preguntas que luego no se si responderé bien: que si 50%, que si 118×250, que si esto o aquello. De todas formas acabo de probar el resizer y está muy bien, no hay que pasar las imagenes varias veces hasta que te queda menos de 100K para las webs, Gracias, me lo quedo

    1. Edu Rubianes

      Jajajajajaja!!! Bien, bien!!!

      ImageResizer es muy potente!!! Pruébalos todos, que no pierdes nada 🙂

      Un abrazote, Laura!!!

  2. Victoria

    Hola Edu. Me ha venido muy requete bien tu Post. He aprendido y me he reido de lo lindo. Dos grandes talentos: Conocimiento + Humor: Felicidades, te pongo 5 estrellitas y no soy tu mujer!..jajajaj
    Aprovecho para preguntar tu opinión en esto. Aún llevando adelante esta táctica de optimización de imágenes, consideras deseable tener un plugin? como por ejemplo IMAGIFY?,
    Gracias por tu esfuerzo didáctico. Ahorra mucho tiempo y me da mucha seguridad tu opinión. Saludos,

    1. Edu Rubianes

      Hola Victoria,

      Pues yo no utilizaría ya el plugin, pues las imágenes optimizadas las sobre-optimizaría y podrían perder demasiada calidad. Además, así te ahorras un plugin.

      Un saludo y gracias por tus palabras 😉

Deja una respuesta

Información básica sobre protección de datos Ver más

  • Responsable Eduardo Rubianes.
  • Finalidad  Moderar los comentarios.
  • Legitimación Tu consentimiento.
  • Destinatarios  FastComet INC.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.