Optimiza imágenes en navegadores con Squoosh y WebAssembly

Optimizar las imágenes es fundamental para el rendimiento web, ya que afecta directamente a los tiempos de carga, la experiencia de usuario y el posicionamiento SEO. Tradicionalmente, la optimización de imágenes requería software de escritorio o procesamiento del lado del servidor. Sin embargo, las herramientas modernas basadas en el navegador que aprovechan WebAssembly ya permiten optimizar de forma eficiente directamente en tu navegador.

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

La optimización en el navegador ofrece varias ventajas:

• Retroalimentación inmediata: previsualiza al instante las imágenes optimizadas y los ajustes de calidad.
• Sin instalar software: es accesible desde cualquier dispositivo con un navegador web moderno.
• Privacidad: las imágenes se procesan localmente en tu dispositivo y nunca se suben a servidores externos.
• Comodidad: optimiza imágenes al vuelo sin interrumpir tu flujo de trabajo con configuraciones complejas.

¿Qué es Squoosh?

Squoosh⁠ es una app web de optimización de imágenes de código abierto que funciona en el navegador y fue desarrollada por el equipo de Google Chrome Labs. Aprovecha WebAssembly para ejecutar potentes algoritmos de compresión de imágenes directamente en tu navegador y ofrece una interfaz sencilla para tareas complejas sin necesidad de subir nada a un servidor. Ten en cuenta que, aunque Squoosh también tuvo una herramienta de interfaz de línea de comandos (CLI), esa CLI ya no recibe mantenimiento activo desde principios de 2023. Esta publicación se centra en la aplicación web.

Funciones clave de la app web de Squoosh:

• Ofrece codificadores JPEG, PNG, WebP, AVIF y JPEG XL experimental. MozJPEG genera archivos JPEG; OxiPNG optimiza archivos PNG. Son codificadores, no formatos de imagen adicionales.
• Vista previa en tiempo real con un control deslizante de comparación lado a lado
• Ajustes de compresión configurables con retroalimentación visual instantánea
• Puede funcionar sin conexión una vez que la app y los recursos de códecs necesarios se han almacenado en caché
• No requiere cuenta ni registro

Cómo usar la app web de Squoosh

Así puedes optimizar imágenes directamente en tu navegador con Squoosh:

1. Visita squoosh.app⁠ en tu navegador web.
2. Arrastra y suelta tu imagen sobre la interfaz o haz clic para seleccionar un archivo.
3. A la izquierda ves la imagen original; a la derecha, la versión procesada.
4. Selecciona el formato de salida que quieras (por ejemplo, WebP, AVIF, MozJPEG) en el menú desplegable del panel derecho.
5. Ajusta la configuración de calidad (como el control deslizante de calidad o las opciones específicas de cada formato) para equilibrar el tamaño del archivo y la calidad visual. El tamaño estimado del archivo se actualiza en tiempo real.
6. Usa el control deslizante de comparación superpuesto a la imagen para evaluar de cerca las diferencias de calidad. Acerca la imagen para inspeccionarla en detalle.
7. Cuando estés conforme, haz clic en el botón de descarga de la esquina inferior derecha para guardar tu imagen optimizada.

Formatos compatibles y opciones de optimización

Squoosh admite varios formatos de imagen, cada uno con opciones de optimización específicas:

Optimización de JPEG (con MozJPEG)

• Control deslizante de calidad (0-100)
• Opciones avanzadas como el submuestreo de crominancia y el renderizado progresivo

Optimización de PNG (con OxiPNG)

• Control deslizante de esfuerzo (controla el nivel de compresión)
• La reducción de paleta, que es una opción aparte, puede reducir aún más el tamaño pero puede descartar colores; déjala desactivada cuando necesites conservar los píxeles sin pérdida.

Optimización de WebP

• Control deslizante de calidad
• Opción sin pérdida
• Control deslizante de esfuerzo (controla la velocidad de codificación frente a la compresión)
• Ajustes de calidad alfa para la transparencia

