Comprimir imágenes _

Cómo funciona la compresión de imágenes en el navegador

Cada pasada de compresión corre enteramente en JavaScript. No se descarga ninguna librería de códecs y no hay ningún servidor implicado. La propia Canvas API del navegador decodifica la imagen, la recodifica a menor calidad y te entrega un Blob que la página puede previsualizar, descargar o comprimir en ZIP. Como cada paso permanece en el sandbox de la pestaña, los archivos originales nunca tocan la red.

1. Lee cada archivo subido como Blob y crea una URL de objeto para que el navegador pueda decodificarlo de forma local, sin copiar bytes a un servidor ni escribirlos en disco.
2. Dibuja la imagen decodificada en un elemento Canvas fuera de pantalla, con sus dimensiones de píxeles originales, lista para recodificarse.
3. Llama a canvas.toBlob(callback, mimeType, quality) para recodificar los píxeles. En el modo calidad el valor del deslizador se mapea directamente al parámetro de cuantización del codificador; en el modo tamaño objetivo, la página bisecta el valor de calidad hasta que el blob de salida cabe por debajo del presupuesto en bytes.
4. Muestra un resumen antes/después con el tamaño original, el tamaño comprimido y el porcentaje de ahorro, y ofrece una descarga por imagen o un ZIP único para todo el lote. El ZIP se construye en memoria con fflate, una librería de 8 KB que se carga la primera vez que se usa.

¿Por qué comprimir imágenes?

• Las imágenes más pequeñas cargan más rápido. Reducir una imagen hero de 4 MB a 600 KB mejora directamente el Largest Contentful Paint, uno de los Core Web Vitals que Google usa para el ranking. En una página con varias fotos, el ahorro se acumula y resulta en un primer pintado más veloz.
• Los límites de subida están en todas partes. Muchas plataformas CMS, herramientas de tickets y sistemas de correo rechazan archivos de más de 1 o 2 MB. Una pasada rápida de compresión deja la foto por debajo del límite sin necesidad de abrir un editor completo.
• El ancho de banda y el almacenamiento cuestan dinero a escala. Enviar WebP a calidad 0.8 en lugar de PNG a tamaño completo puede recortar la carga de imágenes en un tercio o más, lo que reduce las facturas de egreso CDN y el consumo de datos móviles de tus visitantes.
• La privacidad importa con imágenes sensibles. Como todo corre en tu navegador, los escaneos de documentos, las imágenes médicas y las capturas internas se quedan en tu dispositivo — no hay subida a un servidor de terceros como TinyPNG de la que preocuparse.

Aplicaciones habituales

La compresión aparece siempre que una imagen es más grande que el lugar al que va. Tres patrones que vemos una y otra vez.

• Preparar fotos de productos para una tienda online. Los originales JPEG se comprimen a calidad 0.8 (o un objetivo de 200 KB) para que la tienda cargue rápido y supere Core Web Vitals en móvil.
• Reducir capturas de pantalla antes de adjuntarlas a un bug tracker o wiki. Un lote de PNG convertidos a JPEG a calidad 0.85 suele pasar de decenas de megabytes a un par.
• Conseguir que una foto cumpla un límite de subida — un portal de empleo que rechaza archivos de más de 1 MB, un sistema de correo con un límite ajustado de adjuntos, o un avatar de foro que tiene que encajar en un presupuesto de bytes.

Un ejemplo práctico: JPEG de 4 MB a 400 KB

Un JPEG de 4 MB recién sacado de la cámara de un móvil es una carga habitual que hace saltar límites de subida y ralentiza páginas. Es un buen banco de pruebas para ver lo que ahorra la compresión.

Suelta el JPEG en la zona de carga, deja el formato en JPEG, y o bien arrastra el deslizador de calidad hasta 0.7 o cambia al modo de tamaño objetivo y escribe 400 KB. En modo calidad, el pipeline Canvas recodifica una vez y muestra el resultado, normalmente entre 500 y 700 KB según la foto. En modo tamaño objetivo, la página prueba varios valores de calidad, se queda con el más alto que aún cabe por debajo de 400 KB y muestra el porcentaje de ahorro. Haz clic en Descargar en la tarjeta para obtener el archivo individual, o en Descargar .zip si comprimiste varias imágenes a la vez. Todo el proceso tarda bien menos de un segundo para una imagen de este tamaño y no consume ancho de banda una vez que la página ya ha cargado.

¿Cuál es la diferencia entre el modo calidad y el modo tamaño objetivo?

El modo calidad te da un único deslizador de 0.1 a 1.0 que se mapea al parámetro de cuantización del codificador JPEG o WebP — valores más bajos producen archivos más pequeños con más artefactos visibles. El modo tamaño objetivo invierte el problema: dices un tamaño en kilobytes y la página bisecta el valor de calidad, codificando varias veces hasta encontrar la mayor calidad que todavía cabe en tu presupuesto. El modo tamaño objetivo es práctico cuando hay un límite duro (un tope de subida de 1 MB, por ejemplo); el modo calidad es más rápido y mejor cuando simplemente quieres un resultado visual predecible. PNG es sin pérdidas, así que ninguno de los dos modos le aplica.

¿Esto ocurre en mi dispositivo?

Sí, completamente. La página usa la Canvas API nativa del navegador y la Web File API para decodificar y recodificar cada imagen en memoria. No se envía ningún dato de imagen a un servidor, no hay subida temporal y no hay ninguna ida y vuelta a la nube. Puedes comprobarlo tú mismo: abre las DevTools, ve al panel Network y ejecuta una compresión. Las únicas solicitudes salientes que verás son la carga inicial de la página y las llamadas de anuncios. Nada en forma de imagen sale de la pestaña.

¿Por qué comprimir un PNG a veces apenas lo encoge?

PNG es un formato sin pérdidas, así que la Canvas API no puede descartar detalle para hacerlo más pequeño — solo puede reempaquetar los mismos píxeles. Para fotografías, un PNG ya es grande y la recodificación sin pérdidas ahorra poco. El verdadero beneficio viene de cambiar el formato de salida a JPEG o WebP, que usan compresión con pérdidas adecuada para fotos y suelen quedar entre 4 y 10 veces más pequeños. Usa PNG solo cuando necesites calidad sin pérdidas o transparencia; de lo contrario, elige JPEG para fotos o WebP para el mejor equilibrio tamaño-calidad.

¿Qué formato debo elegir?

Para fotografías, WebP a calidad 0.8 ofrece el mejor equilibrio tamaño-calidad y es compatible con todos los navegadores lanzados desde 2021; JPEG es la alternativa universal segura cuando el destino es más antiguo o estricto. Elige PNG solo cuando necesites calidad sin pérdidas o canal alfa — dibujos lineales, capturas de pantalla de UI, logos con transparencia. Si optimizas para velocidad de página y tu audiencia usa navegadores modernos, WebP es casi siempre la mejor opción; si alimentas un CMS antiguo o un pipeline de impresión que rechaza WebP, quédate con JPEG.

Suelta tus imágenes, elige un nivel de calidad o un tamaño objetivo, comprime. Todo corre en tu pestaña. Sin subidas, sin cuenta, sin esperar una cola de servidor.