Como desenvolvedor front-end, há uma grande chance de você estar ou estar trabalhando atualmente em um projeto que envolve postagem e exibição de imagens. Se ainda não o fez, bem, o fará em breve. Então, recentemente, depois de terminarmos de trabalhar em nosso projeto, nos encontramos em uma situação difícil na hora de exibir as imagens fornecidas pelos usuários.

Como tudo se desvendou
O maior problema era como lidar com as dimensões, mais ainda com a altura versus largura das imagens. Definir a imagem para object-fit: cover parecia a solução perfeita para preencher o contêiner da imagem. Mas isso introduziu outros problemas. Os usuários carregavam imagens de diferentes dimensões; alguns estavam escalando e outros cortando no mesmo recipiente. O resultado de tais inconsistências foi uma interface de usuário não tão atraente, especialmente quando as fotos de perfil dos usuários eram cortadas de forma que ficassem menos visíveis.

A solução
Decidi encontrar uma solução melhor. Emulando como as plataformas de mídia social lidam com uploads de imagens, achei bom dar aos usuários a capacidade de cortar e visualizar as imagens antes de enviá-las. Um pouco de pesquisa e finalmente encontrei o pacote react-image-crop. Este pacote oferece aos usuários a capacidade de recortar suas imagens em tempo real, resolvendo assim parte do problema.

Ao testar a funcionalidade de corte, percebi que o tamanho da imagem com a qual estava trabalhando era de 9,5 MB. Foi então que me ocorreu: por que não compactar a imagem no lado do cliente antes de fazer o upload? Embora o back-end também lide com isso, a capacidade de otimizar a imagem um passo antes economiza largura de banda e melhora o tempo de upload.

Isso me levou a outro pacote útil: compressão de imagem do navegador. Mesclar isso com react-image-crop me permitiu agora cortar e compactar imagens instantaneamente, com ótimo efeito.

Compensações
Esta solução tem algumas compensações. Primeiro de tudo, você terá que adicionar mais dois pacotes ao seu projeto; além disso, imagens com menos de 30 KB ficarão maiores devido à sobrecarga de compactação.

Eu também o estilizei usando componentes de UI Shadcn e o pacote react-dropzone para permitir que os usuários cliquem para selecionar ou arrastar e soltar suas imagens.

Usando o componente de imagem Next.js Para um desempenho ainda melhor, esta solução pode ser combinada com o componente Next.js Image, que otimiza automaticamente as imagens. O componente Next.js Image ajuda a fornecer imagens de tamanho adequado, melhorando o tempo de carregamento e o desempenho geral. Ao integrar corte e compactação com o poder da otimização de imagem Next.js, você pode fornecer aos usuários uma experiência mais suave e eficiente.

Demonstração e código-fonte Você também pode experimentar uma demonstração ao vivo aqui

Também aqui está o repositório GitHub do código-fonte. Por favor, marque com estrela se você achar útil! Deixe-me saber se você considera usar esta solução em seu projeto.