Optimizar imágenes web en formato png y jpg

Una parte de la experiencia de usuario en su visita a un sitio web viene determinada por el tiempo de espera mientras se cargan los contenidos. Algo que nos puede ayudar a convencer de esa importancia es que Google valora la velocidad como uno de los parámetros que tiene en cuenta en el posicionamiento en buscadores (siempre mirando por los usuarios, don’t be the evil).

El peso de las imágenes suele ser un punto crítico. La cantidad de imágenes y el peso sumado de todas ellas puede ser uno de los mayores retos cuando estamos optimizando la velocidad de nuestro website.

Estos últimos años han ido apareciendo servicios que permiten reducir el tamaño de los archivos de imágenes, que habitualmente son formato jpg o png, de forma fácil y sin una pérdida apreciable de la calidad.

El formato jpg es, de por sí, un formato con pérdida, es decir, la imagen resultante pierde calidad. Conceptualmente sigue el mismo esquema que un mp3 en el caso del audio. La incapacidad del ojo humano para ver toda la gama de colores que puede contener una imagen facilita que los píxeles que la forman, y que tienen colores parecidos o cercanos, gracias a la compresión se conviertan en uno .

El peligro viene porque, disminuyendo el peso, si utilizamos mucha compresión acabaremos teniendo artefactos como el que vemos en la ampliación de la imagen. Se dejan de apreciar muchos matices al tener tanto ruido.

Los archivos PNG funcionan de una forma diferente. Los llamados PNG8 trabajan sobre una paleta de, como máximo, 256 colores, por lo que solo son recomendables para imágenes con pocos colores y bordes definidos, como puede ser un logo o una imagen del estilo flat design. Si lo que quieres usar es fotografía, entonces, mucho mejor el formato jpg.

Nacieron para sustituir a los gifs sobre los que existía una patente relativa a la forma de compresión y esto en el mundo web siempre es una limitación que se busca evitar.

Existe un PNG24 que soporta 16 millones de colores y se utiliza especialmente si quieres usar transparencia en el fondo de tu imagen.

Los servicios de optimización de imágenes pueden actuar de las siguientes formas:

1. La transparencia del png24 simularla en png8.
2. Los metadatos que contiene el fichero, como el autor o la fecha, eliminarlos. No será el mayor ahorro pero todo suma.
3. Generar más pérdida de calidad sin que se aprecie para el ojo humano y, por tanto, tener un menor peso.

Hay websites que trabajan subiendo los ficheros online y, desde allí, gestionar la compresión, habitualmente con algún tipo de restricción (peso de las imágenes, número total de imágenes).

Otros se pueden instalar en el escritorio de tu sistema operativo Apple o bien para Windows. Y otros, gracias a su API (Application Programming Interface), los puedes integrar, por ejemplo, en un Wordpress, o utilizando sistemas de automatización de tareas, como Grunt, para que hagan su trabajo de forma casi transparente y automática.

Algunos ejemplos de este tipo de servicios:

Kraken.io

Para mi gusto, y el de otros en Ondho, es de lo mejor que hay en cuanto compresión de imágenes por su versatilidad y flexibilidad.

Para facilitar la vida da soporte tanto para PNG como JPG. Disponible para Wordpress como plugin y también para los que trabajamos en Grunt.

JPEGMini

Como su nombre indica, trabaja solo con el formato jpg. Suele ser el formato habitual de las fotos, por lo que tiene mucho sentido que se quieran centrar en él ya que la mayoría de las imágenes de un website serán fotografías.

Puede trabajar en instalación en el escritorio, simplemente tienes que arrastrar las imágenes y el programa hará el resto. Disponible para Windows y Mac.

Cuenta con versión gratuita, limitada a 30 días, y otra de pago. Puede ahorrarte hasta 5 veces el peso de las imágenes. Para los que hacen un uso intensivo, tiene una versión para servidor.

TinyPNG Optimizer y TinyJPG

Dos urls diferentes, con un mismo desarrollador, por lo que podremos utilizarlo indistintamente para comprimir nuestras imágenes en JPG o PNG.

Muy fácil de usar, van al grano, solo entrar ya nos encontramos con la caja para subir nuestras imágenes. No todo es comprensión de imágenes para mejorar la conversión de objetivos en nuestra web.

Si utilizas Photoshop o Wordpress estás de enhorabuena porque disponen de plugins para las dos plataformas.

Smush.it

Es de los primeros y más famosos servicios. Proporcionado por Yahoo, siempre ha sido un sello de calidad. Por desgracia, hace poco ha dejado de dar soporte al proyecto, por lo que no sabemos qué futuro le espera.

ImageOptim

Es uno de los clásicos. Funciona solo para la plataforma Mac OS X, de Apple, y tiene, al igual que jpegmini, una versión escritorio muy sencilla de utilizar. Dispone de compresión para los dos formatos.

Para ver el potencial podemos realizar dos pruebas comprimiendo un archivo de cada formato, PNG y JPG, utilizando los 4 servicios.

Probamos Kraken, JPEGmini, ImageOptim y tiny (png y jpg) a ver qué resultados nos devuelven con dos imágenes, una de cada formato.

Imagen original en jpg, con tamaño 866 kb (del apartado Nosotros de nuestra web)

Imagen original en png, con tamaño 14 kb (de nuestro post sobre la importancia de las palabras clave)

**Entender para qué sirve cada formato es esencial**, gran parte de la compresión la ganamos con una buena elección del formato. Elegir un jpg, contra un png, cuando tiene pocos colores seguramente ya es una mala opción de partida. Finalmente se puede acabar de afinar el peso de la imagen con una herramienta de compresión como estas.

Por último, no olvidemos que el uso de muchos dispositivos diferentes, y el soporte de muchos navegadores y sistemas operativos, hacen que haya alternativas de carácter vectorial, como SGV, que pueden contar con un gran futuro en el desarrollo de imágenes para aplicaciones móviles y desarrollo web.