画像アップロード時のサイズ指定について

Question

各ユーザーが持つ画像のサイズや解像度はバラバラだと思いますが、それらをアップロード時に「自社のサイトに最適な画像サイズ」で扱っていくためにはどのような処理が必要になってくるのでしょうか。

現状、弊社のアプリではアップロードした画像を「サイズ違いで3か所」使用する部分があります。
イメージとしてはプロフィール、ユーザーランキング、注目のユーザーといった別ページに使いまわしをする感じです。

かなり小規模である現在は、アップロード時、最大表示である「プロフィール」のサイズに合わせた画像をアップロードするようにし、他のユーザーランキング、注目のユーザーのページにはこれを縮小して表示をしています。

知りたいことは、このやり方は一般的な方法と言えるかということです。他の方がどのようなアプローチをされているのかを知りたく、ベストと言えずとも「こんなやり方があるよ」程度で構いませんので知識を共有頂ければ有難いです。

よろしくお願いいたします。

Answer 1

まず考えるのは２点です。
・アスペクト比
・サイズ

###アスペクト比
画像をhtmlで表示するときにwidth,heightを指定すると思います。
このエリアに表示したい（正方形256x256）とした場合、width:256pxだけを指定すると縦長の画像は正方形をはみ出します。
ですがwidth,heightを両方指定すると、画像の縦横比（アスペクト比）が崩れます。

案は２種類あります。

画像の長辺を256pxに合わせる（三角形（枠）と円（画像）の関係で内接円のイメージです）
画像の短辺を256に合わせてセンターで切り取り枠に収まるサイズにトリミングする（外接円のイメージです）

###リサイズ
表示する三箇所に合わせて画像をリサイズする必要があります。

画像サイトであれば アスペクト比の変換を行った後で、一覧表示用のサムネイルを作成します。

例えばオリジナル画像をサイトの仕様の4:3のアスペクト比に変換しサイズが(1600px1200px)だったとします。
一覧表示で幅を240pxにしたいという要件の場合
cssでwidthを240pxにしたとしてもオリジナル画像のバイナリをダウンロードしてしまうのでサムネイルは必須です。

サムネイルを作成しないと特にスマホサイトの場合は転送速度も遅いし、パケットの重量課金が主流なので一覧表示でオリジナルをダウンロードしてしまうのはユーザ泣かせになります。
一覧表示であれば画像の遅延ローディング lazy loadと組み合わせるといい感じです。

質問の本題ですが

サムネイル表示箇所がたとえば3箇所あり
幅240px, 200px, 160px といった具合でそれほどサイズに違いがない場合
自分だったら240だけを作成してあとはstyleで調整します。
画像はブラウザでキャッシュされるので240を一回ダウンロードしているのであればそれを使い回します。

サイズが明らかに違う場合
オリジナル幅1600 中サイズ960 小サイズ240
といった場合であれば中、小用のリサイズは行った方がいいと思います。

Comments

[supermaruetsu]

ご回答ありがとうございました。私にもイメージできるよう具体的な例も頂けて、非常に助かりました。

Answer 2

ひとつは、ファイルサイズの上限を設けること
httpdのPOST上限などは最低限設定しておいてください

もうひとつは、縦もしくは横サイズの上限を宣言すること
これはアップロード画面に単にテキストで記載するだけでOKです。
その上で送られてきたデータを解析してサイズオーバーだったとき、
(1)ファイルを破棄して、警告をだす
(2)ファイルを勝手にリサイズする
のどちらかで運用すれば良いでしょう

Answer 3

サイトの定義や要件によりますが・・・

アップロード時にはファイルサイズのチェックや画像自体が破損していないか、不正なファイルではないかというのは当然するとして、あとは画像管理部分ですね。
サーバーの容量を気にするのであれば1枚だけアップロードしてあとは表示時にPHP側でリサイズして利用するやり方もありますし、cssやwidthなどの指定で縮小表示するやり方もあります。
アップロード時にそれぞれ用途にあわせたサイズの画像を作るやり方もありますし、
そもそも画像を3枚アップロードしてもらうやり方もあります。

若干イレギュラーですが、ファイルサイズが既定を超えていたら既定サイズにリサイズしてアップするというのをお客さんの要望でやったことがあります。。。