アップロードされたアイコンのリサイズ方法（はてダとTwitterを例に）
ユーザのアイコン画像のアップロード部分を作っているのですが、リサイズの方法としてどの方法が無難なのか悩んでいました。
こちらが想定するサイズをユーザに強制することは難しいので、多くの場合はアップロード後にこちらが画像のサイズを調整することになります。縦横比は画像によってまちまちなので、サービスによってどう処理するかは異なってきます。
ユーザの視点から考えるとサービス側に空気を読んでもらってリサイズ処理をして欲しいはずです。
以下の200×100の画像を使って、どんな方法があるのか調べてみました。
正方形にリサイズする方法
私が最初に考えていた方法です。
どんなサイズの画像が上がってきても64×64ピクセルのにリサイズします。
この方法の問題点は、縦横比が4:3の画像などでこの処理をすると、無理やり正方形の形にしてしまうので横や縦に伸びた画像になってしまうことです。
縦横比を崩さずリサイズする方法
はてなダイアリーのプロフィール画像がこの方法を取っています。
手順としては、
- アップロードされた画像の幅と高さを見て、長いほうを選択
- 選択した方の長さを基準に、指定した長さ（はてダの場合は64px）にリサイズする
といった感じでしょうか。
例の画像の場合だと、幅が200pxで高さが100pxなので、幅の200pxを選択。これを基準に64pxするとリサイズ後の高さは32pxになります。
幅と高さが64px以下になるので良い方法だと思いますが、問題点としては大きさがまちまちになってしまうところです。デザインによってはレイアウトが崩れるかもしれないので、案件次第ですね。
リサイズして正方形に切り抜く方法
Twitterのアイコンの方法です。
手順としては、
- アップロードされた画像の幅と高さを見て、短いほうを選択
- 選択した方の長さを基準に、指定した長さ（Twitterのタイムラインの場合は48px）にリサイズする
- リサイズされた画像の中央から指定した長さの正方形になるように切り抜く
といった感じでしょうか。
問題点としては画像として重要な部分を切り捨ててしまう可能性があることですが、写真や壁紙などがアップロードされることを想定すると上下（左右）を少し切り抜くだけならば画像の重要なところが見えなくなるということあまりないと思いますので、この方法が正方形にするのに適しているのではないでしょうか。
