ブログに掲載する写真のサイズ(縦幅と横幅の調整)

scofield
モニターやブラウザにも影響しますが、「パソコン画面に表示できる写真の大きさ」には限界があります。

写真を画面内にきっちり納めなければいけないなんて決まりはありませんが、画面からはみ出している写真はスクロールしなければ全体を見ることができません。特に縦構図は注意が必要です。

ブログに掲載する写真の大きさは、ブログのテンプレートにも影響するので、テンプレートはできるだけメインカラムの横幅が大きなものを選んで下さい。また、写真の横幅は必ずメインカラムの横幅以内で調整して下さい(widthによる画像縮小は画質を劣化させます)。

PCブラウザに表示できる写真の大きさ

フルHD「1920×1080」のモニターの場合、ブラウザ「Google Chrome」を最大化して表示できる画面のサイズは、約「1900×970」です(タスクバーやスクロールバーで表示領域が狭くなります)。ブックマークバーを表示させると縦幅は更に狭くなります。

これはブラウザ「Google Chrome」に限らず、「Internet Explorer」や「Firefox」も同様、縦幅は約「960px~980px」までしか表示できません。

ブラウザ「Google Chrome」で表示できるサイズ

横構図の写真

横幅1060pxで調整しました。

横構図

カメラや保存設定によって縦横比は異なりますが、横構図の写真はブログの横幅に合わせて調整するだけで画面からはみ出ることはありません。

縦構図の写真(横幅を基準に調整)

横幅1060pxで調整しました。

縦構図(横幅を基準に調整)

縦幅が1590pxあるため、パソコンで見ると写真の1/3以上が画面からはみ出しています。

縦構図の写真(縦幅を基準に調整)

縦幅960pxで調整しました。

縦構図(縦幅を基準に調整)

綺麗に画面内に納まりましたが、横幅が640pxまで縮小されます。

縦構図の写真(トリミングして縦幅を基準に調整)

4:5でトリミングしてから、縦幅960pxで調整しました。

縦構図の写真(トリミングして縦幅を基準に調整)

縦幅を基準に調整しただけの時より大きな写真(横幅768px)を掲載することができます。

但し、構図が変わってしまうので、撮影時にトリミングすること前提で構図を決める必要があります。

最後に

基本的に横構図の写真は横幅を基準に、縦構図の写真は縦幅を基準に調整します(横幅を基準にすると画面に納まりきらない)。

この際縦構図の写真は、構図を維持したいのであればそのまま縦幅で調整、少しでも大きな写真を掲載したいのであれば、トリミングしてから縦幅で調整がベストだと思います(特に決まりがある訳ではないので、自分で一番綺麗に見えると思う大きさに調整して下さい)。

僕は縦幅960pxで調整していますが、レビューサイトでは縦幅800px~1200px前後で調整している方が多い気がします。