ポータルサイトに欠かせないサムネイル画像のサイズあれこれ : ポータルサイトブログ

2020/12/09

ポータルサイトには欠かせないサムネイル画像ですが、表示位置やコンテンツによってサイズを調整して表示する必要があります。SNSなどの外部サービスで利用している画像も掲載したい時に、「あれ？サイズどれくらいだったかな？」なんてこともしばしば起こります。

今回は備忘録としてサムネイルについて書いていこうと思います。

アスペクト比を意識

現在のサイトはレスポンシブが主流です。ですので同じ画像をPCでもスマートフォン（モバイル）で表示するケースが多いのでアスペクト比を意識する必要があります。※容量も重要ですが今回は割愛

モニターの画面サイズなど一般的なアスペクト比は下記になります。
この辺りのサイズで構成すれば特に違和感のないポータルサイトになるかと思います。

　 16：9

　 21：9

　 4:3

　 3:2

　 2：1

　 1:1

　 1.91:1

　 4:5

　 1:1

　 4:6

　 3:1（ヘッダー画像　1500×500px）

　 1:1

　 1.91:1

　 9:16

560×315px

※21:9でアップされた動画の場合

ざっくりと調べた結果ですが大体どのサービスも上記のサイズ（アスペクト比）で構成されているようです。実際には容量を軽くしつつ最大表示するときの大きさで画像を読み込むといったケースが多いように感じています。