【WordPress】アイキャッチ画像の最適なサイズって?正解とその理由をご紹介します

目次

WordPressのアイキャッチ画像のサイズってどれくらいが最適?

調べてみましたが、WordPress本家に推奨サイズは記載されていませんでした。つまり、どんなサイズでもいいよってことです。

そして、多くの方が推奨しているサイズは幅1200px×高さ630pxでした。理由は以下でご説明します。

その他にもバランスがよく見えるサイズは何種類かあります。幅1200px縛りでご紹介します。

  1. アスペクト比1.91:1:1200px×630px
  2. アスペクト比16:9:1200px×675px
  3. アスペクト比4:3:1200px×900px
  4. アスペクト比3:2:1200px×800px
  5. アスペクト比2:1:1200px×600px
  6. 黄金比:1200px×742px
  7. 白銀比:1200px×849px
  8. おまけ:グッドラボ:1200px×750px
バランスの良いアイキャッチ画像のサイズ例

1.91:1(1200px×630px)

ブログをSNSで共有したときに最も扱いやすいサイズとして推奨されています。

2014年にFacebookが推奨したサイズらしいです。

画像の中心部分に必要なワードを集めることで、スクエア型に切り抜かれてもアイキャッチが崩れません。

16:9(1200px×675px)

テレビのサイズです。Youtubeの標準アスペクト比も16:9です。見慣れた長方形ですよね。

ちなみにYoutubeの推奨サイズは以下です。

  • 2160p: 3840×2160
  • 1440p: 2560×1440
  • 1080p: 1920×1080
  • 720p: 1280×720

4:3(1200px×900px)

昔のテレビの画面サイズです。

昔のテレビというと、平成後期〜令和世代の皆さんには伝わるのでしょうか…

とにかく、昔のテレビの画面サイズです。

3:2(1200px×800px)

フィルムカメラの写真サイズです。

個人的にはこのアスペクト比はとても好きです。

2:1(1200px×600px)

映像の現場で使われるアスペクト比です。

黄金比(1200px×742px)

Appleのロゴマークや名刺のアスペクト比で、最も美しい比率とされています。

歴史的な建築物も黄金比で設計されているという説もあります。(都市伝説も含まれているらしい)

黄金比は容姿の美しさにも用いられています。

この辺りの文化的背景は調べてみるととても面白いので興味のある方はググってみてください。

白銀比(1200px×849px)

アジア人は白銀比(別名「大和比」)を用いて美しさを論じる審美観が存在するらしいです。(Wikipedia)

ハガキやA4用紙のアスペクト比も白銀比なので、馴染みのある比率です。

おまけ:グッドラボのアイキャッチサイズ(1200px×750px)

ちなみに当ブログのアイキャッチ画像のサイズは1200px×750pxです。

横幅はどのテーマにしても1200pxあれば崩れないだろうという読みと、縦はまあ…適当です。

SNSに共有するときもフルサイズで表示するのであまり気にしていません。

ちなみに上記でご紹介した中で一番近いサイズは黄金比です。

ピクセルサイズよりも容量をチェック。ブログが重くならないように注意しよう

ここまでは美しく見えるアスペクト比やピクセルサイズをご紹介してきましたが、実はピクセルサイズよりも容量サイズの方が重要だったりします

なぜなら、容量サイズが大きいとページの読み込みに時間がかかる=ページスピードダウン=SEO順位に影響が出るかもしれません。

こやん

チェックしとこう!

上記のサイズで作成した画像ならほぼOKな範囲

よほど高画質の画像でない限り、上記でご紹介したピクセルサイズで保存すれば容量サイズは特に問題ないと思います。

目安として、記事内画像は100KB以下、トップページなどでフルスクリーン表示する画像は200KB〜300KB以下が良いかと思います。

WEBの場合、解像度は72ppiでOK

解像度の設定ができるツールを使用してアイキャッチを作るなら、解像度は72ppiを選びましょう。

300ppi以上は印刷物の解像度です。WEBはここまで高解像度でなくてOKです。

写真はJPG、イラストはPNGで保存がベスト

画像データの後ろに「.jpg」「.png」ってついています。これは拡張子と呼ばれるものです。

基本の保存形式として、写真はJPG・イラストはPNGです

たまに写真なのにPNGだったり、なんでもかんでもSVGで保存されてたりするのをお見かけしますが、あれは逆に重くなってしまう場合があります。

もう一度言います。基本の保存形式として、写真はJPG・イラストはPNGです

こやん

ここ3つを守るとかなり高パフォーマンスが保てます。プロのデザイナーからゲットしたオススメ情報です

画像を軽くする無料の神ツールを使おう

画像サイズ(ピクセル・容量共)の調整は画像の保存時に行うのがベストですが、むずかしい場合は無料のツールを使いましょう。

おすすめの画像サイズ調整サイトをご紹介します。

容量を軽くする・圧縮ツール:TinyPng

TinyPngのウェブサイト

TinyPngは画像の容量を自動で圧縮してくれるサイトです。

圧縮したい画像を点線の枠の中にドラッグ&ドロップすると、自動で適切なサイズに圧縮してくれます。

また、画質はできる限り保ってくれるのも嬉しいポイントです。パンダありがとう!

画像をリサイズする:PEKO*STEP

PEKO*STEPのウェブサイト

PEKO*STEPは画像をリサイズ(ピクセルサイズを調整)できるサイトです。

こちらもリサイズしたい画像をドラッグ&ドロップし、サイズ変更欄に変更後のサイズを入力すると自動で変更してくれます。

はみ出る部分の調整を自分でできるのも嬉しいです。ネコありがとう!

すでに投稿済みの画像をリサイズするプラグイン:Imsanity

すでに投稿した画像をリサイズするならWordPressのプラグインを使いましょう。

調べてみましたが、Imsanityというプラグインが使い勝手が良さそうです。

こちらはワードプレスのレシピさんの記事で紹介されています。ご参考にどうぞ。

WordPressアイキャッチ画像サイズのまとめ

いかがでしたでしょうか。

WordPressアイキャッチ画像は

  • WordPressの推奨サイズはない
  • 一般的な推奨サイズは1200px×630px(2014年facebook合わせ)だけど、基本的にはなんでもOK
  • 美しく見える・見慣れたアスペクト比を参考にして作るとGOOD!
  • ピクセルサイズと一緒に画像解像度(容量サイズ)もチェック
  • 写真はJPG・イラストはPNG
  • サイズ調整ができる無料の神ツールを上手に使おう
  • すでに投稿した画像はプラグインでリサイズができる

以上です!

アイキャッチ一つをとっても奥が深いブログの世界。

アイキャッチ×SNSは広告と同じ役割を果たしますから、思わず押したくなるような画像が設定できると最高です。

アイキャッチ画像の作り方やおすすめツールもどんどんご紹介していきますので、引き続きチェックしていただけたら嬉しいです。

こやん

最後までお読みいただき、ありがとうございました!

ランキング参加しました。応援よろしくお願いします!

ブログランキング・にほんブログ村へ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる