Clicky

¿Cómo tienes de optimizadas tus imágenes web?

ImageOptim-CLI

Conoce ImageOptim-CLI, una herramienta de compresión por lotes para MAC OSX

Exportar imágenes para la web con nuestro software gráfico favorito es algo que muchos de nosotros hemos hecho cientos de veces. Nuestros ojos se fijan en la vista previa de una imagen ajustando cuidadosamente los ajustes de calidad y optimización, hasta que hemos encontrado el punto ideal donde el tamaño del archivo y la calidad son a la vez lo mejor posibles.

Después de exportar la imagen - por lo general usando una opción llamada "Guardar para la Web" - y después de haber colmado nuestra atención y esfuerzo - queremos ser perdonados por pensar que nuestra imagen esté de la mejor manera posible. Eso no es siempre el caso, por supuesto.

De hecho, se suele dejar en tales archivos muchos más datos. Datos que los navegadores tienen que descargar a pesar de no requerirlos o incluso usarlos, datos que mantiene a nuestros usuarios a la espera un poco más de lo necesario.

Afortunadamente, una serie de populares herramientas pueden ayudar a optimizar aún más las imágenes pero, ¿Cuál se debe utilizar? Asumimos, por un tiempo al menos, que nuestro software de edición gráfica ha optimizado correctamente nuestros archivos, pero ¿Qué sabemos realmente acerca de las herramientas de optimización de imagen?

Herramientas de optimización de imagen

Si actualmente no estás utilizando cualquier herramienta de optimización de imagen, te pediría que elijas una. Cualquiera es mejor que nada. Independientemente de cuál elijas, es muy probable que aumente la velocidad de tu sitio web y mantengas a los usuarios contentos.

Para informar de su trabajo Jamie Manson (un ingeniero consultor de JavaScript del Reino Unido), se encontró con las herramientas más populares de optimización de imagen a través de una variada muestra de imágenes (amablemente donadas por Daan Jobsis a través de su artículo "Retina Revolution"), y ha publicado los resultados en GitHub.

El informe nos muestra estadísticamente la cantidad de datos que guarda cada herramienta y la cantidad de calidad perdida. Sin embargo, cuán grande es la pérdida de calidad y cuánto es aceptable varía de persona a persona, de un proyecto a otro y de una imagen a otra.

Por las ganancias más grandes

Jamie Manson ha estado usando ImageOptim durante muchos años, y más recientemente ImageAlpha y JPEGmini.

Con este trío, tenemos un especialista en archivos JPEG, otro en los archivos PNG, y una gran aplicación integral, ImageOptim, que también es compatible con GIF y otros formatos. Cada una utiliza diferentes técnicas para conseguir impresionantes ahorros, pero que se complementan entre sí cuando se combinan para ofrecer un ahorro todavía mejor.

ImageOptim

ImageOptim gana a cualquier optimizador agrupando todos ellos. Su acción consiste en la búsqueda de la mejor combinación de parámetros de compresión y elimina comentarios innecesarios y perfiles de color.

ImageAlpha

ImageAlpha es único en su conversión sin pérdida de PNG24 a PNG8, generando un ahorro muchas veces más grande que los populares optimizadores PNG como Smush.it y TinyPNG. La conversión aún mantiene la transparencia alfa en todos los navegadores, incluyendo en iOS e incluso en el IE 6.

JPEGmini

JPEGmini es una "tecnología de recompresión fotográfica con patente en trámite que reduce significativamente el tamaño de las fotografías sin afectar su calidad percibida". Los creadores afirman que reduce el tamaño de un archivo hasta en un 80%, mientras que mantiene la calidad visualmente idéntica a la original.

El ahorro es bastante notable, pero tendrás que comprar el software para utilizarlo sin restricciones.

Priorizar la conveniencia

"En términos de rendimiento, los datos comparativos son tranquilizadores, y hasta la fecha he sido feliz con mis decisiones. Pero hay un problema real: todas estas herramientas son aplicaciones GUI para OS X", dice Jamie Manson.

Esto tiene algunas ventajas porque todo es local. No es necesario cargar y descargar archivos a un servidor Web, así que no hay riesgo de detener el servicio temporalmente. Esto también significa que las imágenes tampoco tienen que salir de nuestra máquina.

