質問: 各ユーザーが持つ画像のサイズや解像度はバラバラだと思いますが、それらをアップロード時に「自社のサイトに最適な画像サイズ」で扱っていくためにはどのような処理が必要になってくるのでしょうか。 現状、弊社のアプリではアップロードした画像を「サイズ違いで3か所」使用する部分があります。 イメージとしてはプロフィール、ユーザーランキング、注目のユーザーといった別ページに使いまわしをする感じです。 かなり小規模である現在は、アップロード時、最大表示である「プロフィール」のサイズに合わせた画像をアップロードするようにし、他のユーザーランキング、注目のユーザーのページにはこれを縮小して表示をしています。 知りたいことは、このやり方は一般的な方法と言えるかということです。他の方がどのようなアプローチをされているのかを知りたく、ベストと言えずとも「こんなやり方があるよ」程度で構いませんので知識を共有頂ければ有難いです。 よろしくお願いいたします。
回答: まず考えるのは2点です。 ・アスペクト比 ・サイズ ### アスペクト比 画像をhtmlで表示するときにwidth,heightを指定すると思います。 このエリアに表示したい(正方形256x256)とした場合、width:256pxだけを指定すると縦長の画像は正方形をはみ出します。 ですがwidth,heightを両方指定すると、画像の縦横比(アスペクト比)が崩れます。 案は2種類あります。 画像の長辺を256pxに合わせる(三角形(枠)と円(画像)の関係で内接円のイメージです) 画像の短辺を256に合わせてセンターで切り取り枠に収まるサイズにトリミングする(外接円のイメージです) ### リサイズ 表示する三箇所に合わせて画像をリサイズする必要があります。 画像サイトであれば アスペクト比の変換を行った後で、一覧表示用のサムネイルを作成します。 例えばオリジナル画像をサイトの仕様の4:3のアスペクト比に変換しサイズが(1600px1200px)だったとします。 一覧表示で幅を240pxにしたいという要件の場合 cssでwidthを240pxにしたとしてもオリジナル画像のバイナリをダウンロードしてしまうのでサムネイルは必須です。 サムネイルを作成しないと特にスマホサイトの場合は転送速度も遅いし、パケットの重量課金が主流なので一覧表示でオリジナルをダウンロードしてしまうのはユーザ泣かせになります。 一覧表示であれば画像の遅延ローディング lazy loadと組み合わせるといい感じです。 質問の本題ですが サムネイル表示箇所がたとえば3箇所あり 幅240px, 200px, 160px といった具合でそれほどサイズに違いがない場合 自分だったら240だけを作成してあとはstyleで調整します。 画像はブラウザでキャッシュされるので240を一回ダウンロードしているのであればそれを使い回します。 サイズが明らかに違う場合 オリジナル幅1600 中サイズ960 小サイズ240 といった場合であれば中、小用のリサイズは行った方がいいと思います。