画像保存を行うときはフロントorバックエンドのどこでリサイズ＆圧縮するか？
画像の圧縮とリサイズについて記事を書きます。
リサイズと圧縮をどこで行うかによって取得できる情報が異なることを知りました。
そこでこの記事にておすすめの圧縮場所をまとめます。
フロントorバックエンド
【結論】
- 写真の付属情報が欲しいときはバックエンド
- 付属情報不要ならフロントエンド
フロントでリサイズ&圧縮する場合
フロント側でリサイズ＆圧縮をすると、サーバー側への負荷を減らすことができます。
WebP変換することで、品質を保ちながらファイルサイズを小さくすることができます。
2MBくらいの画像なら、100KBくらいまでにできるのでとても安心です。
変換にはcanvasとImageBitmapを使い、高速＆軽量に変換します。
モバイル端末でも安定して使えるのでおすすめです。
バックエンドでリサイズ＆圧縮する場合
画像情報を取得したい場合は、バックエンドにてリサイズと圧縮を行うことをお勧めします。
特に写真のExif（F値、シャッタースピード、ISO）などを取得したい場合です。
Exif情報はPNGやJPEGしか持っておらず、WebPに変換してしまうとバックエンドで取得することができなくなります。
そのため、リサイズと変換は全てバックエンドに任せました。
ただ、プロフィール画像のような写真に付属する情報が入らない場合は、フロント側での圧縮を行い通信容量を減らしてます。
WebPへ変換すると、画像の表示速度は上がります。
しかし、ライブラリやOSがWebP変換に対応していないこともあるので注意が必要です。
Exif情報（メタデータ）の取得に関する注意点
Exif情報が入っているかをまず確認しましょう。
アップロード前に確認することで処理自体が成功しているのか失敗しているかを判断できます。
私はEOSR50のカラメを使っています。
GPS接続をしていないのでGPS情報は取得できません。
そのことを忘れていて、時間を使ってしまったので確認は大切だと感じました。
また、Lightroomから書き出すときに情報を取得するようにしているのかも重要です。
Exifの情報を保持しない設定になっていると取得できません。
まとめ
写真の付属情報が欲しいときは、バックエンドで変換するのがおすすめです。
それ以外はフロントで変換してから送信するのがいいでしょう。
写真の情報をどこまで求めるかを要件に入れておくと、後々開発が楽になると思います。
Discussion