OGP画像 というのがありますよね。
各記事の「代表的画像」と表現しても良いかもしれません。
各種SNSシェアなどでもこのOGP画像がサムネイルとして表示されます。
FC2ブログ的に言い換えると
トップページや関連記事リスト、新着記事リストなどで表示されるサムネイル画像 = OGP画像
その画像のサイズは一体どのぐらいが適切なのか。 2018年4月現時点で最低でも 横1200px が回答ということで良いと思います。
Facebookの推奨サイズは横1200px
これは2015年あたりの改正からもう1200px推奨になっています。
で、実際は縦サイズにも推奨があり 1200 × 630 です。
アスペクト比にすると約16:9の横長です。
この 16:9 という比率も頭の片隅に置いておくと良いですね。
YouTubeのアスペクト比も16:9です。
現在は大スマートフォン時代と言っても過言ではないですし MFI が徐々に本格化しているわけなんですが、スマホで撮影する写真って縦長が多いですよね。
でも web上の推奨はどのサービスをとってみても横長である 点をお忘れなく。
まぁ簡単に考えても「一枚の画像がスマホ画面のほぼ全てを埋めている」という状況は好ましくありませんので、スマホ時代だからこその「横長推奨」ということでしょう。
スマホ撮影画像を掲載する方は撮影時に横に倒して撮ると良いですね。あまりそういう人みかけないけど(笑)
スマートフォンでそんなに大きい画像が必要なのか？
ところが必要なんですね。パソコンよりもスマホの方が寧ろ必要。
既に記事にしていますのでご参照ください。
スマートフォンで画像がぼやける際の対処と画像容量削減 - カスタマイズ
スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・｀)そしてもうひとつ画像がスキっと表示されずに上からベロベロ〜って感じでゆっくり表示されてしまう場合の原因についても(後者は「ついで」的にですが)...
vanillaice000.blog.fc2.com
スマートフォンで画像がぼやける対策【2倍じゃもう足りない！】 - webのあれこれ
何も考えずに画像を掲載するとスマートフォンでめっちゃぼやけるよ。 という記事を以前に書き、その原因・対処なども記しています。 その記事だけやたらアクセスが多いんですよね。 つまり多くのスマートフォンユーザーさんが困ってるってことよね。 ...
今後も「高画質」を謳ったスマホというのはどんどん輩出されることが予想されます。
ということは求められる画像サイズはそれに比例して大きくなって行く。
繰り返しになりますが、スマホの画像ぼやけ対策は画像そのものの「解像度」ではなく「サイズ(寸法)」の問題です。
スマホだけではなくパソコンも4K, 5Kという時代です。が 今の、そして今後のwebで最も重要視されるのはパソコンよりもスマートフォン なのでスマホを主軸に据えた 1200px推奨です。
AMPの規定サムネイルサイズも横1200px
2018年以前は「最小で横696px」だったんですが、2018年の改正以降は「最小で横1200px」に変更となっています。
AMPは規格やマークアップなどが厳密なのでアスペクト比の規定もあります。
16:9 または 4:3 または 1:1 です。
FC2ブログではAMP版の提供がありませんので規格などは関係ないとはいえ。
仕様を確認することでGoogleの意向が透けて見えてきますので無駄にはなりません。
AMP版の トップニュースカルーセル などはこの画像に関する要件が守られていないと掲載対象から外れてしまいますので、「大体」「なんとなく」では済まされないんですね。
一般のブログでそこまでやる必要が有るかと問われれば「無い」と個人的に答えます(笑)
縦横比まではなかなか難しいですよねぇ (´・ω・｀)
それでも気にかける人は横1216縦684 (つまり 16:9)で切り出すクセをつけておくと良いかもですね。
ページスピードとの折り合い
ページスピード測定を行うと大抵こういう警告を頂戴します。
画像のサイズをCSSで縮小するんじゃあないッ！画像編集で指定サイズと実寸を同じにしろッ！
みたいな (´・ω・｀)
画像の容量と寸法は密接な関係がありますので、CSS調整ではなく実寸を変えろというお達しですね。
でもこれってFacebookやGoogleが言ってる(推奨している)ことと真逆なんですよ。
スマホでも1200px確保しろと言ってみたり、スマホは画面が小さいのだから実寸300pxに加工しろと言ってみたり。
どうしろっつーの 
2019.5.7 追記
現在では「表示寸と原寸を揃えよ」という指摘はされなくなりました。「『webP』など軽量拡張子を利用せよ」と指摘されます。
追記ここまで
ここはGoogle的にも頭の痛い問題だと思います。
で、現時点では「こういう現実があります。」としか言えません。
個人でLazyloading導入で対処するとか、そのぐらいしか。
拡張子によるアプローチ
新拡張子 heic というのがようやく新規格として認められました。
従来の .jpg や .png と比較して、より高画質でありながら容量は約半分に抑えられるという代物です。
iPhoneでは8以降で利用できます。
ただ拡張子というのは浸透するまでにかなり時間を要しますよね。
情報を受取る側の規格の問題があるからです。
例えばiPhoneでheic拡張子が使えるかといって、FC2ブログにアップロードする際にはFC2ブログのサーバーが.heic拡張子をサポートしてくれないことにはどうにもならない。
ソフト・アプリケーションの対応を待たなければ仕方がないわけです。
まぁそういう状況ですのでheicは一旦置いといて。
PNG拡張子を高画質の神と信じて頑なにPNGを利用する人 がまだまだ多いように思うのですが。
その画像はJPGに変換しても画質の維持は可能じゃないですか？ (´・ω・｀)
もちろんpngの方が扱える色素数が多いので「画質が良い」は間違いではありませんけれど。
肉眼で区別できる？どーお？ (´・ω・｀)
スクリーンショットはpngが向いてます。
というのはスクショというのはテキスト(文字, フォント)が含まれているケースが多くなるからです。
画面をキャプチャするということは画像としてDLできないからという理由ですよね。大抵は。
で、テキストというのはjpgだとひどくぼやけてしまいますので、一般的なキャプチャというのはpngで保存するようになっているかと思います。
なのでスクショにpngというのは妥当かなと思いますが、風景画や人物画ならjpgで十分じゃないかしら (´・ω・｀)
pngで1200px確保しようと思ったらすっごい容量大きくなりますよ。
それが何枚も掲載されてたら見る側は嫌になっちゃう(ページが重たいから)
そのあたりも個人で考慮すべき点かなぁと思います。
まとめ
細かい点は抜きにして何を言いたいかというと
FC2ブログでサムネイル対象となる画像は横1200pxにしておくと良いよね
という話し。
スピードにめちゃくちゃコダワリがあって1200pxなんてとんでもない！という方は別ですが。
結局は妥協・折り合い・バランスの話しであって、どれか一つだけ突出させれば良いわけではないと思います。
とりあえずサムネイルとなる画像は1200pxで準備して、記事内の他の画像はもっと小さくしておく、とか。
そこは個人の裁量で (o'ω')
