>>アフィリエイトで毎月20万円の報酬が発生する仕組みを作る方法はこちら

WordPressに最適な画像サイズは?おすすめのメディア設定についても解説!

わたしがサポートする生徒さんから「WordPressに最適な画像サイズを知りたい」というご質問をいただきました。

WordPressの初心者さんは、WordPressでブログを作るときに、いろんなところに挿入する画像には「適正サイズってあるのかな?」と気になりながら画像を入れ込みしているようです。

というわけで、この記事では、WordPressに使う画像の適切なサイズをワードプレス初心者さん向けに分かりやすくまとめていきます!

もし今

  • WordPressで使う画像サイズの正解は?
  • WordPressで使う画像のルールはある?
  • 記事に使った画像サイズが合わなくて困っていた

と思っているのでしたら、この記事でしっかり解説するので最後までお読み下さい。

WordPressに困ったときにすぐに解決できるコミュニティはこちら↓
有料WordPressコミュニティのお知らせ

ワードプレスの構築を1人で頑張るのが不安な方に、有料ワードプレス専門のコミュニティ「マスタープレス」をメルマガ登録者さん限定にご案内しています。

メルマガの登録は無料!
配信解除は自由!

WordPressの記事で使う最適な画像サイズ

では、いきなりWordPressに使う画像サイズの答えをお伝えすると、お使いのWordPressテーマによって推奨サイズが違うということです。

ですので、WordPressテーマの公式サイトで確認してほしいです。

ちなみに、最近は、アイキャッチ画像に縦長画像を使いたいとおっしゃる方も多いです。縦長画像を使いたい場合、テーマが縦長画像に対応していないのでしたらやめた方がいいので気をつけておいて下さい。
わたしが使用している「STORK19」は縦長画像にも対応しているテーマになります。
> STORK19公式サイト「アイキャッチ画像(縦)」

とは言え、これでは、せっかく読みにきていただいているのに、画像サイズの答えになっていない?!ということで、しっかり画像サイズを解説します!

基本的に、記事内に挿入する画像サイズの一番大きい画像だったら横幅1200pxが良いです。

理由は、Googleが推奨するサイズになるからです。

魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。サイトのロゴを画像として使用しないでください。

引用:Google検索セントラル

縦サイズは、画像比率『1.91:1』がおすすめなので、630pxが良いです。

ですので、1200px×630pxの画像を使うようにして下さい。

このサイズにしておけば、TwitterでURLを呟いたときに、大きい画像のアイキャッチ表示に設定している場合は、どこも切れることなく綺麗にアイキャッチが表示されます。

参考:ワードプレスのブログ記事をTwitterでアイキャッチ画像入りでシェアする『Twitterカード』の設定方法

上記サイズを推奨はしますが、最初にもお伝えしたように、テーマによって適正サイズは若干変わるのでそこはご理解ください。

わたし的には、画像サイズよりも、「画像比率」の方が気になります。

画像比率は、画像の縦横比です。

上図にあるように、画像比率でブログが綺麗に見えるか見えないかが大きく変わりますので、お気をつけください。

記事内に挿入する画像は、この画像比率を揃えた画像を使うとまとまりのある記事になります。

ちなみに、このゆかブログで使っている画像の「画像比率」は『16:9』です。

あとは、お好みによってスクエア画像を使いたいという方もいらっしゃいます。スクエア画像ももちろん使えないことはないですので、使ってOKです。

ただし、先ほどもお伝えしたように、スクエアを使うと決めたら、スクエアに統一した方が綺麗なので、そこは注意してくださいね。

WordPressは3種類に自動でリサイズする

大きい画像の適切のサイズをお伝えしたのですが、「小さい画像を使いたいときは?」と思うかもしれません。

実は、WordPressは、元々の機能で、1つのメディアをアップすると、3種類の画像が作られるようになっています。

これは、WordPressのダッシュボードから左メニューを見た時に、下にある「設定」の中に「メディア」という項目があります。

メディアをクリックすると設定が開くので、ここに「サムネイル」「中サイズ」「大サイズ」という3種類の画像サイズの設定ができるようになっています。

ここに画像サイズを入力して設定しているのであれば、自動生成で画像が3種類できるようになっています。

もし、WordPressの負荷を考えて、メディアの自動生成をしたくない場合は、ここの数字を全て「0」にしておけば自動生成されなくなります。

このメディア設定に設定した画像というのは、記事を投稿する際に画像ブロックを挿入したら、右側にあるブロックの設定から「画像サイズ」を切り替えて簡単にサイズ変更ができる機能です。

