Optimiza imágenes en navegadores con Squoosh y WebAssembly

Empieza con WebP para una foto y OxiPNG para una captura de pantalla con texto. Para un logotipo transparente, prueba WebP sin pérdida y revisa los bordes sobre fondos claros y oscuros. Squoosh⁠ te permite comparar estas opciones en tu navegador y descargar una imagen por separado para tu sitio web.

¿Por qué optimizar imágenes en el navegador?

Squoosh es una aplicación de código abierto de GoogleChromeLabs para comprimir manualmente una imagen por vez. Puedes comparar la textura de una foto o el texto pequeño de una captura de pantalla mientras cambias los ajustes de codificación. No necesitas una cuenta. Según su documentación de privacidad⁠, el procesamiento de imágenes ocurre en tu dispositivo, pero la aplicación usa análisis que incluyen los tamaños de los archivos antes y después. El procesamiento local de imágenes no significa que la página no haga solicitudes de red.

Cómo usar la aplicación web de Squoosh

Usa un navegador de escritorio actualizado y conserva tu archivo original. Estos controles se verificaron en Chrome 151 en Linux con imágenes estáticas convencionales sRGB de 8 bits. Este tutorial no abarca imágenes animadas, HDR ni archivos CMYK orientados a la impresión.

1. Abre squoosh.app⁠ mientras tengas conexión. Arrastra una foto local, una captura de pantalla o un PNG con transparencia, o haz clic en el área de selección de imágenes para elegirlo.
2. Deja el menú Compress de la izquierda en Original Image. En el menú Compress de la derecha, elige un codificador de la tabla siguiente.
3. Deja Resize y Reduce palette desactivados para la primera comparación. El cambio de tamaño modifica las dimensiones, y la reducción de la paleta puede descartar colores independientemente del codificador.
4. Aplica los ajustes iniciales de abajo y espera a que termine la codificación y aparezca el tamaño del resultado. El tamaño mostrado corresponde al resultado codificado; está redondeado, así que usa el tamaño en bytes del archivo guardado para una comparación exacta.
5. Si el aviso de disponibilidad sin conexión cubre los controles de zoom, elige DISMISS. Desplaza el divisor por la imagen. Examínala con un zoom del 100 % y luego amplía el texto pequeño, las texturas finas, los degradados y los bordes transparentes. Aumenta la calidad si la opción de menor tamaño daña detalles que necesitas.
6. Elige el enlace Download de la derecha. La descarga de la izquierda guarda el original. Guarda la imagen candidata con un nombre distinto y abre ese archivo antes de reemplazar un activo del sitio web.

Formatos compatibles y opciones de optimización

Estos son puntos de partida, no garantías de calidad.

JPEG: Elige MozJPEG si necesitas un archivo JPEG. Empieza con Quality: en 75 y compara el archivo guardado con el original. JPEG no puede conservar la transparencia, así que úsalo para imágenes opacas. MozJPEG es el nombre del codificador, no un formato de archivo distinto.

PNG: OxiPNG produce archivos PNG. Su control Effort: cambia el trabajo de compresión, no la calidad de la imagen. Es una buena opción inicial para capturas de pantalla, donde incluso los cambios pequeños pueden difuminar el texto. Un ajuste de esfuerzo más alto requiere más tiempo de codificación; no garantiza un archivo más pequeño.

WebP: Para texto opaco, compara también WebP con Lossless y Slight loss: en 0. Para la transparencia, activa Preserve transparent data. Esa opción conserva los datos RGB ocultos que recibe el codificador; no puede restaurar valores que ya se hayan modificado durante la decodificación del navegador. La implementación de los ajustes de WebP⁠ muestra que aumentar la pérdida leve permite un procesamiento casi sin pérdida incluso con el interruptor de compresión sin pérdida activado.

AVIF: Prueba AVIF para una fotografía opaca, empezando con Lossless desactivado, Quality: en 50 y Effort: en 4. Compara el archivo descargado con tu imagen candidata en WebP. Las escalas de calidad difieren entre codificadores: AVIF en 50 y WebP en 75 no son objetivos de calidad equivalentes.

El menú también contiene JPEG XL (beta). La presencia de un codificador en Squoosh no demuestra que el navegador o visor de imágenes de destino sea compatible con su resultado. Usa los formatos anteriores para este tutorial y revisa la imagen descargada en los navegadores en los que quieras mostrarla.

Comparación de la calidad de imagen antes y después de optimizar

