WordPressブログに最適な画像サイズ(ピクセル)の目安とリサイズ方法【2021年】
※本ページにはプロモーションが含まれている場合があります。
・読みやすくてSEOにも強い画像サイズを知りたい！
・自分のブログやWordPressテーマに合ったおすすめの幅を知りたい！
・画像サイズをリサイズするおすすめな方法
本記事の内容
- ブログに最適な画像サイズ(ピクセル)の目安
- WordPressテーマごとのおすすめサイズと比率
- 自分のブログの最適な画像サイズ(横幅)を調べる方法
- 画像のおすすめなリサイズ方法
- その他画像サイズとSEOについてのQ&A
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
本記事を読むと、読者に読まれてSEOにも強いブログにするための最適な画像サイズと、WordPressテーマごとのおすすめサイズ・自分に最適なサイズの調べ方までわかります。
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
＼ 月間1300万PVのプロが解説 ／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！
目次
ブログに最適な画像サイズ(ピクセル)の目安
SEOで順位を上げて、読者にも読まれて、売上も出るブログにするには、
ブログの画像を最適な画像サイズに合わせて統一することが重要です。
その理由は
- 画像が大きすぎるとページの表示速度が遅くなる
- 画像が小さすぎると見にくくて読者が離脱する
からです。
よって画像サイズには注意すべきなのですが、
正確には画像の横幅のピクセル数(px)に注意して統一しましょう。
画像サイズで注意すべきは画像の横幅のピクセル数
>> WordPressブログの最適な画像容量(ファイルサイズ)の目安と圧縮方法【2021年】
おすすめの横幅は1,000~1,200ピクセル
ブログの画像の横幅は
1,000ピクセル ~ 1,200ピクセルがおすすめ
です。
ブログの画像の最適なサイズ(横幅)は、ブログの画面の記事のエリアの横幅に合わせるのが最適だと言われています。
上の画像のように記事のエリアの横幅が、最適な画像の横幅のピクセル数になります。
テーマによって細かな数字は異なりますが、1,000ピクセル ~ 1,200ピクセルくらいにしておくとどのブログにも対応できるちょうど良い大きさになります。
控えめに600~800ピクセルでもOK
・「横いっぱいじゃなくて、画像の両端に少しだけ空白を残したい！」
という方は600~800ピクセルくらいにするのもおすすめです。
800ピクセルもあれば横幅いっぱいになるサイトが多いので、ギリギリまでサイズを落としたい場合は800ピクセルほどにしておきましょう。
最適な画像サイズをさらに正確に横幅を把握したい方には、
- WordPressのそれぞれのテーマの横幅は「WordPressテーマ別の最適な画像サイズ」の見出しで
- 自分のブログの横幅を調べる方法は「自分のブログの最適な画像サイズ(横幅)を調べる方法」の見出しで
解説します。
GoogleとTwitterは幅1,200ピクセル以上を推奨
ちなみにGoogleでは画像サイズは横幅1,200ピクセル以上を推奨しています。
画像の幅は 1,200 ピクセル以上にする必要があります。Google 検索セントラル
また、Facebookでサムネイルを大きく表示して記事を発信したい場合も1,200ピクセル以上が必要になります。
ちなみに画像の縦横の比率(アスペクト比)は、詳しくは「画像の最適な縦横比(アスペクト比)」で解説しますが
- Googleは16:9を推奨
- TwitterなどのSNSで使用する場合は1.91:1が推奨されている
ので、
- 16:9に合わせるなら「1,200px × 675px」
- 1.91:1に合わせるなら「1,200px × 630px」
がブログに最も最適な画像サイズだと言えます。
1,024pxで統一するとまだ画像のファイルサイズがやや大きいのですが、圧縮することで容量を小さくしてサイトの表示速度を改善しています。
画像の圧縮については以下の記事で解説しています。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
>> 【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法
>> WordPressブログの最適な画像容量(ファイルサイズ)の目安と圧縮方法【2021年】
画像の最適な縦横比(アスペクト比)
画像を美しく見せるためには、画像のサイズだけでなく縦と横のピクセル数の比率にも気を付けましょう。
ブログで推奨されている画像のアスペクト比には以下のようなものがあります。
- Twitterでの表示サイズ：2×1
- Facebookでの表示サイズ：1.91×1
- Google推奨のアスペクト比①：16×9
- Google推奨のアスペクト比②：4×3
その中でも特におすすめなのが以下の2つです。
- Google推奨で見やすい16×9
- FacebookとTwitterどちらも対応できる1.91×1
操作の解説画像などではもっと横長の画像になったり、正方形に近い画像になることも多いと思うので、無理に比率を合わせる必要はありませんが、
装飾のための画像や図解などの画像は上記の比率にするのがおすすめです。
WordPressテーマ別の最適な画像サイズ
ブログの横幅はWordPressテーマによって異なるので、使用しているテーマに合わせた横幅にする必要があります。
有名な有料テーマの推奨画像サイズと、その画像サイズをGoogleやSNS推奨のアスペクト比に合わせた画像サイズは以下のようになります。
| テーマ | 横幅 | 16:9 | 1.91:1 |
|---|---|---|---|
| AFFIGER5 | 860px | 860px × 484px | 860px × 450px |
| SANGO | 680px | 680px × 383px | 680px × 356px |
| SWELL | 1,200px | 1,200px × 675px | 1,200px × 629px |
| THE THOR | 1,280px | 1,280px × 720px | 1,280px × 670px |
| JIN | 760px | 760px × 428px | 760px × 398px |
| 賢威7 | 1,200px | 1,200px × 675px | 1,200px × 629px |
| Cocoon | 800px | 800px × 450px | 800px × 419px |
ただし、いずれ他のテーマに変更する可能性もゼロではないと思いますので、どのテーマにも対応できるように大きめの画像サイズにしておくことがおすすめです。
Google推奨の比率やSNSにも対応できる比率での、テーマ毎の推奨画像サイズは上記の通りですが、
という方には「自分のブログの最適な画像サイズ(横幅)を調べる方法」の見出しでブログの横幅の調べ方を解説しています。
スマホ表示での最適な画像サイズ
スマホの表示ではPCの表示よりもぐんと横幅が小さくなりますが、
WordPressはもちろんブログのサービスはどこでも、スマホの表示サイズに合わせて画像も自動で縮小して表示してくれるので、
スマホ表示用に画像サイズを意識する必要はありません。
ブログの画像サイズを最適化しないとどうなるの？
- ブログの画像サイズを最適化することでどんなメリットがあるのか
- 画像サイズを最適化しないとどう困るのか
を解説します。
画像サイズを調整すべき理由
画像サイズを調整すべき理由は以下の通りです。
- 画像を見やすくするため
- ページの表示速度を速くするため
画像が見やすくなったりページの表示速度が速くなると、読者はより快適に記事を読むことができるので、
読者の滞在時間や回遊率が上がります。
それによって結果として、売上が上がったり検索順位も上がります。
つまり、画像サイズをブログに最適な大きさに調整するだけで、極端に言うと「売上が上がる」とも言えるわけです。
画像が小さいと見にくい
というところですが、
まず画像が小さいと以下のデメリットがあります。
- 何の画像なのかよくわからない
- 印象が薄い
- (バラバラの小ささだと)統一されていなくて見にくい
よって読者は記事を読むのが嫌になり他のブログに行ってしまいます。
画像が大きいと読み込みが遅くなる
ブログでは画像が画面よりも大きすぎる場合は、画面の大きさに合わせて縮小して表示されます。
例えば、、、
以下は「5760px × 3840px」の画像(上)と「1024px × 682px」の画像(下)を表示した例ですが、画面に合わせて縮小されて、どちらも同じ大きさで表示されています。
とはいきません。
画像のサイズ(ピクセル)が必要以上に大きいということは、画像のファイルサイズ(容量)も必要以上に大きいということです。
つまり、サイズ(ピクセル)が大きな画像を使えば使うほど、サイトの表示速度が下がります。
表示速度が下がると
- 検索順位が下がる
- 読者がどんどん離脱する
という事態が起こります。
ちなみにブログの画像のファイルサイズ(容量)の目安やおすすめの圧縮方法は以下の記事で解説しています。
>> WordPressブログの最適な画像容量(ファイルサイズ)の目安と圧縮方法【2021年】
自分のブログの最適な画像サイズ(横幅)を調べる方法
ブログに最適な画像サイズの3つのポイント
見やすく・容量も抑えた最適な画像サイズにするためには、以下の3つがポイントです。
最適な画像サイズの3つのポイント
- ブログの記事のエリアの横幅いっぱいに広がるサイズにする
- その幅よりも大きすぎないようにする
- 必要に応じて、大きな画像や小さな画像をたまに使う
そのためには、自分のブログの横幅のピクセル数を把握しておきましょう。
自分のブログの横幅を調べる手順
テーマ毎の推奨サイズは「WordPressテーマ別の最適な画像サイズ」の見出しでご紹介した通りですが、念の為に横幅を確認してみましょう。
以下の6Stepでブログの横幅のピクセルを調べることができます。
- Google Chromeで自分のブログの投稿を開く
- デベロッパーツールを開く
- カーソルのマークをクリックする
- ブログ記事の本文が青くなる箇所でクリック
- 「Computed」をクリック
- 表示されるピクセル数を確認
【Step1】Google Chromeで自分のブログの投稿を開く
まずはGoogle Chromeで自分のブログの投稿ページを開きましょう。
Google Chromeでなくても良いのですが、わかりやすいようにGoogle Chromeで解説します。
【Step2】デベロッパーツールを開く
続いて上の画像のような「デベロッパーツール」というものを開きます。
ページのソースコードやCSSなどいろんな情報が見れるツールのこと。
デベロッパーツールを開くには、ブログの投稿ページを開いた状態で
- Mac：「option」 + 「command」 + 「i」
- Windows：「F12」
で開くことができます。
【Step3】カーソルのマークをクリックする
デベロッパーツールを開いたら、上の画像のカーソルのマークをクリックしましょう。
クリックすると、カーソルのマークが青くなります。
【Step4】ブログ記事の本文が青くなる箇所でクリック
記事本文の方にカーソルを動かすと、、、
画像のように画面が青くなるので、記事のエリアが青くなった箇所でクリックをします。
記事のエリアとは、サイドバーを除いた記事本文の範囲で、上の画像のようなイメージです。
クリックしても画面は何も変わりませんが、クリックできたら次のStepに進みます。
【Step5】「Computed」をクリック
デベロッパーツールの右の方にある「Computed」をクリックしましょう。
【Step6】表示されるピクセル数を確認
「Computed」をクリックすると、、、
上の画像のようなイラストが表示されます。
この真ん中の青色のエリアに表示されている数字が、ブログの記事エリアの横幅と縦のピクセル数です。
比率も合わせて調整するなら、
- 16:9→「幅750px × 高さ425px」
- 1.91:1→「幅750px × 高さ395px」
が最適ということになります。
ブログに合わせて画像サイズを変更(リサイズ)しよう！
ブログに最適な画像サイズがわかったところで、画像サイズを変更(リサイズ)するおすすめの3つの方法をご紹介します。
リサイズにおすすめの3つのツール
用途に合わせて、以下の3つのツールがおすすめです。
- ①「プレビュー」/「ペイント」【標準アプリ】
- ②「EWWW Image Optimizer」【WordPressプラグイン】
- ③「Squoosh」【Googleの画像変換アプリ】
①「プレビュー」/「ペイント」【標準アプリ】
パソコンに最初からインストールされている標準アプリで、
- Mac：「プレビュー」
- Windows：「ペイント」
です。
1枚ずつ画像をリサイズする必要があるので手間ですが、
- 初期からインストールされている
- 使い方が簡単
ということで数枚のリサイズならこの2つのアプリが便利です。
それぞれ使い方は以下の記事をご覧ください。
②「EWWW Image Optimizer」【WordPressプラグイン】
・「WordPressにアップロードする度に自動でリサイズして欲しい！」
という場合は「EWWW Image Optimizer」というプラグインがおすすめです。
- WordPressに画像をアップロードするたびに自動でリサイズ・圧縮してくれる
- 既にアップロード済みの画像も一括でリサイズ・圧縮できる
- Google推奨の次世代フォーマットのWebP形式にも変換・圧縮できる
というところが魅力。
詳しい使い方は以下の記事で解説しています。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
>> 【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法
③「Squoosh」【Googleの画像変換アプリ】
最後のおすすめツールは、Googleが無料で提供する「Squoosh」です。
- ドラッグ&ドロップで簡単
- Google推奨の次世代フォーマットのWebP形式にも変換・圧縮できる
- 縮小だけでなく、拡大も綺麗にできる
というところが魅力。
詳しい使い方や次世代フォーマットのWebPについては以下の記事で解説しています。
>> Googleの画像圧縮アプリSquooshが便利！使い方を画像付きで解説！
>> WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】
アップロード済みの画像のリサイズ方法
WordPressを使っている場合は今までにアップロードした画像のサイズもリサイズする必要があるはずです。
とやっているとキリがないので、
アップロード済みの画像を一括でリサイズ・圧縮することができる「EWWW Image Optimizer」を使いましょう。
詳しい使い方は以下をご覧ください。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
小さい画像をキレイに拡大する裏技
大きな画像を縮小する場合はキレイにリサイズできますが、
小さな画像を拡大すると画質がかなり汚くなります。
こんなにキレイな画像も、、、
拡大するとこんなに汚くなります。
ですが驚くことにSquooshを使うととってもキレイに拡大してくれます。
という場合はSquooshを使いましょう。
>> Googleの画像圧縮アプリSquooshが便利！使い方を画像付きで解説！
ブログの画像サイズについてのQ&A
Q. おすすめのフリー素材サイトを知りたい！
おすすめのフリー素材サイトは以下の4つです。
他にもまだまだおすすめな素材サイトはたくさんあります。
詳しくは以下の記事で34のフリー素材サイトを紹介しています。
>> 【無料】ブログに使えるフリー画像素材サイトおすすめ34選
Q. フリー素材や有料素材を使う時の注意点は？
フリー素材や有料素材は、ダウンロードしたばかりだと異常に画像サイズが大きくなっています。
横幅が3000px以上の画像も多いので、フリー素材や有料で購入した画像こそしっかりとリサイズ(縮小)して使いましょう。
Q. 記事では何枚画像を使えば良いの？
SEOの観点から見ても、記事内で使うべき画像の枚数は明確に決まっていません。
ですが画像の枚数やタイミングは以下を意識するのがポイントです。
操作手順の解説などの、必要不可欠な画像の場合
わかりやすい記事にするために画像が必須なので、手順1つ1つの画像を用意するようにしましょう。
枚数をケチって少なくすると、説明がわかりづらい可能性があるので多くなっても画像をしっかり入れるのがおすすめです。
フリー素材や飾りとしての画像の場合
説明のためには不要ですが見やすくするために挿入する画像についてです。
記事がテキストばかりだと読者は読むのに疲れるので、一例としては以下のルールで挿入するのがおすすめです。
- 大見出し(h2)の後に毎回挿入する
- スマホ画面で2~3スクロール以上テキストが続きそうなら画像を間に入れる
など。
Q. アイキャッチ画像の最適なサイズは？
アイキャッチ画像も記事内の画像と同じサイズでOKです。
テーマによっては記事内の画像よりも大きなサイズになる可能性もあるので、1,200px以上の幅にするのが無難ですが、
「自分のブログの最適な画像サイズ(横幅)を調べる方法」の見出しで解説した方法でアイキャッチに必要な幅も確認すると確実です。
なお、縦横比は
- 1.91:1
- 16:9
のどちらかにして、全てのアイキャッチ画像でサイズを統一しましょう。
Q. サムネイル画像のサイズがバラバラになる原因は？
アイキャッチ画像のサイズや縦横比率が記事によってバラバラだと、記事一覧が表示された際にサムネイルの画像サイズがバラバラになります。
記事一覧でサムネイル画像のサイズがキレイに見えるように、アイキャッチ画像のサイズと縦横比率を統一しておきましょう。
ブログの画像サイズを最適化してSEOを強化しよう！
ブログに最適な画像サイズ(ピクセル)や縦横の比率を解説しました。
たかが画像と言えど、読者の離脱に繋がったりページの表示速度が遅くてSEOで悪い評価を受ける大きな原因になります。
画像サイズ1つでブログの伸び方が大きく変わってくるので、ご自身のブログに合わせた最適な画像サイズにリサイズして挿入してみてください。
画像を自動でリサイズ・圧縮するならEWWW Image Optimizerがおすすめです。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
ブログの画像の最適なファイルサイズと、圧縮してサイトを高速化する方法については以下の記事で解説しています。
>> WordPressブログの最適な画像容量(ファイルサイズ)の目安と圧縮方法【2021年】
公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。
LINE参加者の声
400名が以上参加中！無料で読めます♪
＼ 最短で収益化 ／
