En el post de hoy te enseñaré a comprimir una imagen usando JavaScript al seleccionar una imagen con un input de tipo file.

Con comprimir me refiero a reducir el tamaño del archivo de imagen, cambiando su calidad. Verás que podrás reducir la imagen hasta el 20 % de su calidad sin que se note (y podrás comprimirla incluso más).

De este modo puedes reducir el tamaño de una imagen antes de subirla a un servidor o cosas por el estilo (cambiando su peso, no su medida en pixeles). Todo esto lo haremos del lado del cliente trabajando con JS, Canvas y URL.

Yo hago este post porque estoy usando el storage de Firebase y necesito subir archivos pero no quiero que se agote mi plan gratuito.

También te servirá a ti para ahorrar ancho de banda y almacenamiento en tu servidor, o tal vez solo quieras hacer una app que reduzca la calidad de las imágenes.

Explicación del algoritmo

Vamos a obtener el File del input y lo vamos a convertir a una URL que podremos colocar dentro de una imagen, tal y como lo hacíamos cuando mostrábamos una vista previa de la imagen.

Después de tener la imagen vamos a colocarla en un canvas con drawImage (todo esto sin mostrarlo al usuario) y luego invocaremos al método toBlob que acepta 3 argumentos: el callback, el tipo de archivo y la calidad.

Justo en el tercer argumento vamos a indicar la calidad, que es un número entre el 0 y el 1, mismo que puede ser flotante.

El método toBlob nos va a devolver (en el callback) otro blob que será la imagen ya comprimida.

Y ese BLOB será igual que el archivo que teníamos originalmente pero ahora con menor calidad y tamaño. Después ya podemos subirlo con FormData o cosas de esas.

Nota: esto solo funciona con imágenes, ya que se les reduce la calidad. No es un algoritmo de compresión como tal.

Código de la función

He creado una función que recibe el file y devuelve el blob. Con esto podemos tener al menos 3 usos:

• Obtener el BLOB de la imagen con peso reducido
• Mostrar la imagen (con su calidad reducida)
• Descargar la imagen (ya con menor peso)

He convertido el callback a una promesa y queda así:

	const comprimirImagen = (imagenComoArchivo, porcentajeCalidad) => {
		/*
			https://parzibyte.me/blog
		*/
		return new Promise((resolve, reject) => {
			const $canvas = document.createElement("canvas");
			const imagen = new Image();
			imagen.onload = () => {
				$canvas.width = imagen.width;
				$canvas.height = imagen.height;
				$canvas.getContext("2d").drawImage(imagen, 0, 0);
				$canvas.toBlob(
					(blob) => {
						if (blob === null) {
							return reject(blob);
						} else {
							resolve(blob);
						}
					},
					"image/jpeg",
					porcentajeCalidad / 100
				);
			};
			imagen.src = URL.createObjectURL(imagenComoArchivo);
		});
	};

Para invocar a la función simplemente le pasas la imagen y el porcentaje de calidad (10 para el 10 %, 20 para el 20 %, etcétera). Ahora veamos los 3 escenarios.

Convertir a blob

Quedaría así:

		const archivo = $imagen.files[0];
		const blob = await comprimirImagen(archivo, parseInt($calidad.value));
		// Ya puedes subir este archivo con FormData por ejemplo:
		//https://parzibyte.me/blog/2018/11/06/cargar-archivo-php-javascript-formdata/ 
		console.log({ blob });

Esto te deja el tipo blob que ya puedes subir a un servidor, a Firebase, etcétera.

Comprimir imagen y mostrarla

Tenemos otra opción que es convertir el blob a una URL y ponerla como src de una imagen, así:

const archivo = $imagen.files[0];
const blob = await comprimirImagen(archivo, parseInt($calidad.value));
$imagenPrevisualizar.src = URL.createObjectURL(blob);

Reducir tamaño de imagen y descargarla

