Reducir tamaño de imagen con JavaScript

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).

Reducir tamaño de imagen con JavaScript – Antes y después, al poner el 30 % de calidad

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.

Reducir tamaño de imagen con JavaScript

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í:

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í:

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í:

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:

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:

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