Una web de compresión de imágenes con Javascript

Una web de compresión de imágenes con Javascript

compressor geeky theory lenna Siempre me ha gustado el tema de la compresión de datos. En mi Trabajo de Fin de Grado realicé la implementación de un algoritmo de compresión de imágenes sobre Android y me encantó hacerlo. Por otra parte, como muchos de vosotros sabéis en Geeky Theory siempre nos gusta hacer proyectos pequeños y no tan pequeños para luego publicarlos aquí y que todos podamos aprender de ellos y mejorarlos. Siempre se puede mejorar. En cualquier blog es muy importante el tiempo de carga y la optimización de los recursos, como por ejemplo de imágenes. Debido a esto me propuse realizar una página web en la que pudiera comprimir las imágenes a mi gusto, pero con una condición: que la compresión la realizara el cliente y las imágenes no pasaran por ningún servidor. La compresión por parte del cliente se realizaría con código Javascript y no habría código backend de ningún tipo, ahorrando así el máximo de recursos.

Requisitos

La página web debía cumplir los siguientes requisitos:
  • Compresión de datos en el cliente.
  • El usuario debe poder fijar la calidad de la imagen.
  • El usuario debe poder comparar la imagen comprimida con la original.
  • El usuario debe poder descargar la imagen comprimida.
Una vez establecidos los requisitos, era hora de ponerse a trabajar.

Librerías utilizadas

Si hay algo que tiene Javascript son librerías. Gracias a esto agilicé mucho el desarrollo porque ya había bastantes cosas hechas, pero yo quería unirlas todas para hacer una página decente. jRange La librería jRange la he utilizado para implementar el selector de la calidad de la imagen. Es muy fácil de utilizar y yo le he hecho unas cuantas modificaciones, sobre todo de diseño, para que cuadrara con el aspecto de la página. Imagen Comparison Slider Esta librería la he utilizado para comparar la imagen comprimida con la original. J-I-C (Javascript Image Compressor) He utilizado esta librería porque ya estaba hecha y tampoco es necesario reinventar la rueda. Su función es la de comprimir las imágenes y la verdad es que son muy pocas líneas de código nada complicadas. En un futuro la quitaré para cambiarla por otra que implemente yo y tener una dependencia menos.

Cosas que faltan por implementar

Hay una buena lista de cosas que quiero añadir a la web:
  • Compresión PNG: ahora mismo se pueden cargar archivos PNG, pero la librería J-I-C realiza mal la compresión. Se arreglará cuando implemente la mía propia.
  • Mostrar los resultados de la compresión: ahora mismo no se ven en la propia página los datos resultantes de la compresión y únicamente se pueden comprobar al descargar la imagen y ver su peso. Esto es muy importante y será el siguiente paso.
  • Menú: un pequeño menú para navegar entre páginas.

 Colaborar con el proyecto

El código del proyecto está publicado en Github y sois libres de colaborar y ayudarme a desarrollarlo. Tardé unas pocas horas en hacer lo que está ahora, así que lo que está en la lista de TO-DO no debería ser muy complicado.

6 comentarios


Salvatore · Hace 7 meses

Muy bueno tu proyecto muchas gracias, queria preguntarte si me ayudarias para que los archivos que se descargue vallan directos a una carpeta ya que quiero que suban a un servidor, e intentado pero de javascript conosco muy poco.

LIDIA M.Y. · Hace 1 año

Hola Mario, muchas gracias por tus post, me gustaría preguntarte, por favor ¿conoces algún javascript para Blogger que comprima todos las fotografías existentes en la website de forma automática? Es que realizar esta tarea de una en una es una ardua tarea, y más aún cuando ya se tienen publicados cientos de post... Te lo agradecería muchísimo. Gracias

Upp.cl · Hace 1 año

Buen articulo, por cierto me gusta reinventar la rueda, asi que desarrolle un algoritmo sin dependencias para la compresión de imagen, me falta añadir soporte para las png, gif transparentes y manejo con worker , si pueden véanlo. (Es bueno reinventar las cosas de vez en cuando, ayuda a entender su proceso) https://github.com/uppchile/imagejs

Garolard · Hace 1 año

Molaría un huevo que tuviera la opción de comprimir la imágen varias veces a distintas calidades, para por ejemplo, usar la más comprimida en móvil, otra para tablets/desktop de baja resolución, otra para pantallas con una densidad de pantalla más elevada, etc. Sin duda tiene buena pinta el proyecto y apunta a ser una herramienta muy útil.

Javier Andrés Pérez · Hace 1 año

¡Enhorabuena Mario, masmola!

Luis Belzunce · Hace 1 año

La verdad es que está muy bien. ¡Enhorabuena!, tanto por el proyecto como por el reciente ritmo de publicaciones. Seguro que se pueden hacer mejoras en la página de compresión, y sería una pasada poder integrarlo con servicios de blog o similares.

Deja un comentario