Comprimir Imágenes Online — JPEG, PNG y WebP

¿Qué es la compresión de imágenes?

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

Características principales

JPEG vs PNG vs WebP

Ejemplos de compresión

photo-landscape.jpg (2,1 MB, 4000×3000)

photo-landscape.jpg (680 KB a calidad 75)

logo-transparent.png (43 KB, 1200×800)

logo-transparent.png (19 KB a calidad 80)

hero-banner.webp (800 KB, 1920×1080)

hero-banner.webp (250 KB a calidad 75)

Cómo comprimir imágenes online

1. 1

   Sube tus imágenes

   Arrastra y suelta imágenes en el área de subida, o haz clic para explorar tus archivos. Puedes seleccionar hasta 20 imágenes JPEG, PNG o WebP a la vez, cada una de hasta 10 MB.

2. 2

   Ajusta la calidad

   Usa el deslizador de calidad para establecer el nivel de compresión deseado (0–100). El valor predeterminado es 75, que ofrece un buen equilibrio. Observa cómo los tamaños de archivo y las relaciones de compresión se actualizan en tiempo real.

3. 3

   Descarga los resultados

   Haz clic en Descargar en cualquier archivo individual, o usa Descargar todo para guardar todas las imágenes comprimidas. Usa el botón Comparar para inspeccionar visualmente la calidad antes de descargar.

Casos de uso

Optimización del rendimiento web

Reduce el tamaño de los archivos de imagen antes de subirlos a tu sitio web. Las imágenes más pequeñas se cargan más rápido, mejorando las puntuaciones de Core Web Vitals (especialmente el Largest Contentful Paint), reduciendo los costos de ancho de banda y mejorando el posicionamiento SEO.

Reducción del tamaño de adjuntos de correo

Comprime imágenes antes de adjuntarlas a correos electrónicos para mantenerte dentro de los límites de tamaño (típicamente 10–25 MB). Un lote de 20 fotos a menudo puede comprimirse de 50 MB a menos de 10 MB.

Preparación para redes sociales

Precomprime imágenes antes de subirlas a plataformas de redes sociales. Aunque las plataformas recomprimen las imágenes automáticamente, comenzar con un archivo óptimamente comprimido te da más control sobre la calidad final.

Optimización de recursos de apps y juegos

Comprime recursos de interfaz de usuario, texturas y sprites para aplicaciones móviles, juegos y aplicaciones web progresivas. Los recursos más pequeños significan descargas más rápidas, menos uso de almacenamiento y experiencias de usuario más fluidas.

Optimización de documentos y presentaciones

Reduce el tamaño de las imágenes incrustadas en PDFs, documentos de Word y presentaciones. Un mazo de diapositivas de 50 MB con fotos de alta resolución a menudo puede reducirse a 10 MB sin pérdida de calidad perceptible.

Detalles técnicos

Compresión con la API Canvas

Esta herramienta usa el método toBlob() de la API Canvas HTML5 para la compresión. La imagen se dibuja en un elemento canvas invisible y luego se recodifica con el parámetro de calidad especificado. Para JPEG y WebP, el parámetro de calidad (0,0–1,0) controla el nivel de compresión con pérdida. Para PNG, la API Canvas ignora el parámetro de calidad por completo — la codificación PNG a través de Canvas es siempre sin pérdida.

Cuantización de paleta PNG

Dado que Canvas toBlob() ignora el parámetro de calidad para PNG, la salida PNG no pasa por Canvas en absoluto. En su lugar, la imagen se cuantiza a una paleta de colores: el deslizador de calidad determina el tamaño de la paleta — calidad 75 da 192 colores — y el resultado se vuelve a escribir como un PNG real, con su canal alfa intacto. La calidad 100 corresponde a una recodificación sin pérdida que no altera ningún píxel. Si el archivo cuantizado no es más pequeño que el original, la herramienta lo descarta y conserva tus bytes originales.

Comportamiento del parámetro de calidad

El deslizador de calidad se corresponde con el parámetro de calidad de Canvas toBlob(): 100 = 1,0 (mayor calidad, archivo más grande), 0 = 0,0 (menor calidad, archivo más pequeño). Para JPEG, la calidad 75 (0,75) es generalmente el punto óptimo — por debajo de 50, los artefactos se vuelven notables. Para WebP, el mismo valor de calidad produce archivos ligeramente más pequeños que JPEG con calidad visual comparable.

Memoria del navegador y límites

Cada imagen existe en memoria tanto como el objeto File original como el Blob comprimido, más dos object URL para la visualización de vista previa. Con 20 imágenes de 10 MB cada una, el uso máximo de memoria puede alcanzar aproximadamente 400 MB. Los object URL se revocan cuando se borran las imágenes o se descarga la página para evitar fugas de memoria.

Buenas prácticas

Comienza con calidad 75 para JPEG/WebP

La calidad 75 es el punto de partida recomendado para la mayoría de los casos de uso. Típicamente reduce el tamaño del archivo entre un 60–80% con una pérdida de calidad visible mínima. Solo aumenta la calidad por encima de 85 para imágenes donde la preservación de detalles finos es crítica (por ejemplo, imágenes médicas, fotografía de calidad de impresión).

Usa WebP cuando sea posible

WebP produce archivos un 25–35% más pequeños que JPEG a la misma calidad visual y admite transparencia como PNG. Todos los navegadores modernos admiten WebP desde 2024. Convierte imágenes JPEG y PNG a WebP para obtener la mejor relación compresión-calidad en la web.

Conserva los archivos originales

Siempre conserva tus imágenes originales sin comprimir como archivos fuente. La compresión con pérdida es irreversible — recomprimir una imagen ya comprimida degrada aún más la calidad sin reducción significativa de tamaño (conocida como pérdida de generación).

Verifica la calidad antes de descargar

Usa el botón Comparar para inspeccionar visualmente los artefactos de compresión antes de descargar. Presta especial atención a las áreas con texto, bordes nítidos y degradados sutiles — estos son donde los artefactos JPEG son más visibles.

Agrupa imágenes similares juntas

Las imágenes con características similares (mismo tipo de sujeto, resolución, profundidad de color) se comprimen mejor con la misma configuración de calidad. Agrupa tus fotos por separado de tus gráficos/logotipos para obtener resultados óptimos.

Preguntas frecuentes