横4000px縦3000pxのjpg画像を横640pxにリサイズしたい

Question

Webのサイトを作成している中で、画像を大量に使わないといけない状態になり、元の画像サイズを小さくしようとしております。

今回使用する画像は、こちらのサイト（http://tokuna.blog40.fc2.com/blog-entry-1634.html）にあるような沢山の画像を使用した一つの画像なので、スマホなどでピンチアウトした際、なんの画像の集合体なのかも分かるようにしなければなりません。

Photoshopを使用し画像解像度から横幅640pxにリサイズしようとした所、pixelの単位が選べなかったので調べてみたら再サンプルにチェックいれないと単位が選べないことは分かったのですが、いざ再サンプルにチェックをいれ640px（比率固定）にリサイズをすると、画像を拡大して見た時に画像が荒くなってしまいました。

サイトの画像として使用するには4000×3000では大きすぎるので、どうにかRetinaディスプレイの事を考えた640pxくらいまで小さくしたいのですが、この状態ではこの画像の良さが伝えられない状況です。

こういった場合、皆様でしたらどう対処するのか、ご意見を伺いたいと思います。
どうぞ宜しくお願い致します。

Answer 1

状況や見せたい画像の内容にもよりますが、タイル画像を生成してズームするという方法はあります。

【OpenSeadragon - こんな細かく！ズーム対応の画像ビューワー MOONGIFT】
http://www.moongift.jp/2015/10/openseadragon-こんな細かく！ズーム対応の画像ビューワー/

【Zoomify Free】
http://www.zoomify.com/free.htm

OpenSeadragon用の画像も Zoomify用の画像も Leaflet というタイル表示ライブラリで表示できるようにするプラグインがあったと思います。

【Plugins - Leaflet - a JavaScript library for interactive maps】
http://leafletjs.com/plugins.html#non-map-base-layers

Leaflet 単体でも当然できます。（タイルを用意していれば）

【Extending Leaflet, New Layers - Leaflet - a JavaScript library for interactive maps】
http://leafletjs.com/examples/extending/extending-2-layers.html

Comments

[stowe]

返信がおくれてしまって、すみません。ご回答ありがとうございました。そして、また私の質問が言葉足らずでした。今回、質問に書いたような画像を大量に使わないといけないので、個々の画像サイズを小さくしないといけないのが必須なのです。拡大については、fancybox3を使用して詳細拡大をしてみようかと考えておりました。いつも丁寧な回答をして頂き、ありがとうございます。

[kei344]

タイルの生成はPhotoshopでもスクリプトを組めば出来ますよ。提示したものはどれもオーバースペック気味なものですが、適度に分割するのは手段です。たとえば、サムネイルと少し大きな画像に分けるとかも出来るとは思います。
「画像の良さが伝えたい」と「画像サイズ」と「作業コスト（手間）」のバランスで、どこを重視するのかはプロジェクトしだいです。

[stowe]

返信おそくなってしまい、すみません。なるほど、どこを重視するかが大事ですね・・・。よく分かりました。ありがとうございます！！