
Cocoonのアイキャッチサイズっていくつがいいんだろう?
ということについて、2021年6月に調べた情報をまとめています。

2022年1月現在にどうしているかは、最後に書いています。
Cocoonでアイキャッチ画像が見きれないサイズは1200×630だけど、720×480か640×396が最適だと思う理由
Cocoonのアイキャッチの最適なサイズは800×800以上だそうです。
さらに検索して調べると1200×630となっています。
これはTwitterカードなどを入れても見きれないからだそうです。
それを見て、1200×630でアイキャッチ画像を作ってみると、左右も上下も切り取られてしまいます。
最大の疑問なのは、主流のスマホが720ピクセル前後しか横幅を表示できないのに、1200ピクセルにする意味ってあるんでしょうか?

それはGoogle砲を受ける条件が横1200ピクセル以上という条件があるからとなるようです。
画像を大きくすればサイズも大きくなって表示速度も遅くなりますが、Google砲をうけたいなら1200以上にしないといけません。
ですが、画像が見切れるケースが出てきます。

Cocoon設定や、テーマのバージョンによっても変わってくると思いますから、確認してください
見きれないアイキャッチ画像のサイズは720×480と640×400
いろいろ実際に試してみた結果、左右も上下もほとんど見きれないで表示できたサイズは以上になります。
Cocoon設定>カラム>コンテンツ幅 = 728
Cocoon設定>カラム>コンテンツ余白幅 = 12
Cocoon設定>画像>全体画像設定のサムネイル画像 = 約5:8, 1:1.618..(黄金比)
の時の結果となります。
この設定でも、上下の余白はすこし切り取られてしまいますが、左右の切り取られる幅は最低限ですんでいるかと思います。
Cocoonのアイキャッチサイズについて まとめ
今現在、このブログでは640×396のJPEG画像にしています。
理由は、
・見る人のほとんどがスマホであること(スマホは横が700ピクセルくらいの機種が多い)
・それと、少しでも画像サイズを小さくして表示速度を上げたいから
これだと、いくつかデメリットもあるんですが、それ以上に表示速度にこだわりたいし、画像も多めに使いたいからです。
また、高解像度の画像を表示してもスマホだと細かいところまではハッキリ見えないし、文字も読みにくいのでムダだと結論づけたからです。(個人の意見です)

もし、「こうしたほうがいいよ!」みたいな情報などありましたら、コメントやTwitterで教えていただけるとうれしいです。
コメント