El último ejemplo muestra cómo reducir el tamaño de una imagen con JavaScript y descargarla, justo como lo vimos en el tutorial de descargar un canvas:

const archivo = $imagen.files[0];
const blob = await comprimirImagen(archivo, parseInt($calidad.value));
const url = URL.createObjectURL(blob);
const enlace = document.createElement("a");
enlace.href = url;
enlace.download = "Imagen comprimida.jpg";
enlace.click();

Poniendo todo junto

Me he dado a la tarea de colocar un ejemplo con estas 3 opciones para que puedas probarlo por ti mismo. No es el más bonito, pero cumple con su propósito de demostrar cómo comprimir una imagen con JS:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Comprimir imagen - By Parzibyte</title>
</head>

<body>
	<h1>Comprimir imagen - By Parzibyte</h1>
	<a href="https://parzibyte.me/blog">By Parzibyte</a>
	<br>
	<label for="imagen">Seleccione una imagen:</label>
	<br>
	<input type="file" id="imagen">
	<br>
	<label for="calidad">Calidad:</label>
	<input type="range" step="1" min="1" max="100" id="calidad">
	<hr>
	<br>
	<br>
	<button id="btnComprimirBlob">Comprimir y obtener como blob</button>
	<br>
	<br>
	<button id="btnComprimirPrevisualizar">Comprimir y visualizar</button>
	<img style="max-width: 100%;" src="" alt="" id="imagenPrevisualizar">
	<br>
	<br>
	<button id="btnComprimirDescargar">Comprimir y descargar</button>

</body>
<script>

	const $imagen = document.querySelector("#imagen"),
		$calidad = document.querySelector("#calidad"),
		$imagenPrevisualizar = document.querySelector("#imagenPrevisualizar");
	const comprimirImagen = (imagenComoArchivo, porcentajeCalidad) => {
		/*
			https://parzibyte.me/blog
		*/
		return new Promise((resolve, reject) => {
			const $canvas = document.createElement("canvas");
			const imagen = new Image();
			imagen.onload = () => {
				$canvas.width = imagen.width;
				$canvas.height = imagen.height;
				$canvas.getContext("2d").drawImage(imagen, 0, 0);
				$canvas.toBlob(
					(blob) => {
						if (blob === null) {
							return reject(blob);
						} else {
							resolve(blob);
						}
					},
					"image/jpeg",
					porcentajeCalidad / 100
				);
			};
			imagen.src = URL.createObjectURL(imagenComoArchivo);
		});
	};

	document.querySelector("#btnComprimirBlob").addEventListener("click", async () => {
		if ($imagen.files.length <= 0) {
			return;
		}
		const archivo = $imagen.files[0];
		const blob = await comprimirImagen(archivo, parseInt($calidad.value));
		// Ya puedes subir este archivo con FormData por ejemplo:
		//https://parzibyte.me/blog/2018/11/06/cargar-archivo-php-javascript-formdata/ 
		console.log({ blob });
	});
	document.querySelector("#btnComprimirPrevisualizar").addEventListener("click", async () => {
		if ($imagen.files.length <= 0) {
			return;
		}
		const archivo = $imagen.files[0];
		const blob = await comprimirImagen(archivo, parseInt($calidad.value));
		$imagenPrevisualizar.src = URL.createObjectURL(blob);
	});
	document.querySelector("#btnComprimirDescargar").addEventListener("click", async () => {
		if ($imagen.files.length <= 0) {
			return;
		}
		const archivo = $imagen.files[0];
		const blob = await comprimirImagen(archivo, parseInt($calidad.value));
		const url = URL.createObjectURL(blob);
		const enlace = document.createElement("a");
		enlace.href = url;
		enlace.download = "Imagen comprimida.jpg";
		enlace.click();
	});

</script>

</html>

Si quieres puedes acceder a la demostración en este enlace. También te dejo con más tutoriales de JavaScript en mi blog.