フロントエンド開発者として、画像の投稿と表示を伴うプロジェクトにこれまでに、または現在取り組んでいる可能性が高くなります。まだやっていないなら、すぐにできるようになるでしょう。そこで最近、プロジェクトの作業を終えた後、ユーザーから提供された画像を表示する際に問題が発生していることに気付きました。

すべてがどのように解明されたか
最大の問題は、画像のサイズ、特に高さと幅をどのように処理するかでした。画像を object-fit: cover に設定することは、画像コンテナーを埋めるための完璧な解決策のように思えました。しかし、これにより別の問題が発生しました。ユーザーはさまざまな次元の画像をアップロードしていました。一部はスケーリングしており、他のものは同じコンテナに切り取られていました。このような不一致の結果、特にユーザーのプロフィール写真が見えにくくなる方法でトリミングされた場合、UI はあまり魅力的ではなくなりました。

解決策
私はより良い解決策を見つけることにしました。ソーシャル メディア プラットフォームが画像のアップロードを処理する方法をエミュレートして、アップロードする前に画像をトリミングしてプレビューできる機能をユーザーに提供するのが良いと考えました。少し調べた結果、最終的にreact-image-cropパッケージを見つけました。このパッケージは、ユーザーにリアルタイムで画像をトリミングする機能を提供し、問題の一部を解決します。

トリミング機能をテストしているときに、作業していた画像のサイズが 9.5MB であることに気付きました。そこで思いついたのは、アップロードする前にクライアント側で画像を圧縮してはどうだろうかということです。これもバックエンドで処理されますが、一歩前に画像を最適化できるため、帯域幅が節約され、アップロード時間が短縮されます。

これにより、別の便利なパッケージ、browser-image-compression が見つかりました。これをreact-image-cropとマージすることで、画像のトリミングと圧縮の両方をその場で行うことができ、大きな効果が得られました。

トレードオフ
このソリューションにはいくつかのトレードオフが伴います。まず、プロジェクトにさらに 2 つのパッケージを追加する必要があります。また、30KB 未満の画像は、圧縮オーバーヘッドのせいで実際にはさらに大きくなります。

また、ユーザーがクリックして画像を選択したり、ドラッグ アンド ドロップできるように、Shadcn UI コンポーネントと React-dropzone パッケージを使用してスタイルを設定しました。

Next.js 画像コンポーネントの使用
さらにパフォーマンスを向上させるために、このソリューションを Next.js Image コンポーネントと組み合わせると、画像が自動的に最適化されます。 Next.js 画像コンポーネントは、適切なサイズの画像を提供し、読み込み時間と全体的なパフォーマンスを向上させるのに役立ちます。 Next.js の画像最適化機能を利用してトリミングと圧縮を統合することで、よりスムーズで効率的なエクスペリエンスをユーザーに提供できます。

デモとソース コード
ここでライブデモを試すこともできます

また、ソース コードの GitHub リポジトリもここにあります。役に立ったと思ったらスターを付けてください!あなたのプロジェクトでこのソリューションの使用を検討している場合はお知らせください。