4 herramientas para optimizar las imágenes de tu web (y que cargue a la velocidad de la luz)

Sé por qué estás aquí.

Estás buscando herramientas para optimizar las imágenes que subes a tu página web.

Tienes claro que no puedes imágenes “en crudo”, sin reducir, porque eso podría afectar al rendimiento de la página (y darte muchos problemas de cara al SEO).

Pues estás en el sitio correcto. 😉 

En este post he hecho una lista con algunas de las herramientas de optimización de imágenes que yo suelo utilizar.

Y ojo, que no me voy a quedar ahí.

Además, te voy a explicar varios trucos para reducir todo lo posible el tamaño de tus imágenes sin perder calidad.

Empiezo en 3, 2, 1… a por ello.

[Optimizar imágenes] ¿Por qué unas imágenes muy pesadas afectan al rendimiento de tu web?

Antes de nada, quiero que entiendas por qué es obligatorio que las imágenes que subes a tu web estén optimizadas (si esto ya lo sabes, pasa directamente a la siguiente parte del post).

Imagina que estás subiendo una cuesta muy empinada con el coche.

Si tú eres el único pasajero, lo normal es que te resulte fácil subirla. Metes una marcha corta, aprietas un poco el acelerador y listo.

Pero ¿y si llevas un copiloto? 

¿Y si en los asientos de atrás también llevas pasajeros?

¿Y si además tienes el maletero cargado hasta los topes?

A medida que vas metiéndole peso, al coche cada vez le cuesta más y más remontar la cuesta (incluso puede que necesites poner el freno de mano).

Con tu web pasa lo mismo.

Si subes una o dos imágenes muy pesadas, no va a pasar nada.

Pero si cada post que subes al blog lleva 2 o 3 imágenes de 1 megabyte cada una, llegará un punto en que la web se acabe sobrecargando.

Lo que significa que cargará más lento.

Y eso puede llegar a ser un problema bastante grave, porque:

• La experiencia de usuario empeora: no sé en tu caso, pero yo suelo cerrar una web si tarda más de 5 o 6 segundos en cargar. Y yo soy de los más pacientes, porque la mayoría de los usuarios no espera ni 3 segundos.
• Tu web se posiciona peor: como consecuencia de lo anterior. Google sabe que los usuarios se frustran si una web tarda demasiado en cargar, y por eso “castiga” a las más lentas posicionándolas peor.

Si no quieres que tu web acabe yendo como el coche de los Picapiedra, atento a los consejos que te voy a dar ahora.

Cómo optimizar las imágenes de tu web: 2 opciones

A la hora de optimizar las imágenes, tienes dos opciones:

• Comprimirlas para reducirles el peso.
• Recortarlas y ajustar sus medidas.

Te las explico por separado.

1. Bájales el peso (comprímelas)

Decía antes que unas imágenes demasiado pesadas afectarán al rendimiento de tu web. Pero ¿cuánto es exactamente “demasiado”?

Como norma general, las imágenes que subas a tu página no deberían pesar más de 150 kilobytes.

Ojo, 150 kb es el tope, pero la idea es reducirlas todo lo posible sin sacrificar la calidad.

Te lo explico con un ejemplo.

Fíjate en esta imagen.

Pesa poquísimo (solo 17 kilobytes), pero… ¿no te parece que está demasiado pixelada?

Creo que lo podemos hacer mejor:

Ahora pesa 50 kilobytes, que sigue siendo un peso más que aceptable, pero la calidad es muchísimo más alta.

Tip extra: si una imagen pesa demasiado, cámbiale el formato

El formato de archivo de una imagen también puede afectar (y mucho) a su peso.

Los más utilizados son:

1. PNG: la calidad de imagen que te ofrece es mayor… y eso significa que el peso también. Este formato se utiliza mucho para subir imágenes que no quieres que tengan fondo. Por ejemplo, el logo de tu web o una foto de una persona silueteada). 
2. JPEG: JPEG te ofrece una mejor relación calidad-tamaño (aunque la calidad siempre sería inferior que en PNG). Es una buena opción para imágenes grandes y que contienen mucha información (muchos elementos o colores).

Cuando haces una captura de pantalla en tu ordenador, por defecto ese archivo se suele guardar como PNG. Y si es una captura grande, eso significa que puede llegar a pesar bastante (te hablo de archivos de 500 o 600 kilobytes, incluso más).

En estos casos, antes de comprimirla, prueba a transformarla en JPG.

Verás cómo solo con eso el peso se reduce muchísimo, y la calidad prácticamente no se ve afectada.

2. Reduce sus dimensiones

Cuando subes una imagen a tu web, debes tener en cuenta el tamaño con el que se va a mostrar en la página.

¿Qué quiero decir con esto?

Supongamos que para la imagen principal de tu post has subido un archivo que mide 1000  x 1000 píxeles. Sin embargo, una vez en la web, esa misma imagen se muestra solo a 500 x 500 píxeles.

Esto genera dos problemas:

1. Estás subiendo un archivo que pesa el doble de lo necesario.
2. Cada vez que un usuario acceda a tu web, el navegador tendrá que redimensionar esa imagen de 1000 píxeles para mostrarla a 500 (y eso hará que la velocidad de carga empeore).

En lugar de eso, la idea es que antes de subir la imagen a tu blog, la redimensiones y la reduzcas a 500 x 500 píxeles.

4 herramientas para optimizar las imágenes de tu web (+1 tip extra)

Ahora sí, vamos con la parte del post que te interesa. 😉

Aquí he resumido algunas de las herramientas que utilizo de forma habitual para optimizar imágenes.

1. IloveIMG

IloveIMG es mi herramienta de cabecera.

