Facebookの投稿画像をパソコンでもスマホでも欠けないように表示するには




みなさんはFacebookに画像を投稿したときに、画像の一部が欠けてしまい、うまく表示されなかったことがないでしょうか?

どうでもいい画像や、特に意味をもたない画像であればそれほど神経質にならなくても良いとは思いますが、記念のショットや告知用の画像など、「イメージ通りに表示されないと困る!」という時はどうすれば良いでしょうか。

これまでの経験からパソコンで表示させた場合とスマホで表示させた場合では見え方が違うような気がしていましたが、ホントのところはどうなんでしょうか?

この辺の検証を行ってレポートしているサイトがありましたので、これを参考にして説明したいと思います。
参考:「Facebookページの投稿画像をPCでもスマホでも欠けないようにする方法」

パソコンでは、404×404ピクセルの正方形で表示され、高さを合わせてセンタリング(画像を中央に表示)してトリミング(余分な部分をカット)されます。つまり縦方向は欠けることはないけれど、横方向が欠ける場合があるということになります。

ではスマホはどうかというと、表示サイズは各デバイスの解像度によって違うようですが、幅と高さの比率が「1.5:1」で表示され、幅を合わせてトリミングされます。つまり横方向は欠けることはなく縦方向が欠ける場合があるということになります。

パソコンでは横方向が欠けて、スマホでは縦方向が欠けてしまうということですので、これを考慮して次のような画像を作ればうまく表示できます。
facebook.jpg
表示したい画像を404×404ピクセルの正方形にして、その両端に101ピクセルの余白を付けてやると画像が欠けることはなさそうです。

シェアして頂けると嬉しいです

















チャーム本店



価格.com ブロードバンド

価格.com 自動車保険









■コメントはお気軽にどうぞ