10 formas de reducir el tamaño de las imágenes de tu web

A todos nos gusta tener una web con imágenes de calidad para captar la atención de nuestros lectores, ¿verdad?

Si tienes una página en la que ofreces servicios, vendes algún producto o simplemente se trata de un blog, seguro que cuentas con decenas de fotografías: en los posts, en las páginas estáticas o en las de productos, por ejemplo.

El punto principal a la hora de hablar de las imágenes en un sitio web no es su uso o la cantidad, sino su tamaño, y por lo tanto, su peso.

Por ese motivo, en este artículo he querido recopilar 10 herramientas para reducir el tamaño de las fotografías de una página web, blog o ecommerce.

· ¿Por qué debes reducir el tamaño de las imágenes de tu web?

Antes de empezar a hablar de cada una de estas herramientas, quiero explicarte la importancia de reducir el tamaño de tus imágenes web.

Hoy en día, es fundamental que los sitios webs sean rápidos, es decir, que tarden pocos segundos en cargar (lo ideal es que lo hagan en menos de 3 segundos).

Tener las imágenes web correctamente optimizadas es importante por tres motivos:

1. El tamaño y peso de las fotografías afecta a la velocidad de carga del sitio web, y acabamos de ver la importancia de que tu sitio sea rápido.
2. El tiempo de carga es uno de los principales factores que afectan al SEO, es decir, una web rápida posiciona mejor en Google que una lenta (siempre puede haber excepciones, pero la regla general es así).
3. Es necesario que las imágenes web estén adaptadas al tamaño del sitio en el que están colocadas. Por poner un ejemplo, me suelo encontrar páginas que en el lugar donde va una imagen con 300px de ancho, hay una que ocupa 1000px. Esto es un error habitual en muchas páginas web. Mi consejo es adaptar en peso y tamaño cada una de las imágenes de tu sitio web.

· 10 herramientas para reducir el tamaño de las imágenes en un sitio web

1) ShortPixel

El objetivo de esta herramienta es mejorar el rendimiento de nuestros sitios web reduciendo el tamaño de las imágenes.

Está disponible tanto en versión web como en plugin para WordPress e incorpora tres tipos de compresión de fotos:

1. Lossy compression. Es la mejor opción para la mayoría de los usuarios. Esta opción permite un equilibrio entre la optimización y la calidad de la imagen.
2. Glossy compression. Es la mejor opción si estás pendiente de Google Insights, pero no te importa sacrificar un poco la velocidad de la página. Esta opción te permite una compresión aceptable para una calidad de imagen de primera. La calidad disminuye cuanto más se comprime el archivo.
3. Lossless compression. La última opción permite comprimir píxel por píxel respecto a las imágenes originales, pero ofrece una reducción menor en comparación con los archivos procesados con las dos anteriores.

Sobre a las posibilidades de compresión, la versión web de ShortPixel permite reducir imágenes en lotes de 50 archivos.

En cuanto al plugin para WordPress, es muy fácil de usar y además ligero. Solo tienes que instalarlo y auténticamente se encarga de comprimir todas las imágenes que tengas subidas, así como tus documentos en formato PDF con un solo clic.

Además, las nuevas imágenes que subas se redimensionan y reajustan automáticamente, sin necesidad de realizar ninguna acción adicional.

Por último, mencionar que se trata de una herramienta “freemium”, es decir, permite comprimir 100 imágenes al mes de forma gratuita y ofrece con varios planes de pago si superas esa cifra.

https://shortpixel.com/

ShortPixel Image Optimizer

2) EWWW Image Optimizer

Es una herramienta desarrollada con el objetivo de optimizar imágenes web dirigida a sitios que utilizan hosting compartido.

Como en el caso de ShortPixel, EWWW Image Optimizer cuenta con una versión web y también con el plugin de WordPress, así como con varios planes de pago.

EWWW Image Optimizer te permite aumentar la velocidad de carga de tu página mediante la optimización de imágenes.

Este aumento de velocidad puede conseguir mejores puestos en los motores de búsqueda y también mejorar las tasas de conversión (aumento de ventas y suscripciones, por ejemplo).