Optimización de AVIF

• Control deslizante de calidad
• Control deslizante de esfuerzo
• Opciones de espacio de color (como YUV 4:2:0, YUV 4:4:4)
• Ajustes avanzados de codificación

Optimización de JPEG XL (experimental)

• Control deslizante de calidad
• Control deslizante de esfuerzo/velocidad
• Nivel de velocidad de decodificación

Comparar la calidad de imagen antes y después de la optimización

Squoosh ofrece un control deslizante interactivo que se superpone a la imagen y te permite comparar directamente lado a lado la versión original y la optimizada. Esta comparación visual es esencial para encontrar el equilibrio óptimo entre la reducción del tamaño del archivo y una calidad visual aceptable para tu caso de uso específico.

Cuando optimices imágenes, presta mucha atención a:

• Legibilidad del texto: asegúrate de que el texto siga siendo nítido y legible.
• Precisión del color: revisa si hay cambios de color significativos.
• Nitidez de los bordes: busca desenfoque o artefactos alrededor de los bordes.
• Detalles de la textura: asegúrate de que se conserven las texturas importantes.
• Artefactos de compresión: vigila la aparición de bloques (JPEG/AVIF) o bandas (degradados).

Resultados de optimización en el mundo real

Los resultados de la optimización varían mucho según el contenido de la imagen original, el formato elegido y los ajustes de calidad seleccionados. Aun así, a menudo es posible lograr reducciones considerables del tamaño de archivo:

• Fotografías: convertirlas a WebP o AVIF con ajustes visualmente sin pérdida suele producir reducciones de tamaño sustanciales en comparación con JPEG.
• Capturas de pantalla con texto: la optimización de PNG (como OxiPNG) o la conversión a WebP sin pérdida puede reducir el tamaño del archivo manteniendo una claridad perfecta.
• Ilustraciones y gráficos: según la complejidad, formatos como PNG optimizado, WebP o incluso AVIF pueden ofrecer una buena compresión.

Estas reducciones pueden mejorar notablemente los tiempos de carga de la página, reducir el consumo de ancho de banda y mejorar la experiencia de usuario, sobre todo en dispositivos móviles o conexiones más lentas.

Limitaciones de la optimización en el navegador con Squoosh

Aunque la app web de Squoosh es potente y práctica, tiene algunas limitaciones:

• Proceso manual: está diseñada para optimizar imágenes de una en una; la interfaz web no incluye procesamiento por lotes.
• Sin automatización: no se puede integrar fácilmente en pipelines de compilación automatizados ni en flujos de trabajo del lado del servidor. Es una herramienta independiente, no una biblioteca.
• Uso de recursos del navegador: optimizar imágenes muy grandes o usar ajustes de esfuerzo alto puede consumir muchos recursos y ralentizar tu navegador, o incluso hacer que deje de responder en dispositivos menos potentes.
• Compatibilidad con navegadores: aunque funciona en los navegadores modernos, el rendimiento y la compatibilidad con ciertas funciones pueden variar ligeramente entre distintos navegadores web y versiones.

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

WebAssembly (Wasm) es un formato de instrucciones binarias que permite ejecutar con alto rendimiento, directamente en los navegadores web, código escrito originalmente en lenguajes como C++ o Rust. Squoosh utiliza WebAssembly para ejecutar de forma eficiente en el navegador códecs de imagen sofisticados (como MozJPEG, OxiPNG o los codificadores AVIF).

Beneficios clave de usar WebAssembly en Squoosh:

• Velocidad casi nativa: los algoritmos de compresión se ejecutan mucho más rápido que las implementaciones equivalentes en JavaScript, lo que hace que la herramienta responda con agilidad.
• Acceso a códecs potentes: permite usar códecs complejos y de alto costo computacional en el lado del cliente.
• Consistencia entre plataformas: el mismo código Wasm se ejecuta en distintos navegadores compatibles con el estándar.
• Seguridad: WebAssembly se ejecuta dentro del entorno aislado de seguridad del navegador.

