Cómo comprimir imágenes en tu web

Ya hemos comentado en otros artículos la importancia que tienen las imágenes en el diseño web.

Las empresas son muy conscientes de la importancia del impacto visual en los usuarios en el diseño web. En una página web, la primera impresión es muy importante. Debido a la enorme oferta de páginas web, el usuario debe encontrar lo más rápido posible lo que busca y para esto las imágenes son una herramienta fundamental.

Pero esto no es suficiente. Además de ser atractivas y efectivas para la comunicación en el diseño web deben estar optimizadas, deben ser de calidad y deben ser muy ligeras. De esto vamos a hablar en este artículo.

El exceso de tamaño y peso de las imágenes  que contenga una página web, es uno de los principales causantes de que la misma tarde mucho tiempo en cargar.

Y por si no lo sabías, el tiempo de carga es uno de los tantos factores que tiene en cuenta Google al posicionar tu web.

Además, esta mala velocidad de carga, por el gran tamaño de tus fotos online, también perjudica mucho la experiencia del usuario.

¿Porqué debemos reducir el tamaño de las imágenes en nuestra página web?

Reducir o comprimir el tamaño de las fotos es, a veces, una de las acciones a las que no damos mucha importancia a la hora del diseño de nuestra página web… pero que puede aportarnos muchos beneficios.

“Optimizar el peso de las imágenes mejora los tiempos de carga de nuestra web o blog y ayuda para mejorar su posicionamiento”

El mayor y principal beneficio que conseguimos al comprimir el tamaño de una fotografía es que aumentamos la velocidad de carga de nuestra página web.

Tener una página web con unos tiempos de carga bajos, mejora la experiencia del usuario y nos ayuda a reducir el porcentaje de rebote de la página.

Cuanto más tarda en cargar una página web, más posibilidades tienes de que el lector cierre tu web y se vaya en busca de otra.

Es conveniente comprobar cómo funciona tu página web, haz un test de velocidad a tu web. Yo te recomiendo usar la herramienta PageSpeed Insights de Google.

Una de las recomendaciones que dan todos los test de velocidad es la optimización de las imágenes reduciendo su tamaño.

El otro beneficio que obtenemos al reducir el peso de las fotos online es que también reducimos el consumo de transferencia de datos. El cual nos puede condicionar el correcto funcionamiento de nuestro hosting.

Al final del artículo te mostraré una lista de herramientas o editores de fotos online gratuitos para que puedas reducir el peso de tus fotografías antes de subirlas a la web. Pero antes me gustaría darte unos consejos a la hora se usar las imágenes.

¿Cómo usar y optimizar una imagen para tu web?

1. Tamaño de la imagen

El tamaño de una imagen son las dimensiones en pixeles de la fotografía. Si para el artículo necesitas una imagen de 300×300 px, no uses una fotografía de mayor tamaño para luego reducir su tamaño en el mismo artículo.

Mejor súbela a la web ya optimizada en ese tamaño ideal. Porque, más píxeles nos dan por resultado archivos más pesados y eso es lo que queremos evitar.

2. Formato de la imagen

Los dos formatos más importantes que se usan en el diseño web son 2: jpeg y png.

Cómo usar cada formato de compresión de imágenes es muy sencillo.

Guardaremos las fotografías complejas, con muchos colores y degradados, con la extensión jpg. Ya que su algoritmo da unos resultados de compresión de imágenes mejores.

Para imágenes planas o con transparencias, como dibujos vectoriales, logotipos o fotografías con zonas de colores planos amplias, la extensión png. Antes este tipo de imágenes se guardaban con extensión gif, pero ha ido perdiendo terreno a favor de la extensión png.

3. Nombre del archivo

Sí, el nombre también es importante. Ayuda a posicionarte en el buscador de imágenes de Google. No es lo mismo tener una foto con el nombre ciudad-1354.jpg que barcelona-noche.jpg. Ya sólo con ver el nombre, una te está contando más que la otra.

Bueno, todo esto está muy bien pero ¿cómo hago para que las imágenes estén optimizadas en mi página web?

Editores de fotos online gratuitos para optimizar el peso, reducir de tamaño o comprimir fotografías sin perder calidad

1) Smush.it

Si no te quieres complicar, es la opción más sencilla si usas WordPress. Es un plugin que se instala en el gestor de contenidos, y actúa automáticamente cada vez que subes una imagen reduciendo su tamaño.

2) Compressor.io

Este programa para reducir las imágenes de tu página web, te permite hacerlo hasta un 90% de su peso original.

Es muy sencillo de utilizar, y te permite subir hasta fotografías de 10 Mb y elegir el tipo de compresión. Puedes reducir el tamaño de la foto sin pérdida de calidad de imagen (menor compresión) o con perdida (mayor compresión).

3) Tiny PNG

Es un programa para reducir tamaño de las imágenes online que te permite subir hasta 20 imágenes a la vez con un máximo de 5 Mb cada una. Es una buena opción si manejas una galería de imágenes grande.

4) Web Resizer

Lo bueno que tiene esta herramienta online para optimizar las imágenes que usamos en nuestras webs o emails, es que además te permite realizar otra serie de operaciones como cambiar, recortar, reducir, rotar el tamaño

5) Image Optimizer

Sólo tienes que subir la foto, indicarle el tamaño final de la imagen y el hace el resto. No te tienes que preocupar de nada más para reducir o comprimir el tamaño de las imágenes que usas en tu web sin perder calidad.

6) Optimizilla

Es una herramienta para comprimir el tamaño de las imágenes muy sencilla. Sólo tienes que subir las fotos que quieres comprimir, hasta un máximo de 20 a la vez. Y en unas miniaturas te muestra el porcentaje de reducción del tamaño del archivo que ha conseguido.

¿Qué te parece? ¿Fácil reducir el peso de las imágenes en tu página web?

Una última cosa, acuérdate siempre de comprobar las licencias de las imágenes que usas en tus artículos. Aunque uses imágenes con licencias Creative Commons,  cita siempre la fuente.

Comprimir el tamaño y reducir fotos hasta su correcto tamaño, es una práctica que debemos realizar cada vez que subamos una fotografía a la web.

Con el listado de editores de fotos online gratuitos (o herramientas para comprimir fotografías en internet) que tienes en este post, no te costará ni dos minutos dejar el tamaño perfecto para cada imagen que subas a tu página web sin perder calidad.