アップした画像をcanvasを経由して（バイナリを圧縮して）アップロードした場合の通信量の差について

Question

日本中の観光地の写真を募る、あるWEBサービスの機能についての立ち上げに関わっています。

ただ、そのサービスを管理するサーバーはただのレンタルサーバーで、容量は100GBといったところです。（利益を出すためのサイトではないため、予算はほぼ使いません）

最近の画像は携帯での撮影でも5MBを超えたりしているので、サーバーの容量とユーザーにかける通信量を減らしたいです。
※アップロードした画像はサイト上に掲載されますが、画質よりも数を重視しています。

容量を減らす際に、サーバーサイドで処理を行うと、アップロードにかかる通信量はユーザーに強いてしまうことになると思うので、フロントサイドで圧縮をかけたいと思います。

その方法について調べてみたところ、画像をcanvas要素に反映し、サイズを縮小した上でアップロードを行う方法について、下記の投稿を発見しました。
https://qiita.com/komakomako/items/8efd4184f6d7cf1363f2

実際にこちらのやり方で成功し、画像の容量を大幅に減らしたうえでアップロードすることは出来たのですが、このJavaScriptの操作も、変換時に元のサイズの画像の通信量は発生しているのでしょうか。
アップロードするのはもちろんローカルに置いてある画像で、変換はJavascriptのみで行っています。

おそらく問題ないと思ってはいるのですが、ここが自分の誤解だと後が大変なんで、念のため皆様に質問させてください。
よろしくお願いいたします。

Comments

[KoichiSugiyama]

どれくらいのサイズまで画像を縮小しているのかによって差の出方が違うと思うのですが、通信量を計測した結果を見ないと誰も何とも言えないのではないでしょうか。

[sanset]

すいません。5MBの画像がcanvas上で500KBくらいになるまでリサイズしています。このリサイズ自体に5MBの通信をしているのか、という質問です。

[wwbQzhMkhhgEmhU]

個人的には500KBだと思います。集合知的な意見だと納得しない人もいると思うので、パケットキャプチャした方が説得力があるはずです。

[sanset]

ありがとうございます。検証ツールで確認したところ、圧縮後の通信しか行っていないことが確認できました。

Answer 1

検証ツールで確認したところ、圧縮後の通信しか行っていないことが確認できました。