Optimización de PNG mejorada con integración de Pngquant

Kevin van Zonneveld

Cofundador · Ámsterdam, Países Bajos · Mostrar bio

Actualización: este artículo describe el lanzamiento de 2014. El parámetro png_tool que se muestra a continuación fue eliminado en 2015. Para integraciones actuales, usa la documentación de /image/optimize; lossy: true habilita la optimización de PNG con pérdida. El ejemplo histórico que aparece abajo no es válido con la API actual.

Algunos clientes nos comentaron que nuestra optimización de PNG deja que desear. Aunque ya éramos capaces de reducir el tamaño de los PNG grandes en un factor de ocho, esos clientes informaron que servicios especializados como TinyPNG⁠ y kraken.io⁠ ofrecían resultados aún mejores, sobre todo en imágenes más pequeñas.

Obviamente, si esos servicios logran mayores ahorros, eso es a lo que también deberíamos aspirar.

Empezamos a investigar distintas herramientas y terminamos con pngquant⁠. Hoy lo lanzamos como una extensión de nuestro Robot /image/optimize ya existente. Sin embargo, no vamos a convertir pngquant en la opción predeterminada, ya que eso no solo rompería la compatibilidad con versiones anteriores, sino también porque esta herramienta no puede conservar los metadatos.

Conservar los metadatos se considera una buena práctica de civismo en internet, ya que pueden contener derechos de autor. Por eso mismo, si eliges usar pngquant, hacemos obligatorio establecer la opción preserve_meta_data en false, además de especificar png_tool. Queremos evitar que la gente elimine accidentalmente la información de propiedad de sus archivos.

Así es como podría verse un Step en tus Templates:

optimize: {
  robot             : "/image/optimize",
  use               : ":original",
  preserve_meta_data: false,
  png_tool          : "pngquant"
}

Como ocurre con todos los Robots, puedes conectar este Robot directamente encima de otro, como piezas de LEGO®. Eso garantizará que tus miniaturas de video, los avatares subidos, etc., se almacenen automáticamente de forma optimizada.

Tras probar esta nueva funcionalidad con algunos de nuestros clientes, logramos reducciones del 65 % en imágenes de tamaño medio, apenas a unos pocos puntos de servicios como TinyPNG y kraken.io.

Simon⁠, de Yarnee, comentó lo siguiente:

Con Yarnee puedes crear colecciones de contenido multimedia que de otro modo se perderían en servicios basados en feeds como Facebook. Ya usábamos el Robot /html/convert de Transloadit para capturar vistas previas, pero, para que Facebook las aceptara, había que reducir su tamaño. Con la nueva compresión de Transloadit, ¡conseguimos que funcionara de maravilla!

Por supuesto, seguiremos optimizando para exprimir también esos últimos puntos porcentuales, pero ya queríamos compartir la noticia contigo hoy. 😄

¡Que lo disfrutes!