Pero en algún punto de cada conversión hay que recordar abrir cada aplicación, procesar manualmente nuevas imágenes y, a continuación, esperar a que la herramienta termine, antes de hacer lo mismo en la siguiente aplicación.

Esto pronto se vuelve tedioso: Tenemos que automatizar! Esta es la razón de que Jamie Manson (con James Stout y Kornel Lesinski) haya creado ImageOptim-CLI, un optimizador de imágenes automatizada desde la interfaz de l?nea de comandos (CLI).

ImageOptim-CLI

Aunque estén disponibles otras herramientas de optimización de imagen desde la línea de comandos, ImageOptim-CLI existe porque los puntos de referencia actuales sugieren que ImageOptim, ImageAlpha y JPEGmini actualmente superan a aquellas optimizaciones alternativas sin más pérdidas y con pérdidas.

Jamie Manson quiso aprovechar esto.

Dada una carpeta u otro conjunto de imágenes, ImageOptim-CLI automatiza el proceso de optimización con ImageAlpha, JPEGmini y ImageOptim. En un comando podemos dirigir nuestras imágenes elegidas por los tres optimizadores - dándonos automatizado de optimización de imagen multi-etapa directamente desde la línea de comandos.

Esto nos da los niveles de optimización de las tres aplicaciones, con la comodidad de la línea de comandos, lo que abre todo tipo de posibilidades para la integración con otros servicios públicos:

• Integrar con flujos de trabajo Alfred.
• Extend OS X con acciones de carpeta y más utilizando Automator.
• Optimizar imágenes cada vez que se cambian con Guard RubyGem.
• Asegurarse de que las imágenes se optimizan cuando enviamos a Git commit.

Instalación y uso

ImageOptim-CLI se puede descargar como un archivo ZIP o clonado utilizando Git, pero la manera más fácil es ejecutar lo siguiente:

npm install -g imageoptim-cli

La ejecución de las tres aplicaciones antes de cerrarlas después se puede lograr con esto:

imageoptim --image-alpha --jpeg-mini --quit --directory ~/Sites/MyProject

O bien, puedes hacerlo con el formato de taquigrafía equivalente:

imageoptim -a -j -q -d ~/Sites/MyProject

Vas a encontrar más ejemplos de instalación y uso en la página del proyecto en GitHub.

Estudio de caso: Myspace

Jamie Manson visitó Myspace y encontró que se transfirieron a su máquina 4,1 MB de datos. Con el bonito diseño estilo revista de la página de inicio no es ninguna sorpresa que aproximadamente el 76% (o 3,1 MB) fuesen imágenes.

Miró si alguno de los datos podrían salvarse mediante la ejecución de las imágenes a través de ImageOptim-CLI. Así, grabo el vídeo a continuación para mostrar la herramienta que se está instalando y luego lanzarla a la página principal de Myspace.

Como se puede ver, el tamaño total de las imágenes antes de ejecutar el comando era 3.186 KB y ImageOptim-CLI fue capaz de eliminar 986 KB de datos, mientras que preservó un 99,93% de la calidad de imagen.

grunt-imageoptim

Hay un plugin Grunt compañero para ImageOptim-CLI, llamado grunt-imageoptim, que ofrece soporte completo para la optimización de las carpetas y colecciones de imágenes. También se puede combinar con grunt-contrib-watch para ejecutarse cada vez que en tu proyecto sean modificadas las imágenes.

Smashing Magazine tiene un gran artículo para aquellos que quieren poner en marcha Grunt.

Resumen

La optimización de imágenes es un paso esencial en el flujo de trabajo de un diseñador y, con tantas herramientas para elegir, hay muchas posibilidades de tener una que se adapte a tus necesidades.

Los datos deben influir mucho en tu decisión de modo que obtengas compresiones m?s grandes al elegir una herramienta que sea conveniente - alguna vez es mejor usar una herramienta sencilla que una herramienta potente.

Recursos

ImageOptim
ImageAlpha
JPEGmini
ImageOptim-CLI
grunt-imageoptim

Si quieres una alternativa con una interfaz gráfica de usuario de Windows, entonces te recomiendo FileOptimizer.

Recomiendo leer los comentarios de los lectores en el artículo original: How Optimized Are Your Images? Meet ImageOptim-CLI, a Batch Compression Tool

Jesus_Caceres