Nueva compatibilidad con 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 presentó en la Chrome Dev Summit 2018. La creamos para que fuera 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 Squoosh CLI.
Nueva compatibilidad con códecs
Ahora admitimos OxiPNG, MozJPEG, WebP y AVIF, además de los códecs compatibles de forma nativa en tu navegador. Se volvió a habilitar un nuevo códec con el uso de WebAssembly. Al compilar un codificador y decodificador de códecs como módulo de WebAssembly, los usuarios pueden acceder a códecs más nuevos y experimentar con ellos, incluso si su navegador preferido no los admite.
Lanzamiento de Squoosh en la línea de comandos
Desde el lanzamiento original en 2018, la solicitud común de los usuarios era interactuar con Squoosh de forma programática sin la IU. Nos sentimos un poco en conflicto con esta ruta, ya que nuestra app era una IU sobre herramientas de códecs basadas en la línea de comandos. Sin embargo, entendemos el deseo de interactuar con el paquete completo de códecs en lugar de varias herramientas. Eso es exactamente lo que hace Squoosh CLI.
Para instalar la versión beta de Squoosh CLI, ejecuta npm i @squoosh/cli o ejecútala
directamente con npx @squoosh/cli [parameters].
Squoosh CLI está escrito en Node y usa los mismos módulos de WebAssembly que usa la PWA. Gracias al 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 de JavaScript para asegurarnos de que la instalación a través de
npx sea rápida y sin problemas. La CLI también ofrece compresión automática, en la que intenta reducir la
calidad de una imagen lo más posible sin degradar la fidelidad visual
(con la métrica Butteraugli).
Con Squoosh CLI, puedes comprimir las imágenes de tu app web en varios formatos y usar el
<picture> elemento
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 de tu proceso de compilación.
Cambio del proceso de compilación de Webpack a Rollup
El mismo equipo que creó Squoosh dedicó una cantidad significativa de tiempo a analizar las herramientas de compilación este año para el Informe de herramientas y decidió cambiar nuestro proceso de compilación de Webpack a Rollup.
El proyecto se inició con Webpack porque queríamos probarlo como equipo y, en ese momento, en 2018, Webpack era la única herramienta que nos brindaba suficiente control para configurar el proyecto de la manera que queríamos. Con el tiempo, descubrimos que el sistema de complementos fácil 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. Es un pequeño
juego de palabras sobre cómo tratamos los datos en nuestro código. Squoosh pasa los datos de la imagen como un blob, por lo que parecía
natural incluir algunos blobs en el diseño (¿entiendes?).
También se perfeccionó el uso del color, de modo que el color era más que un acento, sino también 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 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 lance el nuevo formato de imagen, queremos que nuestros usuarios tengan un lugar donde puedan jugar con el códec sin mucho esfuerzo. También esperamos expandir el uso de Squoosh CLI e integrar 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 tener un mejor proceso de incorporación al proyecto.
¿Tienes alguna idea para Squoosh? Comunícate con nosotros en nuestro seguimiento de errores. El equipo se tomará unas vacaciones de invierno extendidas, pero prometemos comunicarnos contigo el próximo año.