Cómo comprimir imágenes sin perder calidad

Los archivos de imagen grandes ralentizan los sitios web, atascan las bandejas de correo y se comen el almacenamiento. Comprimirlos es una de las maneras más simples de acelerar las cosas, y puedes hacerlo sin instalar ningún software, sin subir nada a un servidor, y normalmente sin pérdida de calidad visible. Los ajustes correctos pueden quitarle 80 % al tamaño de una foto manteniéndola idéntica a distancia normal de visualización.

Breve historia de la compresión de imagen

La compresión como idea digital es anterior a la web. La codificación por longitud de carrera en los primeros formatos de mapa de bits (TIFF en 1986, PCX antes) reducía colores repetidos a un contador más un valor, encogiendo dramáticamente las capturas y los gráficos simples. El estándar JPEG de 1992 llevó la compresión con pérdida al gran público usando la transformada de coseno discreta (DCT) para descartar información que el sistema visual humano no puede percibir fácilmente, una idea que aún propulsa la mayor parte de la compresión fotográfica tres décadas después.

PNG llegó en 1996 con compresión sin pérdida basada en DEFLATE, ideal para capturas y logotipos que JPEG estropea. WebP (Google, 2010) añadió un modo con pérdida más inteligente que vence a JPEG en un 25-35 % y un modo sin pérdida que vence a PNG en un 20-30 %. AVIF (2019) baja otro gran escalón, a menudo la mitad del tamaño de WebP a la misma calidad. JPEG XL (2021) es el último contendiente, apuntando a reemplazarlos a todos con un formato único que hace sin pérdida, con pérdida, animación, e incluso recomprime JPEG antiguos en ida y vuelta sin pérdida adicional. La adopción de navegador es el factor limitante; los algoritmos en sí están muy por delante de JPEG en eficiencia.

Por qué importa el tamaño de archivo de imagen

Cada imagen en una página web tiene que descargarse en el navegador del visitante. Una sola foto sin comprimir de la cámara del móvil puede ser 5-10 MB. Multiplica por varias imágenes y tu página tarda visiblemente más en cargar en una conexión rápida, y minutos en una lenta. Imágenes más pequeñas significan:

• Cargas de página más rápidas: los visitantes ven tu contenido antes. Las Core Web Vitals de Google (LCP, Largest Contentful Paint) suelen estar dominadas por la imagen hero; reducirla a la mitad suele reducir el tiempo de LCP a la mitad.
• Menor uso de ancho de banda: importante para usuarios móviles con tarifas limitadas, y para tu propia factura de hosting si sirves mucho tráfico.
• Compartir más fácil: los adjuntos de correo se mantienen bajo los límites de tamaño (Gmail tope en 25 MB), y las apps de chat dejan de transcodificar tus fotos a tus espaldas.
• Más espacio de almacenamiento: tu móvil, drive en la nube o servidor guarda más archivos. Un viaje de 5 000 fotos se vuelve 1 GB en vez de 5 GB.
• Mejor SEO: las señales de velocidad de página cuentan en el ranking de Google, así que una página cargada de imágenes que carga rápido supera a una idéntica que va lenta.

Cómo funciona la compresión de imagen

Hay dos tipos de compresión, cada uno con sus propios compromisos.

La compresión con pérdida (JPEG, WebP, AVIF) elimina datos de imagen que tu ojo probablemente no notará. A niveles moderados de calidad (alrededor del 60-80 %), el resultado se ve virtualmente idéntico al original pero puede ser 50-80 % más pequeño. El algoritmo trabaja en tres pasos: convertir RGB a YCbCr (separando brillo de color), submuestrear los canales de color (tu ojo es mucho menos sensible al detalle de color que al brillo) y aplicar la DCT para descartar detalle de alta frecuencia. Cada paso no cuesta nada en calidad percibida pero ahorra cantidades enormes de datos.

La compresión sin pérdida (PNG, FLAC para audio) reorganiza los datos para ocupar menos espacio sin quitar nada. La imagen es píxel-perfecta idéntica al original, pero el ahorro de tamaño es menor, típicamente 10-30 % para fotos y 30-60 % para capturas y logotipos.

Los formatos mixtos (WebP, AVIF, JPEG XL) te dejan elegir con o sin pérdida por archivo. La mayoría de pipelines de foto modernos usan con pérdida para la entrega y guardan un máster sin pérdida para archivar.

Cómo comprimir imágenes en línea

1. Sube tus imágenes: arrastra y suelta una o varias imágenes (JPEG, PNG, WebP, AVIF, HEIC, GIF, BMP, hasta 50 MB cada una) en la herramienta, o haz clic para navegar tus archivos. Todo se procesa localmente; nada se sube.
2. Ajusta los parámetros de calidad: usa el control de calidad para controlar el nivel de compresión. Valores más bajos significan archivos más pequeños con más compresión. También puedes fijar un ancho máximo, cambiar el formato de salida o apuntar a un tamaño de archivo objetivo.
3. Previsualiza el resultado: la mayoría de herramientas muestran miniaturas antes-y-después con el nuevo tamaño. Ajusta la calidad hasta que el trade-off encaje en tu caso de uso.
4. Descarga los resultados: descarga imágenes comprimidas individualmente o haz clic en "Descargar todo" para un ZIP del lote.

Entre bambalinas, el archivo se lee vía FileReader, se decodifica con el pipeline de imagen del navegador, se dibuja en un canvas fuera de pantalla, y se re-codifica a la calidad objetivo vía canvas.toBlob. Las versiones WebAssembly de los codificadores WebP, AVIF y MozJPEG dan rendimiento de compresión casi nativo sin salir de la página.

Ajustes de calidad que funcionan de verdad

