###前提・実現したいこと
現在Canvasを用いた画像処理をWebページ上で行っています。
やっていることとしては、いくつかボタンをクリックしたらそれに対応する画像同士を合成したり、ピクセルデータを加工したり、という感じです(すごくざっくりとしていますが…)。
その画像処理に関してなのですが、画像の取得が遅いと感じています。
Chromeの開発ツールのNetworkの欄から画像取得にかかっている時間を調べたところ500msもかかっていました。
画像のサイズは一つ500KB程度ですので画像のサイズが関係しているのは仕方ないのかもしれませんが、どうにかして読み込み速度を速くしたいです。
使用する画像を一番最初にプリロードしておくということも考えたのですが、そもそも一つの画像を取得してくるのに時間がかかっているため、まとめてプリロードしても最初にかなりの時間待たされてしまいます。
たくさんのそこそこ大きいサイズの画像をWeb上で処理する場合、どのような手法をとると高速に画像を取得できるのでしょうか?
色々サイトを見ていると、同じようにCanvasを使いかなりの量の画像を処理しているサイトに「NikeiD」がありました。
http://www.nike.com/jp/ja_jp/c/nikeid
選択すると靴のパーツを変更しカスタマイズできるサイトなのですが、重そうな処理をしていそうなのに画像の表示が非常に速いなーと感じました。
そこで、Chromeの開発ツールから画像の取得時間を調べたところ、base64形式の画像や、「nikeid?layer=」などと書かれた名前のデータをやり取りしていました。
これは一体どのような画像のやり取りを行っているのでしょうか?
まとめますと、
①画像の読み込み速度を速くするにはどうしたらよいのか。
②「NikeiD」のようなサイトはどのように画像データとやり取りをしているのか。
です。
ご回答を頂けると助かります_(..)ご回答を頂けると助かります(..)_
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。