Nueva compatibilidad con códecs, diseño actualizado y compatibilidad con 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 sea más fácil experimentar con diferentes códecs de imagen y para mostrar las capacidades de la Web moderna.
Hoy lanzaremos 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 tu 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 en tu navegador. Un nuevo códec fue posible nuevamente con el uso de WebAssembly. Mediante la compilación de un codificador y decodificador de códecs como un módulo de WebAssembly, los usuarios pueden acceder y experimentar con códecs más nuevos, incluso si su navegador preferido no los admite.
Lanzando un Squoosh de línea de comandos.
Desde el lanzamiento original en 2018, la solicitud común de los usuarios era interactuar con Squoosh de manera programática sin una IU. Tuvimos un poco de conflicto con esta ruta, ya que nuestra app era una IU basada en herramientas de códecs basadas en líneas de comandos. Sin embargo, entendemos el deseo de interactuar con todo el paquete de códecs en lugar de con varias herramientas. La CLI de Squoosh hace precisamente eso.
Puedes instalar la versión beta de la CLI de Squoosh mediante la ejecución de npm i @squoosh/cli o directamente con npx @squoosh/cli [parameters].
La CLI de Squoosh está escrita en Node y usa exactamente los mismos módulos de WebAssembly que usa la AWP. A través del uso extensivo de los trabajadores, todas las imágenes se decodifican, procesan y codifican en paralelo.
También usamos Rollup para agrupar todo en un archivo JavaScript para garantizar que la instalación a través de
npx sea rápida y fluida. 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 con el objetivo de hacer que la compresión de imágenes
sea una parte automática de tu proceso de compilación.
Cambio en el proceso de compilación de Webpack a Rollup
El mismo equipo que creó Squoosh dedicó una gran cantidad de tiempo a compilar herramientas este año para el informe de herramientas y decidió cambiar nuestro proceso de compilación de Webpack a Rollup.
El proyecto comenzó inicialmente con Webpack porque queríamos probarlo en equipo y, en 2018, Webpack era la única herramienta que nos dio el control suficiente para configurar el proyecto como queríamos. Con el tiempo, descubrimos que el sencillo sistema de complementos de Rollup y su simplicidad con ESM lo convirtieron en una elecció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. Es un poco complicado
en cómo tratamos los datos en nuestro código. Squoosh pasa los datos de imágenes como un BLOB, por lo que se siente natural incluir algunos BLOB en el diseño.
También se perfeccionó el uso del color, de modo que el color era 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 de inicio es un poco más vibrante y la herramienta en sí es un poco 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 jugar con el códec. 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 desarrollar la comunidad. En 2021, planeamos expandir nuestra base de colaboradores y mejorar el proceso de integración al proyecto.
¿Se te ocurre alguna idea para Squoosh? Comunícate con nosotros a través de nuestra herramienta de seguimiento de errores. El equipo se prepara para unas vacaciones prolongadas de invierno, pero prometemos contactarte el año nuevo.