プロフィール画像に正方形を勧める2つの理由

どのサービスでも正方形が主流、つまり定石

FacebookでもTwitterでもLINEでもそうなんですが、どのサービスもまず間違いなく 正方形 で表示されるはずです。
仮に正方形でない画像をアップロードしたとしても、表示範囲は正方形になっているはずです。
それは 正方形にしておくのが最も都合が良いから なんですね。

例えばちょっとしたリニューアルなんぞが行われたとして。
プロフィール画像も四角だったものが今後は丸型になりますよ、とかね。
FC2もそうですよね。私が開設した当初は訪問者履歴のプロフィールアイコンは四角だったと記憶しています。
現在は円形ですね。

この程度の仕様変更というのはよくあることです。
四角い画像の表示を円形にするのは至って簡単で、以下のようなCSSを適用します。

img {
  border-radius: 50%;
}

これだけで円になる。こういうのは画像編集で行うのではなくCSSで行うのが基本です。
でないと運営は「今度からプロフ画像を円形にしたいので円形画像をアップロードし直してください。」
とかアホみたいなお願いをユーザーに申し出ることになってしまいます。
そんなとぼけた運営はまずありませんのでCSSを利用すべき場面です。

ところがこんなに簡単な処理で済むところが、元の画像がこんな風に縦横比が揃っていない場合。

同じCSS内容を適用するとこうなってしまいます ↓

あるいは円の縱橫を揃えようと思うと

縦横比完全に壊れた。
これみなさん嫌でしょう。当然こんな形で提供するはずありませんので、運営が手を入れる際にはこんな下手は打ちません。
もう少し複雑なCSSを充てることになります。
元画像が正方形で統一されていれば上記CSSで簡単に済みますけどね。
ですから正方形でない画像を許可することは運営にとっても大変都合が悪いというわけです。

でもFC2ブログは「プロフ画正方形縛り」がありません (´・ω・｀)

一部のアホブラウザへの対処

一部アホブラウザ = Microsoft Edge と IE11

縱橫の比率が異なるimg画像を、正方形の中に上手く収めるには以下のようなCSSが最適です。

img {
object-fit: cover;
object-position: center center;
}

簡単ですね。
これは img画像 の表示に対して行う指定です。
これと良く似たものに

.xxx {
background-image: (画像アドレス);
background-size: cover;
background-position: center center;
}

というのがあります。
前者は img画像の全面敷き、後者は background-image画像の全面敷き です。

画像掲載の仕方を大別すると2種類あります。
ひとつが htmlのimg要素。もう一つが CSSのbackgroundプロパティ です。
簡単に違いを説明すると

• img要素はクローラーに内容を伝えることができる(alt属性)、backgroundプロパティはできない
• img要素はwebページ上から簡単にコピーできる、backgroundプロパティはできない
• img要素は印刷に出る、backgroundプロパティは印刷時に無視される(出てこない)

などなど、両者は表示上の見た目はそっくりでも内容は全く違います。
特に SEO的にはbackgroundではなくimgで掲載したい場面も出てくるかと思います。

この画像を正方形の枠内にそれぞれのやり方で収めると…

1. img掲載

2. background掲載

ひと目見ただけでは全く区別つかないですよね。
上の 1 はimg要素ですので、マウスドラッグで少し引っ張ると「保存」できる様子がわかります。
下の 2 はbackgroundなので何も起こりません(引っ張れません)
両者共枠内に上手い具体に収まっていると思います。このページを IE11 または Edge でご覧頂いている方にも同じように見えているはずです。
* ブログ全体をIE非対応にさせて頂きましたので歪んでいます。すみません。
Edgeについてはobject〜関連CSSが実装されましたので歪みは無いと思います。

が、Microsoft系列クソブラウザでも同じように見えているのは、私が同じに見えるような対策を取っているから、つまり ポリフィルを入れているから です。
何もせずに掲載したらこの見た目にはなりません。こうなるはずです ↓

IE11及びMicrosoft Edgeはobject-fit, object-positionプロパティ未実装です。
実装されていません。
IE11は既に死刑執行を待つ身ですから無視するとしても、最新デフォルトのEdgeまでもが未実装。
Microsoftマジでクレイジー

この状況をどうにかするために、先程チラっと書いた ポリフィル というのを使います。
JSで以て本来は付加されていない機能を無理やり付け足す。それがポリフィル。
(語源: Polyfilla(ポリフィラ) アメリカで有名なコーキング(穴埋め)剤)

サービス運営がここまで(ポリフィル導入)までやるかと言ったらまずやらないですね。
こういったhack的な意味合いのJSというのは使用を避けたいはずです。
ですからFC2でもプロフィール画像のサイズを揃えるのにはimg要素ではなくbackgroundプロパティの方を利用しています。
でないとアホな子ブラウザで表示の問題が生じるから。

まとめ

例えばですね、初心者が自力のカスタマイズでプロフィール画像を円形にしようと思ったとします。
円形は正円が綺麗ですよね。できればまんまるにしたい、と考える方のほうが多いと思います。
その際にもしご自身がアップロードしている画像が長方形だった場合。
FC2プラグインの「プロフィール画像」はimg掲載になっていますので、じゃあそれをbackgroundに変更するの？から始まり、実際に円にしてみたらEdgeで潰れてるからじゃあポリフィルを入れるの？どうやって？私にできるの？えぇ？！
と悩むこと必至。

最初から正方形でアップロードしとけばそんなややこしいことにはならなくて済む

という結論。
htmlでなんとか… CSSでどうにか… というのももちろん大事なのですが、そもそも根本的な考え方を変えてみるというのも一つの方法です。
だって時間もったいないじゃん (´・ω・｀)

SNSにしろブログにしろ、正方形にしておけばまず間違いはありません。
正方形を強く推奨します(笑)
FC2も正方形に縛れば自分が楽でしょうに、って思いますが運営方針に口は出しません(笑)

あと最後にオマケですけども、OGPやFC2内サムネイル対象の画像は「長辺1000px」といつも言っていましたが、現在では「長辺1200px」をお勧めします。
理由はまた機会があれば書こうと思います。