«Visualmente aceptable» y «sin pérdida» responden a preguntas distintas. Una foto con pérdida puede verse aceptable al tamaño en que se muestra y aun así tener píxeles decodificados diferentes. Un códec sin pérdida conserva los píxeles que recibe, pero Squoosh primero dibuja las imágenes decodificadas en un canvas del navegador⁠. Ese paso puede cambiar los valores de color, especialmente en zonas con transparencia parcial. Ni OxiPNG ni el interruptor de compresión sin pérdida de WebP garantizan la conservación exacta de los valores RGBA originales a lo largo de todo el procesamiento de la aplicación.

Para una captura de pantalla, examina los trazos finos y el texto pequeño. Para una foto, examina la textura, los degradados, los cambios de color y los artefactos de compresión. Para un logotipo, examina los bordes transparentes sobre el fondo que realmente usará. La vista previa te ayuda a elegir una imagen candidata; examinar el archivo descargado confirma que guardaste el resultado previsto. Si necesitas píxeles exactos o los metadatos originales, usa un flujo de trabajo nativo y verifica esas propiedades por separado.

Revisa el archivo descargado

Abre la imagen candidata en el navegador o visor de imágenes de destino. Confirma su formato, dimensiones y transparencia, y compara su tamaño real en bytes con el original. Conserva el archivo más pequeño solo si su apariencia y compatibilidad cumplen tus necesidades. Un archivo de origen ya comprimido puede producir un candidato más grande, y volver a codificar un JPEG introduce otra generación con pérdida.

Un hash diferente del archivo comprimido no demuestra una pérdida de calidad. A la inversa, unas dimensiones coincidentes y una vista previa que funciona no demuestran que los píxeles sean idénticos. La ausencia estricta de pérdida requiere comparar los píxeles decodificados con la misma interpretación del color y del canal alfa, incluidos los colores ocultos en píxeles totalmente transparentes; la inspección visual no puede demostrar esa igualdad.

Prepara una sesión sin conexión

Squoosh almacena en caché los recursos de la aplicación y de los códecs mediante un service worker⁠. Haz los preparativos en el mismo perfil de navegador que usarás sin conexión:

1. En tu primera visita, espera a que aparezca Ready to work offline. Mientras tengas conexión, abre una imagen local y completa una codificación y una descarga con cada códec que planees usar. El mensaje inicial por sí solo no confirma que esos códecs estén disponibles.
2. Desconéctate de la red y vuelve a cargar la misma pestaña. Elige otra imagen local, repite los ajustes previstos y revisa el archivo recién descargado. Esto prueba una carga nueva, en lugar de un códec que aún esté en la memoria.
3. Si la codificación o la recarga falla, vuelve a conectarte, recarga Squoosh mientras tengas conexión y repite la codificación y la descarga. Luego vuelve a probar sin conexión. Usa solo un códec que pase tu prueba sin conexión, o mantén la conexión para esa conversión.

En la configuración de Chrome probada, WebP completó este proceso de recarga y descarga sin conexión. OxiPNG falló después de la recarga pese a haber completado correctamente los preparativos con conexión. No supongas que todos los codificadores del menú están disponibles sin conexión. Conserva los datos almacenados del sitio; si los borras o el navegador elimina la caché, tendrás que repetir los preparativos y las pruebas.

Limitaciones de la optimización en el navegador con Squoosh

La interfaz web procesa una imagen por vez. Las imágenes grandes y los ajustes de esfuerzo altos pueden consumir mucha memoria y CPU, así que empieza con una imagen de tamaño moderado y reduce el esfuerzo si la codificación se atasca. Si un códec falla, vuelve a conectarte para cargar sus recursos y prueba otro codificador. Conserva el archivo de origen en lugar de usar una descarga parcial o sin verificar.

Cómo mejora WebAssembly la optimización de imágenes en Squoosh

Los proyectos de códecs de Squoosh⁠ generan código de enlace en JavaScript y módulos WebAssembly para códecs como MozJPEG y WebP. Esto permite que la aplicación ejecute esos codificadores localmente. No necesitas escribir WebAssembly ni instalar las herramientas de compilación de los códecs para usar la interfaz. La velocidad de codificación sigue dependiendo de la imagen, los ajustes y el dispositivo.

Alternativas para la optimización de imágenes

Para un procesamiento de PNG reproducible, el tutorial de Oxipng nativo explica cómo generar archivos de salida separados y ajustar la conservación de los píxeles. Para procesar archivos subidos en una aplicación, consulta el Robot 🤖 /image/optimize de Transloadit y la API de procesamiento de imágenes.