Webブラウザ上での画像の読み込み速度向上方法について

Question

###前提・実現したいこと
現在Canvasを用いた画像処理をWebページ上で行っています。
やっていることとしては、いくつかボタンをクリックしたらそれに対応する画像同士を合成したり、ピクセルデータを加工したり、という感じです（すごくざっくりとしていますが…）。
その画像処理に関してなのですが、画像の取得が遅いと感じています。
Chromeの開発ツールのNetworkの欄から画像取得にかかっている時間を調べたところ500msもかかっていました。
画像のサイズは一つ500KB程度ですので画像のサイズが関係しているのは仕方ないのかもしれませんが、どうにかして読み込み速度を速くしたいです。
使用する画像を一番最初にプリロードしておくということも考えたのですが、そもそも一つの画像を取得してくるのに時間がかかっているため、まとめてプリロードしても最初にかなりの時間待たされてしまいます。
たくさんのそこそこ大きいサイズの画像をWeb上で処理する場合、どのような手法をとると高速に画像を取得できるのでしょうか？

色々サイトを見ていると、同じようにCanvasを使いかなりの量の画像を処理しているサイトに「NikeiD」がありました。
http://www.nike.com/jp/ja_jp/c/nikeid
選択すると靴のパーツを変更しカスタマイズできるサイトなのですが、重そうな処理をしていそうなのに画像の表示が非常に速いなーと感じました。
そこで、Chromeの開発ツールから画像の取得時間を調べたところ、base64形式の画像や、「nikeid?layer=」などと書かれた名前のデータをやり取りしていました。
これは一体どのような画像のやり取りを行っているのでしょうか？

まとめますと、
①画像の読み込み速度を速くするにはどうしたらよいのか。
②「NikeiD」のようなサイトはどのように画像データとやり取りをしているのか。
です。
ご回答を頂けると助かります_(..)ご回答を頂けると助かります(..)_

Answer 1

base64というのは画像のデータをそのまま文字列にしたようなもので、それを直接imgタグやCSSに記述するため、まったく同じ内容の画像であったとしても画像ファイルにアクセスする時間が短縮されることを期待して使われています。

①画像のURLにアクセスする→サーバにリクエストを投げる時間
②サーバが応答する→レスポンスが返ってくる時間

この分の時間が減らせる、のですが、読み込まなければならない画像のデータ量はさほど変わりません。
（場合によっては重くなることもあるかも？）

根本的な解決方法ではないですが、体感時間を短くするために
①もっとサイズの小さい画像（or荒い画像）を用意する
②その画像を使ってプレビュー的に表示する
③その間に裏側でオリジナルの画像を用意する

とかも考えられます。

参考のサイトでいうと、靴と同じの形の透明レイヤー（画像じゃなくてただのパスかなにか）を別で用意して、重ねてカラーを変更しているだけなのではないかな？と思います。
しかも最初のローディングが結構かかるので、その間に画像を読み込んでるだけじゃないのかなぁ…とも思いますが。

ローディングの間にスピナーを表示したり、あえてユーザーに別の操作をさせることで体感時間を短くするようなUX改善を行えば気にならなくなるかもしれませんね。

Answer 2

・HTTP2の導入
・JavaScriptのonLoad(JQueryのdocument.ready)で、最初の画像読み込み後に先読みで他の画像を取得する
等が考えられますね。
500KBの画像だと、10Mbpsの回線環境でも400ms程かかるかと思いますので、物理的な読み込み速度はここに依存はしてしまうと思います。
HTTP2だと、複数の画像を一気に読み込む(1つのRequestの完了を待たず、複数のRequestの発行が可能)ので、都度の待ち時間は減るんじゃないかと。