ですので、メディア設定に、ちゃんとリサイズ画像サイズを設定しておくことをお勧めします。

リサイズされたくない場合は、「0」設定ですね。

おすすめのWordPressメディアサイズ設定

では、ここでは、「メディア設定の画像サイズはどれくらいがいいのか?」ということをまとめていきます。いきなり、結論お伝えします。

わたし個人的なおすすめになるので、これが正しいわけじゃないですが、わたしは以下のようなサイズにしています。

  • サムネイルのサイズ:300×0
  • 中サイズ:500×0
  • 大サイズ:800×0

メディアの大サイズを決めるときですが、ご自身のサイトの記事の横幅で決めると良いです。

WordPressテーマごとのデフォルト横幅はこちら。(わたしが使用したことあるテーマのみ)

  • STORK19:728px
  • Cocoon:800px
  • SWELL:880px
  • AFFINGER:640px

このように、WordPressテーマによって横幅は違うので、テーマに合わせて大サイズは、セットしておけばOKです。

中とかサムネイルの画像サイズについては、使いやすいサイズでセットしておけばOKですが、迷う方は、わたしと同じ設定で良いです。

ちなみに、サムネイルサイズは、ほとんど使用する場面がないので、いらなかったら「0」にしておけば、サムネイルサイズの生成はされません。

WordPressの画像を使うときに注意したいこと

画像の適正サイズやメディア設定は分かっていただけたと思います。

WordPressの記事内に画像をセットするときですが、2つ注意しておきたいことがあるのでお伝えします。

  • 画像の容量
  • サイトスピード

画像の容量

WordPressを運用していると、段々WordPressの中にいろいろなデータやファイルが蓄積されていきます。

ですので、運用が長くなればなるほど、WordPressには負荷がかかっていくんです。

特に、WordPressに大きな負荷をかけるのは、メディアになります。

先ほどもお伝えしたように、WordPressに挿入した画像は、1つの画像に対して、フル画像+3種類の画像が自動生成されるんです。

つまり、画像が増えれば増えるほど、WordPressにはかなりの負荷がかかるということです。

画像の容量に関して、WordPress使用者が気をつけられることと言えば、画像容量を圧縮することです。

画像容量圧縮の方法としては、プラグインを導入したり、画像圧縮サイトを使用したりすることで対策できます。

わたしが過去にアップした記事で、画像容量を圧縮するサイトやプラグインを紹介したものがあります。よかったら参考にしてください。
(プラグインを導入する際は、お使いのWordPressテーマ公式サイトを確認して、プラグインを使っても大丈夫かどうかを確認して導入するようにしてください。)

参考:WordPressブログで画像を使う時は「画像圧縮」すること!画像圧縮ツール「TinyPNG」の使い方を解説!

参考:Imagifyの設定から使い方を徹底解説!画像容量圧縮プラグイン

参考:【2021年2月最新版】EWWW Image Optimizerの設定方法!画像を圧縮して表示速度をアップしよう

サイトスピード

あと、画像のフルサイズばかりを使用していると、サイトのスピードが落ちます。

どうしても、画像の解像度からしたら、フル画像が綺麗なので、どれもフル画像を使いたいところです。ですが、フル画像ばかりを記事内に入れると、サイトスピードが落ちます。

フル画像を使うときは、よっぽどじゃないと使わない方が良いです。

これは、Googleも良く指摘するところになります。

サイトスピードに関しては、こちらの「PageSpeed Insights」というサイトを使えば、URLを入力するだけで、サイトスピードを測れます。

サイトスピードを測るサイトで、サイトスピードを上げるための対策が書かれていることがあります。

その際に、「サイトスピードを重視するならフルサイズ画像は使用しない方が良い」と記載されています。

画像を使うときは、フルサイズは控えるように気をつけましょう。

その他の画像について

記事内の画像以外にもWordPressで画像を使います。

ですので、ここでは以下の画像の適正サイズをお伝えします。

  • ファビコン画像
  • ヘッダー画像
  • ロゴ画像

あくまでも、わたしが良いと思ったサイズだったり、公式が発表しているサイズだったりになりますので、こちらは参考にしてもらえたらと思います(^O^)/

サイトアイコン(ファビコン)画像の適正サイズは?

サイトアイコン(ファビコン)とは、ブックマークしたときやブラウザのタブに表示されるアイコンのことです。

このサイトアイコン(ファビコン)画像は、設定していない方が多いので、設定されることをおすすめします。

サイトアイコン(ファビコン)の推奨画像サイズは、「512×512px」で、形式は「.png」です。

