Как фронтенд-разработчик, велика вероятность, что вы работали или в настоящее время работаете над проектом, который предполагает публикацию и отображение изображений. Если нет, то скоро это произойдет. Итак, недавно, после того как мы закончили работу над нашим проектом, у нас возникла заминка с отображением изображений, предоставленных пользователями.

Как все это развалилось
Самая большая проблема заключалась в том, как справиться с размерами, особенно с высотой и шириной изображений. Установка изображения в соответствии с объектом: обложка показалась идеальным решением для заполнения контейнера изображения. Но это привело к другим проблемам. Пользователи загружали изображения разных размеров; некоторые масштабировались, а другие обрезались в один и тот же контейнер. Результатом таких несоответствий стал не очень привлекательный пользовательский интерфейс, особенно когда изображения профилей пользователей были обрезаны таким образом, что они были менее заметны.

Решение
Я решил найти лучшее решение. Подражая тому, как платформы социальных сетей обрабатывают загрузку изображений, я подумал, что было бы неплохо дать пользователям возможность обрезать и просматривать изображения перед загрузкой. Небольшое исследование, и я наконец нашел пакет React-Image-Crop. Этот пакет предоставляет пользователям возможность обрезать изображения в реальном времени, тем самым решая часть проблемы.

При тестировании функции обрезки я заметил, что размер изображения, с которым я работал, составлял 9,5 МБ. Именно тогда меня осенило: почему бы не сжать изображение на стороне клиента перед загрузкой? Несмотря на то, что серверная часть тоже справляется с этим, возможность оптимизировать изображение на шаг раньше экономит полосу пропускания и сокращает время загрузки.

Это привело меня к еще одному удобному пакету: сжатию изображений в браузере. Объединение этого с React-image-crop позволило мне теперь как обрезать, так и сжимать изображения на лету, и с большим эффектом.

Компромиссы
Это решение не лишено пары компромиссов. Прежде всего, вам придется добавить в свой проект еще два пакета; кроме того, изображения размером менее 30 КБ на самом деле будут больше из-за затрат на сжатие.

Я также разработал его с помощью компонентов пользовательского интерфейса Shadcn и пакета React-Dropzone, чтобы пользователи могли выбирать или перетаскивать свои изображения, щелкая мышью.

Использование компонента изображения Next.js
Для еще большей производительности это решение можно объединить с компонентом Next.js Image, который автоматически оптимизирует изображения. Компонент Next.js Image помогает создавать изображения соответствующего размера, сокращая время загрузки и повышая общую производительность. Объединив обрезку и сжатие с возможностями оптимизации изображений Next.js, вы можете предоставить пользователям более плавную и эффективную работу.

Демо и исходный код
Вы также можете попробовать живую демо-версию здесь

Также здесь находится репозиторий исходного кода GitHub. Пожалуйста, поставьте звездочку, если вы найдете это полезным! Дайте мне знать, если вы рассмотрите возможность использования этого решения в своем проекте.