RIOT: optimizar imágenes

¿Por qué optimizar las imágenes para Web?

Posiblemente, y aunque no le hayas prestado demasiada atención, ésta es una de las optimizaciones que considero más importantes. Todo Webmaster (o casi todo) busca conseguir tener imágenes de buena calidad y que pesen lo mínimo posible. Hoy voy a hablar de un programa gratuito que utilizo, está actualizado y que permite usar distintas librerías externas de compresión.

Existen muchos programas y plugins para optimizar imágenes, yo he hecho pruebas con muchos y hoy quiero presentar uno que ha tenido mucho éxito, por este motivo su autor sigue desarrollándolo y es el que utilizo yo en karmany.net. Para optimizar imágenes (gráficos) se puede recurrir a varios métodos en la web; como usar componentes que te muestran una miniatura y cuando haces clic en la imagen se agranda en una ventana emergente hasta su tamaño original, o reducir el peso de la imagen hasta conseguir una calidad que el autor considera adecuada. Este último paso suele ser laborioso cuando encuentras imágenes de gran resolución y colores y quieres conseguir un formato jpg porque tienes que reducir la calidad o el tamaño hasta que creas preciso... no quiero entrar en los diferentes formatos de imágenes, lo veremos en otro artículo.

RIOT

RIOT son las siglas de: Radical Image Optimization Tool. Su página Web: RIOT

Es un programa gratuito (plataforma Windows) diseñado para optimizar imágenes en los formatos PNG, GIF y JPG, permite visualizar la imagen original a la izquierda, la imagen final a la derecha y el tamaño resultante. Es posible también descargar el plugin para utilizarlo con otros editores gráficos aunque realmente descargas un ejecutable que instala directamente el plugin en Gimp, IrfantView y/o XN View. Curiosamente, viendo su página web, el autor (Lucian Sabo) comenta que para los usuarios de Irfant View (su programa favorito) existe una versión Extended del plugin que tiene algunas características más, por ejemplo se añade dos librerías y permite abrir otros formatos diferentes de archivos. No estoy muy seguro del porqué de esta versión extendida (también gratuita), en su Web explica las diferencias: Diferencias entre las versiones Lite y Extended.

Desde marzo de este año el autor menciona que está desarrollando la siguiente versión (0.5 a fecha de este artículo). RIOT es un programa muy sencillo de utilizar y permite modificar diversos aspectos de la imagen como el número de colores, control de la compresión o la modificación de los metadatos entre otros. Usa la librería FreeImage modificada. También destaco que es capaz de usar librerías externas adicionales para la optimización mediante el uso de plugins y esto es importante porque podemos tener las últimas versiones de los mismos. También se puede observar en la Web que en un futuro se añadirán más tipos de plugins.

Un programa que recomiendo a todo Webmaster o usuario. Si nunca habías oído hablar de él, te sugeriría que al menos lo pruebes.

Ejemplo de uso de RIOT

Veremos también en breve cómo lo usaré para optimizar un icono pero hoy lo vamos a utilizar para optimizar una imagen que tengo en karmany.net, original de un fotógrafo... así que vamos a practicar.

Lo primero es instalar RIOT o utilizar la versión portable que también existe en su sitio Web. Vamos a editar una imagen y la vamos a optimizar por ejemplo en formato png. Aunque con jpg será mejor la optimización voy a hacerlo con png para aprender a usar herramientas externas.

La imagen la puedes encontrar aquí:

Imagen torre del agua de Zaragoza.

Ahí verás una imagen sobre la torre del agua realizada por Luis Calle García que me permitió usar en mi Web. Esa imagen tiene los siguientes datos:

• Nombre: torre_del_agua.jpg
• Tamaño: 490,49 KB (502.261 bytes)
• Dimensiones: 537px x 1.100px
• Resolución colores: 24 bits

Descarga la imagen a tu disco duro observando los datos anteriores. Arrástrala al programa RIOT. Justo debajo de la imagen de la izquierda puedes seleccionar el formato de salida JPEG, GIF, PNG. Pulsa en PNG, verás lo siguiente:

Puedes ver el tamaño original: 502.261 bytes y el tamaño final: 371.727 bytes. Como puedes ver tienes varias opciones de compresión y el programa es muy sencillo de manejar. He seleccionado una paleta de 256 colores, esto significa que he reducido colores de 24 a 8 bits. Voy a seleccionar la opción "Best compression (slow)" - "Mejor compresión (lento)" y veo que el tamaño final es ahora de 350.153 bytes. Justo a la derecha tenemos el "Color quantization algorithm" que es un algoritmo de color que si lo usas en imágenes de gran tamaño no verás visualmente el resultado, para que veas lo que hace úsalo con imágenes pequeñas. Yo lo dejo en NeuQuant neural-net porque en determinados casos la primera opción me distorsionaba un poco el color de la imagen, pero lo mejor es probarlo. Finalmente a la derecha podemos seleccionar optimizadores externos como PNGout Xtreme, OptiPNG o AdvPNG. Voy a seleccionar PNGout Xtreme y pulso en la flecha negra encerrada en un círculo que está justo debajo.

Como en un primer momento no tenemos ningún plugin instalado (los plugins se instalar en el directorio del programa en la carpeta plugins) veremos estas 3 ventanas:

1. Ventana de error, no encuentra el plugin en el directorio de RIOT
2. Pregunta si quieres descargarlo e instalarlo automáticamente. Supongo que descargará la última versión desde su página oficial.
3. Ventana de confirmación. El plugin ha sido correctamente instalado.

Una vez instalado el plugin, ya podemos repetir la operación anterior (pulsar el botón de la flecha negra), se ejecutará el plugin externo para optimizar y veremos el resultado final de tamaño: 338.385 bytes. Se ha reducido bastante.

Es posible que no puedas descargar automáticamente el plugin y lo tengas que hacer manualmente.

Aunque no lo hayas visto, esa imagen que has descargado tiene bastante información "extra", aquí está la explicación: Metadatos en imágenes. En RIOT puedes eliminar también toda esta información pulsando en la pestaña que hay abajo: Metadata.

Puedes también realizar ajustes de brillo, contraste y gamma pulsando en la pestaña Image Adjustments. En otros casos podrás modificar la transparencia o dejar el color sólido. En definitiva, RIOT es un excelente programa muy recomendable para optimizar imágenes.