Facebookページのカバー写真のサイズ
2017年4月20日
Facebookページに使われるカバー写真やプロフィール写真。
PCとモバイルでは見え方が異なり、いったいどのサイズで作るのが一番いいのかハッキリ知らない人も多いと思います。
カバー写真、プロフィール写真の他にも、イベントの写真、OGPなど、Facebookページの写真サイズについてまとめました。
（2018年8月10日調べ）
※Facebookページを作成される方は【Facebookページの作り方】をご覧ください。
目次
- Facebookページのカバー写真サイズ
- Facebookページのプロフィール写真サイズ
- Facebookページのイベントの写真サイズ
- OGPの画像について
- Facebookページで使う写真の画像サイズまとめ（ベストプラクティス）
- 写真をできるだけ高画質で表示するには？
Facebookページのカバー写真サイズ
まずはカバー写真から見ていきましょう。
Facebookのヘルプセンターによると、次のようにアナウンスされています。
ページのカバー写真
コンピューターでは幅820ピクセルx高さ312ピクセル、スマートフォンでは幅640ピクセルx高さ360ピクセルの大きさでページに表示されます。
元のサイズは少なくとも幅400ピクセルx高さ150ピクセルである必要があります。
幅851ピクセルx高さ315ピクセルで、100キロバイト未満のsRGB JPGファイルだと読み込み時間が短くなります。
ロゴやテキストを含むプロフィール写真やカバー写真には、PNGファイルを使用すると、より良い結果を得ることができます。
※参考ページ:Facebookページのプロフィール写真やカバー写真のサイズはどのくらいですか。 | Facebookヘルプセンター
PCでは820px × 312px、スマートフォンでは640px × 360pxのサイズで表示されるようです。
Facebookが推奨している幅851pxのサイズは、個人プロフィールのカバー写真ならそのサイズで表示されますが、Facebookページでは幅820pxで表示されます。
以上のことから、Facebookページのカバー写真のサイズは幅820px 高さ360pxで作成するのがいいと考えられます。
実際にブラウザで表示されるサイズを調べてみました。
| 端末 | 画像サイズ |
|---|---|
| PC (1920px × 1080px) |
820px × 312px |
| iPhone5 (320px × 568px) |
319px × 179px |
| iPhone6 (375px × 667px) |
374px × 210px |
| iPhone6 Plus (414px × 736px) |
413px × 232px |
画像の高さが足りないときは縦横比はそのままで拡大されます。また、横がオーバーした分はトリミングされます。
ファイル形式はJPGだと画質がかなり劣化してしまう場合がよくあるので、多少大きくなってもPNGで作成することをオススメします。
PCでのトリミングサイズについて
前述の幅820px、高さ360pxで作成するとPCでは縦がオーバーしてしまいます。
実際には高さ312pxで表示されるので、上下ともに24px合計48px分はトリミングすることになります。
この48pxを計算に入れてカバー写真をデザインするようにしましょう。
モバイルでのトリミングサイズについて
モバイルでは前述の幅820px、高さ360pxで作成すると横がオーバーしてしまいます。
横幅640px、高さ360pxの比率なので、左右ともに90px合計180pxがトリミングされることになってしまいます。
かなり大きなトリミングなので、デザイナーの方は注意しましょう。
カバー写真のretina対応サイズについて
画像のretina対応について気になる方は幅、高さともにx2（2倍）で作成することをオススメします。
つまり、幅1640px、高さ720pxで作成するということです。
ファイル形式はJPGだと画質の劣化が激しい場合がありますので、PNGでの作成がオススメです。
作成後は登録前にTinyPNGなどを使いファイルサイズを削減してからアップロードしましょう。
カバー写真のサイズまとめ（幅820px、高さ360px）
サイズは幅820px、高さ360pxだが、上下24px、左右90pxがそれぞれトリミングされるので考慮して作成する。なお、ファイル形式はPNGがオススメ。
retina対応で考えるなら幅高さ2倍のサイズ（幅1640px、高さ720px）で作成する。
Facebookページのプロフィール写真サイズ
プロフィール写真は正方形で表示されます。
Facebookのヘルプセンターによると、プロフィール写真は次のようにアナウンスされています。
ページのプロフィール写真
ページのプロフィール写真は、広告や投稿では円形にトリミングされますが、ページにアクセスした人には同じ正方形のまま表示されます。ページのプロフィール写真がトリミングされるとどうなるかをプレビューするには、以下の例をご覧ください。
※参考ページ:Facebookページのプロフィール写真やカバー写真のサイズはどのくらいですか。 | Facebookヘルプセンター
プロフィール写真についてはカバー写真よりシンプルな仕様です。
幅170px、高さ170pxの正方形サイズになるように作成しましょう。
プロフィール写真で重要となるのはファイル形式です。
ロゴまたはテキストが含まれる場合は、JPGではなく必ずPNGで作成しましょう。
JPGでは荒くなってしまう画像も、PNGだとそれほど劣化しない場合も多々あります。
実際にブラウザで表示されるサイズを調べてみました。
| 端末 | 画像サイズ |
|---|---|
| PC (1920px × 1080px) |
170px × 170px |
| iPhone5 (320px × 568px) |
68px × 68px |
| iPhone6 (375px × 667px) |
68px × 68px |
| iPhone6 Plus (414px × 736px) |
68px × 68px |
PCでは170pxで表示され、モバイルでは68pxで表示されていました。
「スマートフォンでは128px」というわけでもないようです。
プロフィール写真のretina対応について
プロフィール写真もカバー写真と同様にretina対応させる場合は、幅高さともにx2で作成しましょう。
幅340px、高さ340pxの正方形で作成すれば大丈夫です。
Facebookのヘルプセンターにあるように、「ロゴやテキストを含むプロフィール写真〜」の場合に当てはまることが多いと思いますので、PNGで作成するほうがいいでしょう。
プロフィール写真のサイズまとめ（幅170px 高さ170pxの正方形）
幅170px、高さ170pxの正方形で作成し、ファイル形式はPNGで作成する。
retina対応で考えるなら幅高さともに2倍のサイズ（340pxの正方形）で作成する。
Facebookページのイベントのカバー写真サイズ
イベントのカバー写真は16：9の比率で表示されます。
Facebookのヘルプセンターでは、次のようにアナウンスされています。
主催者としてイベントのメイン写真を追加するには
イベントページの右上にある[イベントの写真を追加]をクリックします。イベント写真の推奨サイズは、1920×1080ピクセル(アスペクト比16:9)です。
写真を選択して、[変更を保存]をクリックします。イベントに追加した写真のサイズをあとから編集することはできません。
実際にブラウザで表示されるサイズを調べてみました。
| 端末 | 画像サイズ |
|---|---|
| PC (1920px × 1080px) |
500px × 262px |
| iPhone5 (320px × 568px) |
319px × 179px |
| iPhone6 (375px × 667px) |
374px × 210px |
| iPhone6 Plus (414px × 736px) |
413px × 232px |
もし、16:9以外の比率で作成すると16:9になるようにトリミングされます。
イベントのカバー写真のサイズまとめ（幅500px 高さ262px）
16:9の比率で幅500px、高さ262px以上で作成する。
retina対応の場合は幅、高さともにx2で作成。（幅1000px、高さ524px）
※Facebookの推奨が幅1920px、高さ1080pxなのでフルHDサイズでもOK。
OGPの画像について
OGPとはOpen Graph Protocol（オープン・グラフ・プロトコル）の略です。
<meta property=”og:xxx” content=”yyyyyy”/>のように記述し、設定しておくと、SNSでシェアされる際にタイトル、URL、説明、サムネイルなどを指定することができます。
そして、FacebookでシェアされるときにはこのOGP画像（og:image）が非常に重要です。
画像1つでユーザーの行動が大きく変わるのでよく理解して、効果的に利用しましょう。
このOGPについてはFacebookのヘルプセンターに説明がありますので興味があればお読みください。Open Graphマークアップ（Facebook for developers）
OGP画像のトリミングサイズ
OGP画像はシェアされた際にFacebookの仕様（幅1.91:高さ1の比率）にあうようにトリミングされ、表示されます。
Facebook for developersによると『幅1200px、高さは630px』が推奨されており、『幅600px、高さ315px』より小さい画像は小さく表示されるようです。詳しくはベストプラクティス-シェア機能（Facebook for developers）をご覧ください。
OGP画像のチェックをできるサイトもありますので、トリミングのされかたを事前にチェックしておきましょう。OGP画像シミュレータ | og:image Simulator
実際にブラウザで表示されるサイズを調べてみました。
| 端末 | 画像サイズ |
|---|---|
| PC (1920px × 1080px) |
（大）476px × 249px （小）160px × 160px |
| iPhone5 (320px × 568px) |
（大）299px × 156px （小）112px × 112px |
| iPhone6 (375px × 667px) |
（大）354px × 185px （小）112px × 112px |
| iPhone6 Plus (414px × 736px) |
（大）393px × 205px （小）112px × 112px |
縦長の画像が（小）で表示されるときは高さが大きくなります。PCでは高さ240px、モバイルでは168pxまで確認できました。
縦横比が3:2になるようにトリミングされるようです。
OGP画像のトリミングサイズまとめ
幅1.91:高さ1の比率で、幅600px、高さ315px以上で作成する。
retinaに対応するために幅、高さともにx2で作成。（幅1200px、高さ630px）
ファイルサイズは8MBまで可能なので、多少大きくなってもPNGファイルで作成する。
Facebookページで使う写真の画像サイズまとめ（ベストプラクティス）
| 写真 | サイズ | retina |
|---|---|---|
| カバー写真 | 幅820px 高さ360px |
幅1640px 高さ720px |
| プロフィール写真 (1:1) |
幅170px 高さ170px |
幅340px 高さ340px |
| イベントの写真 (16:9) |
幅640px 高さ360px |
幅1280px 高さ720px |
| OGP (1.91:1) |
幅600px 高さ315px |
幅1200px 高さ630px |
写真をできるだけ高画質で表示するには？
せっかくキレイに表示されるように調整して作成した画像でも、Facebook側で自動的に圧縮されてしまうことも多々あります。
Facebookのヘルプによると以下のようにアナウンスされています。
写真ができるだけ高画質で表示されるようにするには、どうすればよいですか。
Facebookでは、アップロードされた写真が適切なサイズと画質に自動的に調整されます。写真ができるだけ高画質で表示されるようにするには、以下の手順をお試しください。
以下のサポートされているサイズのいずれかになるよう、写真のサイズを変更します。
- 通常の写真: 720、960、2048ピクセルのいずれか(幅)
- カバー写真: 851×315ピクセル
カバー写真のアップロード時に写真が圧縮されないようにするには、ファイルサイズを100KBよりも小さくしてください。
画像をJPEGファイルで保存し、sRGBカラープロファイルを設定します。
写真をデフォルトでHDでアップロードするように設定を変更することもできます。
このことからカバー写真が自動で圧縮されないようにするには100KBよりも小さくする必要があります。JPG形式のファイルなら、あらかじめ画質を調整しておきましょう。PNG形式であれば作成したあとに画像圧縮サービスなどを利用し、ファイルサイズを縮小してからアップロードを行いましょう。
画像圧縮のWEBサービスはたくさんありますが、私はTinyJPGを利用しています。※JPGファイルだけでなくPNGファイルもこのサイトで圧縮できます。
Facebookページのカバー写真、その他の写真も、それぞれ推奨サイズが違います。ご自身のFacebookページ運用の参考にご活用ください。