Cuando tengo que subir una imagen al blog de uno de los clientes con los que trabajamos en la agencia, la que uso el 99 % de las veces es esta.

Y es que es una auténtica todoterreno.

IloveIMG es una suite de herramientas que te permite hacer prácticamente de todo:

• Comprimirlas: para reducirles el peso.
• Recortarlas: si has hecho una captura muy grande, quizá te interesa eliminar una parte de la imagen.
• Redimensionarlas y modificar el tamaño: respetando las proporciones de la imagen original para que no se deforme.
• Cambiarles el formato: ¿recuerdas cuando te dije que puedes reducir mucho el peso de una captura pasándola a JPG? Pues IloveIMG tiene una funcionalidad específica para eso.

También incluye otras opciones, como ponerle marca de agua o hacer algunas ediciones sencillas. Pero para este tipo de cosas hay otras herramientas en esta lista que me parecen mejores.

Aun así, con todas las opciones que te he explicado te aseguro que tienes de sobra.

Además, algo que me encanta de ella es que es muy intuitiva. Seleccionas la funcionalidad que quieres usar, subes o arrastras el archivo de imagen y aplicas las modificaciones que quieras.

De todas formas, aquí te dejo un tutorial completo donde explican cómo utilizar IloveIMG:

2. Squoosh

Te decía que yo utilizo IloveIMG en el 99 % de los casos.

Pero hay veces que necesito tener más control sobre el nivel de compresión que le aplico a una imagen. 

Y para estas ocasiones tengo un plan B: Squoosh.

Las funcionalidades de Squoosh son muy parecidas a las de IloveIMG. La principal diferencia es que te permite decidir el porcentaje exacto de compresión que quieres aplicar.

Además, te muestra a tiempo real cómo se va a ver la imagen final. Fíjate:

Antes de descargar la imagen, asegúrate de establecer el formato “MozJPG” (suele estar puesto por defecto).

Este es un formato especial diseñado para archivos de imagen web, con una muy buena relación calidad-peso.

En este vídeo explican cómo usar Squoosh.

3. Photopea

Photopea es básicamente una versión gratuita de Photoshop (sí, no se han complicado mucho poniéndole nombre).

Y al igual que Photoshop, te ofrece funcionalidades como:

• Edición por capas: lo que significa que puedes “superponer” diferentes elementos dentro de una imagen. Por ejemplo, si tengo una foto y quiero ponerle texto encima, creo una capa independiente para ese texto. Así puedo editarlos por separado siempre que lo necesite.
• Herramientas de retoque: para recortar, modificar las dimensiones, ajustar la saturación y el contraste… y esas son solo las más básicas.

Al acabar de editar la foto, la puedes exportarla en el formato que quieras (normalmente JPG, porque pesa menos).

Además, al exportarla también puedes reducirle la calidad para que pese menos.

Aun así, yo normalmente la descargo con el 100 % de calidad y luego utilizo IloveIMG o Squoosh para reducirle el tamaño.

Photopea es una herramienta complejísima y con muchísimas posibilidades (casi tantas como el propio Photoshop), pero en este tutorial te explican las funcionalidades esenciales:

4. WP Smush

Estás leyendo este post… y notas un sudor frío que te recorre la espalda.

“Ostras, pero si yo ya tengo como 60 imágenes subidas a la web y nunca se me ha ocurrido comprimirlas. Ahora ¿qué hago? ¿Las tengo que borrar y volver a subirlas comprimidas?”.

Pues sí, me temo que sí. 

Venga, te espero aquí mientras terminas…

…

Es broooooooooooooma. 😄

Para estos casos tienes WP Smush.

Un plugin de WordPress que se encarga de optimizar las imágenes que ya tienes subidas a tu web.

Una compresión retroactiva, por así decirlo.

También irá optimizando las imágenes que vayas subiendo, pero mi consejo es que igualmente las subas ya optimizadas. 

Así tendrás más control sobre el nivel de compresión y te aseguras de que mantengan la calidad necesaria.

Tip extra: ojo con las “compresiones fantasma”

Esto te interesa si trabajas con un equipo.

Hay herramientas como WhatsApp, Telegram o Trello que comprimen las imágenes que envías a través de ellas.

Y encima lo hacen sin decirte nada (por eso lo de “compresión fantasma”).

Si ya tienes una imagen optimizada y lista para subirla, y se la envías a alguien de tu equipo por WhatsApp (por ejemplo), acabará convertida en un amasijo de píxeles.

Para evitarlo, antes de enviarlas mételas en un archivo ZIP o RAR. Así estarán “protegidas” y no perderán calidad.

¿Listo para sacarles todo el potencial a las imágenes de tus posts?

Las imágenes son un recurso muy útil. 

Llaman la atención, agilizan la lectura y ayudan a explicar conceptos complejos.

Y todo eso hará más probable que el lector se lea tu post de principio a fin y (lo más importante) que se acabe suscribiendo a tu lista de email y entrando en tu embudo de venta.

Claro que para eso no basta con tener unos posts muy buenos.

También necesitas saber:

• Qué tipo de contenidos publicar para atraer potenciales clientes.
• Qué lead magnet ofrecerles para que se suscriban.

Eso te lo explica Cova aquí.

En su masterclass 100 % gratuita donde te explica cómo plantear un embudo de ventas orgánico para tu negocio, de principio a fin.

Es una clase muy completa (hasta te dice qué emails enviar y en qué orden para convertir a esos leads que captes en clientes). 

Si tu objetivo es captar clientes con tu blog, yo no me lo planteaba y me apuntaba ahora mismo. 😉

Y con esto sí, me despido (pero si tienes cualquier duda, recuerda que me la puedes dejar en los comentarios).

¡Nos leemos muy pronto!