サイトアイコン画像に関しては、どのテーマも共通だと思うので、この画像サイズと形式でセットしてください。

ヘッダー画像の適正サイズは?

ヘッダー画像とは、以下のようにサイトのトップに表示される画像になります。

ヘッダー画像の推奨サイズは、WordPressテーマによって異なるので注意が必要です。

では、WordPressテーマごとの推奨サイズをお伝えします。

  • STORK19:横2400×縦1400px(デモサイトで使われている画像サイズ)
  • Cocoon:横1900px×縦幅はお好みで。
  • SWELL:横1600×縦900px(公式サイトで使われている画像サイズ)
  • AFFINGER5:横2200px×縦500px
  • JIN:横2400px×縦幅はお好みで。
  • TCD:横1280px×縦320pxTCD LABO参照

以上、WordPressテーマごとのヘッダー画像推奨サイズになります。

参考にしてみてください(^^)

ロゴ画像の適正サイズは?

ロゴ画像は、ヘッダーに表示されるサイト名を画像に変更することができます。

サイト名は、ロゴで設置していない方もいらっしゃるので、サイトタイトルを画像にしたい方は参考にして下さい。

ちなみに、わたしのサイトは、文字を画像にしてロゴ画像を設置しています。

ロゴ画像は、「280px×60px」で良いと思います。ただ、これも設置するサイズなどで変わるので、一概に正解とは言えません。

わたしのブログのようにグローバルメニューの左端にロゴを表示するとかなら、このサイズで十分です。

ですが、ヘッダーに大きめにロゴ画像となると「500px×100px」とか「600×135px」とかのサイズが良いのではないでしょうか。

実際に画像を設置してみて調整してみてください。

まとめ

今回は、WordPressに使う画像の適正サイズについて詳しく解説しました。

おさらいをすると、WordPressの画像サイズは、使っているWordPressテーマで推奨サイズが違うことがあるので、使っているテーマの公式サイトを確認してみるのがおすすめです。

ただ、わたしが色々WordPressテーマを使っているので、いくつかのWordPressテーマに関しては、参考になればと、推奨サイズをまとめて記載しました。

●ワードプレスの記事のアイキャッチ画像とかに関しては、1200px×630px」

●メディア設定では、3つの画像サイズを指定

  • サムネイルのサイズ:300×0
  • 中サイズ:500×0
  • 大サイズ:800×0

●ファビコン画像は、「512×512px」で、形式は「.png」

●ヘッダー画像は、使っているWordPressテーマ推奨サイズを確認

  • STORK19:横2400×縦1400px(デモサイトで使われている画像サイズ)
  • Cocoon:横1900px×縦幅はお好みで。
  • SWELL:横1600×縦900px(公式サイトで使われている画像サイズ)
  • AFFINGER5:横2200px×縦500px
  • JIN:横2400px×縦幅はお好みで。
  • TCD:横1280px×縦320px(TCD LABO参照)

●ロゴ画像は、「280px×60px」

以上、参考にしてくださいね!!

WordPressを運用していると、初心者さんは色々と迷うことがあると思います。

そんな方のために、わたしは、有料WordPressコミュニティ「MaterPress」を運用しています。

1人でWordPress運用に不安を感じている方は、良ければ参加してみてくださいね(^O^)/

有料WordPressコミュニティのお知らせ

ワードプレスの構築を1人で頑張るのが不安な方に、有料ワードプレス専門のコミュニティ「マスタープレス」をメルマガ登録者さん限定にご案内しています。

メルマガの登録は無料!
配信解除は自由!

シェアしてね♪


お子さんとの時間を優先させながら
自分の力で稼げるママになって欲しい

アフィリエイトメール講座では、パソコン知識も何もないノースキルの主婦がブログで稼ぐために知っておきたい基本的なことがメルマガで届きます。

今、「ブログで稼ぐってどういうことなんだろう?」とか、「ブログ記事を書いててもイマイチ反応がない、伸びない・・・」とか

このように思っている方は、アフィリエイトメール講座にご登録ください。

メール講座の登録は無料!配信解除はいつでもOK! 登録はこちらです↓


ABOUT US

ゆかアフィリエイター兼WEB制作マーケター
ご訪問ありがとうございます!
当ブログの管理人でアフィリエイター兼WEB制作・マーケターのゆかです。

パソコンが苦手な初心者さんのブログ運営をサポートしたり、代行でWordPressの立ち上げをしています。

毎月1から2件のサイト代行をし、WordPressのコミュニティを運営したりアフィリエイトサイトを運営したりしております。

当ブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。

詳しいプロフィールはこちら>>