No hay una calidad "correcta" universal. La tabla siguiente es un punto de partida; ajusta a partir de ahí según el aspecto real de tus imágenes.

Consejos para obtener los mejores resultados

• Empieza en calidad 80 para fotos, 90 para capturas, son los puntos en los que la mayoría no distingue el resultado del original. Baja más si quieres archivos más pequeños; sube si la imagen tiene detalle fino o texto.
• Usa WebP cuando puedas, el soporte de WebP supera el 97 % de los navegadores en 2024. Para los pocos que no lo tienen, sirve un fallback JPEG con el elemento picture. AVIF ahorra aún más, pero verifica que el codificador sea lo bastante rápido.
• Redimensiona antes de comprimir, una foto de 4000px mostrada a 800px en un sitio web desperdicia ancho de banda independientemente de la calidad. Redimensiona al mayor tamaño que realmente vayas a mostrar (a menudo 2x el ancho en píxeles CSS para pantallas retina), luego comprime.
• Conserva tus originales, comprime siempre una copia, no el archivo original. Siempre puedes recomprimir desde el original, pero nunca puedes restaurar datos perdidos por compresión.
• Elimina metadatos al compartir públicamente, los datos EXIF pueden incluir coordenadas GPS, modelo de cámara, incluso tu nombre. Los compresores de navegador suelen retirarlos automáticamente; comprueba si la privacidad importa.
• Fija un tamaño de archivo objetivo para correos, los adjuntos de Gmail topan en 25 MB, muchos sistemas corporativos en 10 MB. Apunta a 1-2 MB por imagen por seguridad.
• Elige JPEG progresivo para la web, los JPEG progresivos cargan en pasadas de arriba abajo, mostrando una vista previa borrosa antes de afinarse. Los decodificadores modernos los manejan bien y suelen comprimir un poco más pequeño que el baseline.
• Evita recomprimir la misma imagen una y otra vez, cada pasada añade artefactos. Si puedes querer reeditar, conserva un máster sin pérdida y reexporta desde él cada vez.

Qué formato usar

Para contenido nuevo en 2024, la mejor práctica es servir AVIF donde está soportado, WebP como fallback moderno universal, y JPEG o PNG como último recurso. El elemento picture maneja esto limpiamente en HTML.

Errores comunes

• Comprimir imágenes ya comprimidas, volver a guardar un JPEG a calidad 80 no duplica el ahorro; solo añade otra ronda de artefactos. Comprime desde el original (o un máster sin pérdida) una vez.
• Formato equivocado para el contenido, comprimir un logo con texto en JPEG produce ringing visible alrededor de las letras. Guardar una foto 4000x3000 como PNG te da un archivo de 30 MB. Empareja el formato al contenido.
• El control de calidad se siente muy agresivo a 90, la escala de calidad JPEG no es lineal. Pasar de 90 a 80 ahorra mucho más que de 100 a 90, con casi ningún coste visible.
• Olvidar las pantallas retina, una imagen 600px mostrada en una ranura CSS de 600px luce blanda en móviles y laptops modernos. Exporta a 2x los píxeles CSS y deja que el navegador la reduzca.
• Eliminar el perfil de color, soltar el perfil ICC embebido puede desplazar colores visiblemente en pantallas de gamut amplio. Los compresores modernos lo preservan; los antiguos quizá no.
• Guardar cada PNG con la misma profundidad de bits, una captura de texto en blanco y negro cabe en PNG-8 (256 colores) a una fracción del tamaño de PNG-24. Usa un cuantizador como pngquant para grandes ahorros en gráficos.
• Recodificar a un formato peor, convertir WebP a JPEG pierde tanto la calidad como la ventaja de tamaño. Si necesitas un fallback JPEG, codifica desde el máster original, no desde el WebP.
• Confiar en la diferencia visual en tamaño pequeño, un artefacto invisible en la miniatura es obvio en una pantalla 4K cuando alguien hace zoom. Prueba al tamaño real de visualización.
• Olvidar el canal alfa, JPEG no soporta transparencia. Comprimir un PNG transparente a JPEG llena el fondo de blanco (o lo que elija la herramienta).
• Animación como GIF, los GIF son más grandes y de peor calidad que MP4 o WebP animado. Para entrega moderna, casi siempre conviértelos.

Herramientas y bibliotecas alternativas

Un compresor web es el camino más rápido para una o pocas imágenes. Para lotes o pipelines scripteados, las herramientas de línea de comandos y bibliotecas toman el relevo.

Para automatizar un pipeline de fotos de producto, sharp + MozJPEG + AVIF da la mejor relación velocidad/calidad en 2024. Para subidas puntuales, la herramienta de navegador gana en comodidad y privacidad.

Privacidad y el compresor

El compresor de imágenes corre enteramente en tu navegador. El archivo que seleccionas se lee con la API FileReader, se decodifica con el pipeline de imagen del navegador, se dibuja en un canvas fuera de pantalla, y se re-codifica vía canvas.toBlob. Nada se sube, nada se registra, nada se comparte. Para material sensible, capturas de paneles internos, escaneos de DNI, borradores de contratos como pruebas en imagen, ese flujo solo-local es la diferencia entre confiar en el servidor de un extraño y no confiar en nadie. Incluso las fotos comunes a menudo llevan metadatos EXIF (coordenadas GPS, número de serie del dispositivo, marca de tiempo) que quizá no quieras que vea un tercero; el pipeline basado en Canvas elimina la mayoría de EXIF por defecto, y la falta de subida significa que esos datos nunca salen de la página de todas formas. Para una tarea tan rutinaria como hacer una foto más pequeña, el ajuste de privacidad por defecto debería ser: nada sale de la página, nada se almacena, nada se comparte.