EWWW Image Optimizer se encarga de optimizar automáticamente las imágenes que subas y, además, te permite optimizar todas las imágenes que hayas subido previamente y, opcionalmente, convertirlas al mejor formato de archivo.

En cuanto a las opciones de compresión, puedes elegir la compresión por píxeles u opciones de alta compresión sin pérdidas que tus imágenes pierdan calidad.

https://ewww.io/

EWWW Image Optimizer

3) Compress JPG y PNG

Son dos herramientas online que que te permiten comprimir desde tu ordenador hasta un máximo de 20 imágenes en formato JPG y PNG.

Su uso es muy sencillo: solo tienes que subirlas o arrastrarlas y descargar las imágenes comprimidas por separado o agrupadas en un archivo ZIP.

http://compressjpeg.com/es/

4) Compressor.io

Es una de mis herramientas favoritas cuando tengo que comprimir pequeñas cantidades de imágenes para subirlas a mis páginas.

Está disponible en compressor.io y su uso es muy sencillo. Solo tienes que subir o arrastrar la imagen que quieras comprimir, esperar a que se comprima (tarda muy poco) y descargar la fotografía optimizada y comprimida.

Además, al terminar el proceso, la herramienta te va a mostrar el porcentaje de compresión respecto a la imagen original.

Por último, mencionar que permite comprimir archivos en cuatro formatos diferentes: JPEG, PNG, GIF y SVG.

5) Optimizilla

Se trata de un optimizador de imágenes online que utiliza una combinación inteligente con diferentes algoritmos de compresión para reducir el tamaño de imágenes en formato JPEG y PN, manteniendo su nivel de calidad.

Permite subir hasta 20 imágenes de una vez, controlar el nivel de compresión y también comparar imágenes.

http://optimizilla.com/es/

6) WP Smush

Es un plugin para WordPress que siempre instalo en mis diseños. Su nombre completo es: Smush Image Compression and Optimization.

Este plugin se encarga de cambiar el tamaño, optimizar y comprimir todas tus imágenes, tanto las que tengas subidas como las que subas a partir de su instalación.

En mi opinión, lo mejor de este plugin es que te permite establecer un ancho y alto máximos para todas tus imágenes, y las que superen esas dimensiones, se reducirán automáticamente a medida que se comprimen.

Además, dispone de una versión de pago con funcionalidades extras como comprimir más imágenes a la vez o hacer una copia de seguridad de tus imágenes originales.

Smush – Lazy Load Images, Optimize & Compress Images

7) Kraken.io

Kraken image optimizer es una herramienta que está disponible en version online y también como plugin para WordPress y Magento.

Se trata de un compresor y optimizador de imágenes que tiene como principal objetivo el ahorro de ancho de banda y espacio de almacenamiento para así mejorar los tiempos de carga de los sitios web.

El plugin te permite optimizar y cambiar el tamaño de las cargas de imágenes tanto nuevas como las que tengas subidas.

Los tipos de archivos que admite son JPEG, PNG y GIF, y el límite máximo del tamaño del archivo es 32 MB.

https://kraken.io/

Kraken.io Image Optimizer

8) Imagify Image Optimizer

Como en el caso de otras herramientas anteriores, Imagify está disponible tanto en versión web como en plugin para WordPress.

Sus objetivos principales son tres: mejorar la velocidad de carga del sitio web, ahorrar tiempo en las tareas de optimización de imágenes y asegurar la calidad de éstas.

El plugin se encarga de comprimir y redimensionar todas las imágenes de la biblioteca de WordPress con un solo clic, y además es compatible con otros como WooCommerce y NextGen Gallery.

https://imagify.io/

Imagify – Optimize Images & Convert WebP | Compress Images Easily

9) Photoshop

Para terminar mi repaso a estas 10 herramientas para comprimir imágenes, voy a hablar de dos programas.

Si eres de los que usas el entorno Adobe, Photoshop dispone de una opción para optimizar imágenes que van a ir en un sitio web.

