ウェブサイトに載せる画像は縦と横で比率が違って見える

ブログを書いててよく感じるので。

ウェブサイトに載せる画像は
比率が同じでも縦長と横長ではだいぶ違って見える。
具体的に言うと、縦長の画像が実際よりかなり縦長に見える。

これが横長。

でこれが縦長。

サイズはどちらも 480 x 320 (単位はピクセル。以下同じ) なんだけど
縦長の方がずいぶん長く見えませんか。

いやこれは猫が画面の下の方にいるからとか
そういうことではなくて、
いろんな画像を置いてみてもやっぱりそう見える。

パソコンの画面が横長であることに関係してるのかなと思って
画面を回転させて縦長にしてみたけどやっぱり見え方は同じだった。

これはウィンドウサイズの問題じゃなくて、
上から下に読むからじゃないかと思う。

ブラウザは基本的に上から下にスクロールしながら読むので
人の目も上から下に向かって情報を読み取っていく。
なので少々横長の画像なら一目で見られるけど
縦長いと移動量が大きくなるからその分長く見える。
ということじゃないかな知らんけど。

というわけで同じような感じに見えるようにするため
縦長の縦を少し短めにするようにしてます。

これが 480 x 320 で

これが 320 x 427 です。

だいたい同じぐらいに見えませんか。

何となくの個人的な感覚で言うと、
横長が 3:2 の比率だったら
短い方の辺の長さを同じにして
縦長を 4:3 ぐらいにすると
いいバランスに見えるんじゃないかな知らんけど。