Como desarrollador frontend, existe una alta probabilidad de que haya estado o esté trabajando actualmente en un proyecto que implique publicar y mostrar imágenes. Si no lo has hecho, lo harás pronto. Entonces, recientemente, después de terminar de trabajar en nuestro proyecto, nos encontramos con un problema a la hora de mostrar las imágenes proporcionadas por los usuarios.

Cómo se resolvió todo
El mayor problema era cómo manejar las dimensiones, más aún la altura versus el ancho de las imágenes. Configurar la imagen para que se ajuste al objeto: la portada parecía la solución perfecta para llenar el contenedor de imágenes. Pero esto introdujo otros problemas. Los usuarios iban subiendo imágenes de diferentes dimensiones; algunos escalaban y otros recortaban en el mismo contenedor. El resultado de tales inconsistencias fue una interfaz de usuario no tan atractiva, especialmente cuando las imágenes de perfil de los usuarios se recortaban de tal manera que eran menos visibles.

La solución
Decidí buscar una mejor solución. Emulando cómo las plataformas de redes sociales manejan la carga de imágenes, pensé que sería bueno brindar a los usuarios la posibilidad de recortar y obtener una vista previa de las imágenes antes de cargarlas. Investigué un poco y finalmente encontré el paquete reaccionar-image-crop. Este paquete brinda a los usuarios la posibilidad de recortar sus imágenes en tiempo real, solucionando así parte del problema.

Mientras probaba la función de recorte, noté que el tamaño de la imagen con la que estaba trabajando era de 9,5 MB. Fue entonces cuando se me ocurrió: ¿por qué no comprimir la imagen en el lado del cliente antes de cargarla? Aunque el backend también maneja esto, la capacidad de optimizar la imagen un paso antes ahorra ancho de banda y mejora los tiempos de carga.

Esto me llevó a otro paquete útil: browser-image-compression. Fusionar esto con reaccionar-image-crop me permitió ahora recortar y comprimir imágenes sobre la marcha, y con gran efecto.

Compensaciones
Esta solución no está exenta de un par de compensaciones. En primer lugar, tendrás que agregar dos paquetes más a tu proyecto; Además, las imágenes de menos de 30 KB terminarán siendo más grandes debido a la sobrecarga de compresión.

También le di estilo usando los componentes de Shadcn UI y el paquete react-dropzone para permitir a los usuarios hacer clic para seleccionar o arrastrar y soltar sus imágenes.

Uso del componente de imagen Next.js
Para obtener un rendimiento aún mejor, esta solución se puede combinar con el componente de imagen Next.js, que optimiza las imágenes automáticamente. El componente Next.js Image ayuda a entregar imágenes del tamaño adecuado, mejorando los tiempos de carga y el rendimiento general. Al integrar el recorte y la compresión con el poder de la optimización de imágenes de Next.js, puede brindar a los usuarios una experiencia más fluida y eficiente.

Demostración y código fuente
También puedes probar una demostración en vivo aquí

También aquí está el repositorio de código fuente de GitHub. ¡Escribe un asterisco si lo encuentras útil! Déjame saber si consideras utilizar esta solución en tu proyecto.