En concreto, esta funcionalidad la encontrarás como “guardar para web” o “exportar para web” y te permite elegir las dimensiones, calidad y formato de las imágenes.

Solo tienes que ajustar la imagen en función de tus necesidades y descargarla, como puedes ver en esta captura.

10) RIOT

Por último, quiero hablar de RIOT, un programa que permite conseguir un equilibrio entre calidad y tamaño de las imágenes.

Esta herramienta te permite comprobar la calidad de la versión comprimida, pues su panel está dividido en dos partes: una zona con la imagen original y otra con la imagen optimizada.

En cuanto a los formatos, permite la compresión de archivos en JPG, GIF y PNG, pasando por el cambio de tamaño con seis algoritmos distintos.

· Cómo subir tus imágenes a Mailrelay

Ahora que ya conoces estas 10 herramientas para comprimir y optimizar imágenes, te quiero explicar cómo subirlas paso a paso a Mailrelay e incluirlas en tus newsletters.

Lo primero que debes saber es que Mailrelay es una plataforma de Email Marketing que te permite hacer envíos masivos y gestionar tu lista de suscriptores.  Es posible subir las imágenes que quieres utilizar, pero te voy a enseñar como hacerlo utilizando un CMS o plataforma de blogging.

En ese sentido, te recomiendo alojar en tu propio hosting las fotografías que uses en tus boletines. Para ello, te voy a explicar cómo subirlas en WordPress.

Lo primero que debes hacer es ir a la galería de medios de tu web o blog. Aquí puedes gestionar todas las imágenes subidas a tu web y también añadir otras nuevas.

El siguiente paso es subir tus fotografías una vez estén optimizadas con alguna de las herramientas que te he mostrado en el epígrafe anterior. Puedes arrastrarlas directamente o subirlas clicando en el botón “añadir nuevo” y seleccionándolas desde tu ordenador.

Una vez hayas subido la imagen, la seleccionas para abrir sus detalles.

Pon el ratón sobre la imagen, clica con el botón derecho y selecciona la opción “copiar la dirección de la imagen”.

Con la URL exacta de la imagen copiada, ahora te vas a la sección de boletines de Mailrelay y crear uno nuevo o, si ya lo tienes creado, lo abres para editarlo e incluir la imagen.

Para añadirla, debes clicar en el botón “imagen” y se te abrirá una pantalla como ésta:

En esta ventana puedes gestionar las propiedades de tus imágenes. Para añadirla, solo tienes que pegar la dirección que tiene copiada en el campo URL. Cuando lo hagas, te aparecerá una vista previa de la imagen.

¿Qué elementos puedes configurar en las propiedades de la imagen?

1. Texto alternativo. Es el texto que el usuario visulizará en el caso de que la imagen no cargue correctamente. Puede pasar que, en función del proveedor de email, la foto no cargue correctamente. Aquí te recomiendo poner la URL de tu sitio web.
2. Tamaño (ancho y alto en píxeles). Aquí debes indicar el tamaño de tu imagen. Mi recomendación es que no supere los 600px de ancho para que se visualice correctamente desde el móvil. De hecho, si puedes darle un ancho de 400 o 500px será mucho mejor.
3. Borde. Tamaño del borde en píxeles. Yo suelo dejarlo vacío, pero si quieres que tu imagen tenga borde, debes configurarlo desde esta opción.
4. Espacio horizontal y vertical. Puedes configurar el espacio horizontal y vertical de la imagen en píxeles.
5. Alineación. Selecciona la alineación de la imagen, a la izquierda o a la derecha.

Una vez lo tengas configurado en función del diseño de tu newsletter, quedaría algo similar a esto:

Ahora solo tienes que clicar en el botón “aceptar” para insertar tu imagen en el boletín.

Espero que este repaso por 10 herramientas para comprimir imágenes te sea muy útil y elijas la opción que mejore se adapte a tus necesidades. Solo me queda recordarte la importancia de tener las fotografías optimizadas en un sitio para mejorar su velocidad de carga e indexación en Google.