Es importante entender que Squoosh usa WebAssembly internamente para impulsar sus funciones; no ofrece una biblioteca ni un mecanismo para que integres directamente estos códecs basados en Wasm en tus propias aplicaciones web.

Enfoques alternativos para optimizar imágenes

Según tus necesidades y tu flujo de trabajo, puedes considerar estas alternativas a la optimización manual en el navegador:

Aplicaciones de escritorio

• ImageOptim (macOS): herramienta gratuita y de código abierto centrada en la optimización sin pérdida y en la eliminación de metadatos. Buena para el procesamiento por lotes.
• FileOptimizer (Windows): herramienta gratuita compatible con varios tipos de archivo, incluidas las imágenes, con múltiples complementos de optimización.
• GIMP / Photoshop: estos editores de imágenes completos ofrecen la opción «Guardar para web» o de exportación con controles de calidad.

Herramientas de línea de comandos

• Sharp: una biblioteca de procesamiento de imágenes de alto rendimiento para Node.js, excelente para integrarla en scripts de compilación o servicios de back-end.
• ImageMagick: un conjunto de herramientas de código abierto versátil y potente para procesar y convertir imágenes desde la línea de comandos.
• CLI de códecs independientes: herramientas como cjpeg (MozJPEG), pngquant o avifenc ofrecen un control detallado para formatos específicos.

Soluciones y servicios del lado del servidor

• Pipelines de compilación automatizados: integra herramientas de CLI (como Sharp o ImageMagick) en tu proceso de CI/CD para optimizar las imágenes automáticamente al desplegar.
• Optimización basada en CDN: muchas redes de distribución de contenido (CDN, por sus siglas en inglés) ofrecen funciones para optimizar imágenes automáticamente al vuelo según el dispositivo que hace la solicitud o las capacidades del navegador.
• Servicios especializados: servicios en la nube dedicados al procesamiento y la entrega de imágenes.

Casos de uso prácticos de Squoosh

La app web de Squoosh resulta especialmente útil para:

• Creadores de contenido y blogueros: optimizar imágenes rápidamente antes de subirlas a sitios web o redes sociales.
• Desarrolladores web: experimentar con distintos formatos (como AVIF frente a WebP) y ajustes de calidad durante el desarrollo o para tareas puntuales rápidas.
• Diseñadores: preparar recursos web optimizados y previsualizar visualmente el impacto de los ajustes de compresión.
• Dueños de pequeñas empresas: optimizar fácilmente las imágenes de su sitio web sin necesidad de conocimientos técnicos ni de instalar software.
• Cualquiera que necesite una optimización rápida y privada: cuando necesitas optimizar unas pocas imágenes sin subirlas a ningún sitio.

Conclusión

La optimización de imágenes en el navegador con Squoosh ofrece una solución potente, accesible y respetuosa con la privacidad para desarrolladores, diseñadores y creadores de contenido que buscan mejorar el rendimiento web. Gracias a WebAssembly, Squoosh lleva la compresión de imágenes de alto rendimiento directamente al navegador y te permite reducir mucho el tamaño de los archivos, a menudo sin comprometer la calidad visual. Aunque encaja mejor en tareas de optimización manual, su facilidad de uso y su retroalimentación inmediata la convierten en una herramienta valiosísima para mejorar los tiempos de carga y la experiencia de usuario de un sitio web.

Si tu flujo de trabajo requiere optimización de imágenes automatizada del lado del servidor, procesamiento por lotes o integración en aplicaciones, considera un servicio dedicado. El Robot 🤖 /image/optimize de Transloadit, que forma parte de nuestra completa API de procesamiento de imágenes, ofrece una compresión de imágenes eficiente y de alta calidad que se puede integrar fácilmente en tu infraestructura existente para lograr una optimización automatizada y sin fricciones a escala.