Compatibilidad con nuevos códecs, diseño actualizado y compatibilidad con la CLI.
Squoosh es una app de compresión de imágenes que nuestro equipo creó y debutó en la Chrome Dev Summit 2018. Lo creamos para que fuera más fácil experimentar con diferentes códecs de imágenes y mostrar las capacidades de la Web moderna.
Hoy lanzamos una actualización importante de la app con más compatibilidad con códecs, un nuevo diseño y una nueva forma de usar Squoosh en la línea de comandos, llamada CLI de Squoosh.
Nueva compatibilidad con códecs
Ahora admitimos OxiPNG, MozJPEG, WebP y AVIF, además de códecs compatibles de forma nativa con tu navegador. Se volvió a crear un nuevo códec con el uso de WebAssembly. Mediante la compilación de un codificador y un decodificador de códecs como módulo WebAssembly, los usuarios pueden acceder y experimentar con códecs más nuevos, incluso si su navegador preferido no los admite.
Lanzamiento de una línea de comandos Squoosh
Desde el lanzamiento original en 2018, una solicitud común de los usuarios era interactuar con Squoosh de manera programática sin IU. Sentimos un poco en conflicto con respecto a esta ruta, ya que nuestra app era una IU por encima de las herramientas de códecs basadas en la línea de comandos. Sin embargo, en lugar de usar varias herramientas, entendemos el deseo de interactuar con todo el paquete de códecs. La CLI de Squoosh se encarga de hacerlo.
Puedes instalar la versión beta de la CLI de Squoosh si ejecutas npm i @squoosh/cli o puedes ejecutarla directamente con npx @squoosh/cli [parameters].
La CLI de Squoosh se escribe en Node y utiliza exactamente los mismos módulos de WebAssembly que utiliza la AWP. Mediante un uso extensivo de trabajadores, todas las imágenes se decodifican, procesan y codifican en paralelo.
También usamos Rollup para agrupar todo en un archivo JavaScript y garantizar que la instalación a través de npx sea rápida y sencilla. La CLI también ofrece compresión automática, en la que intenta reducir la calidad de una imagen tanto como sea posible sin degradar la fidelidad visual (mediante la métrica Butteraugli).
Con la CLI de Squoosh, puedes comprimir las imágenes de tu app web en varios formatos y usar el elemento <picture> para permitir que el navegador elija la mejor versión. También planeamos compilar complementos para Webpack, Rollup y otras herramientas de compilación para que la compresión de imágenes sea una parte automática del proceso de compilación.
Cambio del proceso de compilación de Webpack a Rollup
El mismo equipo que creó Squoosh dedicó mucho tiempo a analizar las herramientas de compilación este año para Tooling Report y decidió cambiar nuestro proceso de compilación de Webpack a Rollup.
Inicialmente, el proyecto se inició con Webpack porque queríamos probarlo en equipo y, en ese momento, en 2018, Webpack era la única herramienta que nos daba el control suficiente para prepararlo como queríamos. Con el tiempo, nos dimos cuenta de que el sistema de complementos simple de Rollup y la simplicidad con ESM lo convirtieron en una opción natural para este proyecto.
Diseño de IU actualizado
También actualizamos el diseño de la IU de la app con blobs como elemento visual. Influye un poco en la manera
en que tratamos los datos en nuestro código. Squoosh pasa datos de imagen como un BLOB, por lo que era natural incluir algunos BLOB en el diseño (¿entiendes?).
También se perfeccionó el uso de color, de modo que ese color fuera más que un acento, pero además un vector para distinguir y reforzar qué imagen está en contexto para las opciones. En general, la página principal es un poco más dinámica y la herramienta en sí es más clara y concisa.
¿Qué sigue?
Planeamos seguir trabajando en Squoosh. A medida que se lanza el nuevo formato de imagen, queremos que nuestros usuarios tengan un lugar donde puedan jugar con el códec sin trabajo pesado. También esperamos expandir el uso de la CLI de Squoosh e integrarlo más en el proceso de compilación de una aplicación web.
Squoosh siempre fue de código abierto, pero nunca nos enfocamos en hacer crecer la comunidad. En 2021, planeamos expandir nuestra base de colaboradores y mejorar el proceso de integración del proyecto.
¿Tienes alguna idea para Squoosh? Comunícate con nosotros a través de nuestra herramienta de seguimiento de errores. El equipo se dirige a vacaciones de invierno extendidas, pero prometemos volver a comunicarnos contigo en el nuevo año.