Cómo optimizar las imagenes para tu web

En este artículos vamos a ver cómo puedes optimizar las imagenes para tu  web. Al guardar imágenes, debemos tener en cuenta dos cosas: el formato de archivo de imagen y la compresión, eligiendo la combinación correcta, podemos llegar a un grado de compresión óptimo.

La mayoría de usuarios, los dos únicos formatos de imagen que conocen son JPEG y PNG, a modo de resumen, podemos decir que utilizaremos el formato JPEG para fotos o imágenes con mucho color, y el formato PNG para imágenes más simples o cuando necesitemos imágenes con fondo transparente.

Para aquellos que no conocen la diferencia, el formato de imagen PNG es un formato no comprimido, lo que significa que el resultado es una imagen de mayor calidad, por lo que el tamaño del archivo es mucho mayor. Por otro lado, el formato JPEG es un formato de archivo comprimido que reduce ligeramente la calidad de la imagen para proporcionar un tamaño de archivo significativamente más pequeño.

Lo siguiente es la compresión, lo que significa usar una herramienta para guardar imágenes optimizadas para la web. La compresión puede marcar una gran diferencia.

Ejemplo compresión tras optimizar las imagenes para tu web

A continuación puedes ver una tabla con las combinaciones que podemos usar para guardar nuestras imágenes.

Herramientas de compresión de imágenes para bloggers

Ahora que hemos visto la diferencia que tiene cada tipo de compresión, vamos a ver cómo podemos guardar adecuadamente las imágenes optimizadas para la web y así poder acelerar nuestro sitio web.

Adobe Photoshop

Adobe Photoshop es un software premium (de pago) que viene con una función para guardar imágenes optimizadas para la web. Simplemente abrimos nuestra imagen y hacemos clic en el botón Archivo, y elegimos la opción Guardar para Web y dispositivos.

Esto abrirá una pantalla de Guardar para Web y dispositivos. A la derecha, puedes elegir diferentes formatos de imagen. Por ejemplo, para el formato JPEG, verás diferentes opciones de calidad. Cuando selecciones sus opciones y hagas los cambios que necesites te mostrará el tamaño del archivo en la parte inferior izquierda.

Así de sencillo es utilizar Photoshop para optimizar las imagenes para tu web: elegir la orden Guardar para Web y dispositivos, seleccionar el formato de salida de imagen y elegir su calidad.

Como alternativa a Photoshop tenemos GIMP. También tenemos otros productos de Adobe como Fireworks que pueden hacer el mismo trabajo.

ImageOptim

ImageOptim es una utilidad para Mac que nos permite comprimir imágenes sin perder calidad al encontrar los mejores parámetros de compresión y eliminar los perfiles de color innecesarios.

La alternativa de Windows a esto es Trimage.

JPEGmini

JPEGmini utiliza una tecnología de recompresión que reduce significativamente el tamaño de las imágenes sin afectar a su calidad perceptual. Podemos usar su versión web de forma gratuita o comprar el programa para instalarlo. Al igual que TinyPNG, también tienen una API paga para automatizar el proceso.

TinyPNG

TinyPNG es una aplicación web gratuita que utiliza una técnica de compresión con pérdida inteligente para reducir el tamaño de nuestros archivos PNG. Todo lo que tenemos que hacer es ir a su sitio web y subir nuestras imágenes. Comprimirán la imagen y nos darán el enlace de descarga. También tienen una API para desarrolladores que permite convertir las imágenes automáticamente.

Conclusión

Como puedes ver, hay varias herramientas que podemos usar para optimizar imágenes para la web. Al usar la compresión de Photoshop, vimos los mejores resultados en tamaño, sin embargo, la calidad se vio algo afectada. Sin embargo, TinyPNG fue el claro ganador para guardar cualquier tipo de PNG en la web.

A veces, se suele aconsejar utilizar una combinación de TinyPNG o JPEGmini e ImageOptim para obtener mejores resultados.

[whatsapp]

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.