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 (450 KB, 1200×800)

logo-transparent.webp (85 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.

Conversión de PNG a WebP

Dado que Canvas toBlob() ignora el parámetro de calidad para imágenes PNG (la salida siempre es sin pérdida), esta herramienta convierte archivos PNG a formato WebP cuando el deslizador de calidad está por debajo de 100. WebP admite compresión con pérdida (con control de calidad) y transparencia, lo que lo convierte en la alternativa con pérdida ideal para PNG. Cuando la calidad se establece en 100, los archivos PNG se conservan en su formato original.

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