

WordPressに最適な画像サイズが知りたいな
今回はこのようなお悩みに回答します。
- アイキャッチ画像: 横幅1200px×高さ675px【Google砲狙い】
- 本文中の画像(目安): 横幅800px×高さ450px【読者が見やすいサイズ】
Google砲とは、Google検索の目立つ場所に記事が掲載されPV数が激増することです。


私もアイキャッチ画像サイズの最適化により、Google砲の恩恵を受けた経験があります。
本記事を参考にぜひGoogle砲を狙って、PV数を爆上げしましょう。
追記です。
WordPressを立ち上げたばかりの人には「WordPressの初期設定」の記事もおすすめです。
WordPressのアイキャッチ画像サイズは横幅1200px×高さ675px
アイキャッチ画像の横幅を1200pxにする
魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。
引用:Google検索セントラルDiscover とウェブサイト
Google Discoverとは、ユーザーの検索行動により関連性の高いコンテンツを目立つ場所に表示させるサービスです。





スマホで「Googleアプリ」や「Google Chrome」を開くと、TOP画面に出てくるおすすめ記事のことです。
Google Discoverに掲載されると、あなたの記事は多くの人の目にとまるため、急激にPV数が増加します。(Google砲)


画像の横幅は1200px以上と記載されていますが、横幅が無駄に大きいと容量が重くなるため1200pxにしましょう。
max-image-preview:large の設定方法
そこで今回は後者の「max-image-preview:largeの設定」を解説します。



AMPの有効化はややこしいので、止めておきましょう。
手順は簡単です。
<meta name="robots" content="max-image-preview:large">
このコードをhead内に記述します。
方法は、WordPressの管理画面から「外観」⇒「テーマエディタ」に行き、子テーマにあるfunctions.phpというファイルに記述します。


コードはfunctions.phpの下の方に記載します。(特に理由がなければ、記載場所は一番下)
// head内にカスタム用のコードを追加する
function meta_headcustomtags() {
$headcustomtag = <<<EOM
<!-- headに表示させたいコードをここに!(この行は消してね)-->
EOM;
echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);
【headに表示させたいコードをここに!】の場所に記載します。


ファイルを保存して完了です。
「max-image-preview:largeの設定」により、Google Discoverのフィードに記事が並ぶと、アイキャッチ画像が最大サイズで表示されます。


Google Discoverに掲載されるには画像サイズの設定だけではなく、優れたコンテンツを継続して投稿する必要があります。
まずは、アイキャッチ画像の横幅を1200pxに設定して、Google砲が来るのを待ちましょう。
アイキャッチ画像の高さを675pxにする


アイキャッチ画像の横幅が1200pxの場合、縦幅を675pxにするとアスベクト比は16:9になります。
アイキャッチ画像に違和感を与えないためにも、高さは675pxにしましょう。
WordPressに画像をアップロード時、ブラグインでサイズが変更されないように注意する


EWWW Image Optimizerなどの画像圧縮プラグインを有効化しておくと、横幅1200px×高さ675pxに設定した画像サイズが変更されます。


幅の上限を1200px以下に設定すると、 WordPress にアップロードされる画像の横幅が1200px以下に変更されてしまいます。
WordPressの本文中の画像サイズ(目安)は横幅800px×高さ450px
読者が見やすい大きな画像サイズとは、以下のように定義します。
- 横幅がWordPressのメインカラム幅ぴったりであること
- 縦幅が横幅にもとづきアスベクト比16:9に設定されていること


ただし、WordPressのメインカラム幅はテーマごとに異なります。
WordPressテーマごとのメインカラム幅
WordPressの各テーマのメインカラム幅は、以下のようになります。
- ALBATROS – 654px
- Manablog copy – 670px
- THE THOR – 698px
- JIN – 700px
- SANGO – 700px
- WING(AFFINGER5) – 700px(変更可)
- STORK19 – 728px
- HUMMING BIRD – 728px
- SWALLOW – 764px
- 賢威8 – 780px
- SWELL – 729px
- STINGER8 – 640px
- Extension – 712px
- Base- 740px
- LIGHTNING – 730px
- SYDNEY – 775px
- ONEPRESS – 790px
- COCOON – 800px(変更可)
メインカラム幅の最大はCOCOONの800pxです。
また高さはアスベクト比を16:9に合わせるため、450pxにしましょう。



横幅800px×高さ450pxはあくまで目安です。読者がはっきり画像を認識できれば問題ありません。また縦長の画像は高さを450pxより大きくしましょう。
WordPressに使う画像サイズをBulk Resize Photosで一括変更する


オリジナル画像など、WordPressに使用する画像のサイズを変更する方法を紹介します。
Bulk Resize Photosは画像サイズを変更するのに最適な無料サイトです。
- 操作がとても簡単
- 最大150枚の画像を同時に60秒でリサイズできる。
- 無料サイトなので、ダウンロードの必要がない
- 画像のサイズ変更と同時に、容量の軽量化も可能
- 画像を次世代フォーマットであるWEBP形式に変換可能



1度に多くの画像をサイズ変更でき同時に軽量化も可能なため、私も愛用しているツールです。
画像サイズを横幅800px×高さ450pxに変更し、軽量化する方法
今回は竹林の画像サイズを横幅800px×高さ450pxに変更する方法を例に解説します。




- 「画像の寸法」をクリックする
- 画像を幅800px、高さ450pxに設定
- 画像フォーマットをWEBPに選択
- 画質を80%に選択
- 画像の背景を透明な背景にチェックを入れる
- 開始をクリック


WEBPでダウンロードされた画像をクリックして開く。
サイズ変更された画像が表示されたら右クリックを押して「名前をつけて保存」を押したら完了。


サイズ変更された画像は以下のスペックになります。
項目 | 変更前 | 変更後 |
---|---|---|
画像サイズ | 横幅3264px×高さ2448px | 横幅800px×高さ450px |
アスベクト比 | 4:3 | 16:9 |
画像容量 | 2.38MB | 56KB |
画像フォーマット | JPEG | WEBP |
画像サイズは目標の横幅800px×高さ450pxになりました。
また画像容量は1.68MBから56KBに圧縮され、96%も軽量化されました。
画像の余白に色をつける方法


画像の左右に余白が生じ透明色で表示されます。そのため一目見た場合に横幅が800pxに見えません。
余白が気になる場合は、画像の背景を選択する画面で、下記の図のように色を選択すれば余白に色をつけることができます。


余白が気になる方は背景色をつけてください。



SWELLのメインカラム幅は729pxです。繰り返しとなりますが横幅800px×高さ450pxの画像をWordPressに挿入すると、横幅729px×高さ547pxに縮小されて表示されます。
画像フォーマットをWEBPに設定する理由
画像をWEBPに変えることによって、3つのメリットを享受可能となります。
- 表示速度を向上させられる
- 画像サイズを軽量化させられる:JPEGと対比し、25~34%軽量化
- 圧縮率のアップでSEOの強化になる
表示速度をアップさせることは、読者のフラストレーション緩和や離脱率低下につながります。
縦長画像を最適なサイズに変更する方法
この場合、Bulk Resize Photosでは横幅800pxに固定して画像サイズを変更します。


- 幅を選択
- 幅800pxに設定(個という表記は無視)
- 画像フォーマットをWEBPに選択
- 画質を80%に選択
- 画像の背景を透明な背景にチェックを入れる
- 開始をクリック
サイズ変更された画像が表示されたら右クリックを押して「名前をつけて保存」を押したら完了。


サイズ変更された画像は以下のスペックになります。
項目 | 変更前 | 変更後 |
---|---|---|
画像サイズ | 横幅3264px×高さ2448px | 横幅800px×高さ600px |
アスベクト比 | 4:3 | 4:3 |
画像容量 | 2.38MB | 80KB |
画像フォーマット | JPEG | WEBP |
サイズ変更後の画像の高さが600pxとなり、見やすくなりました。
また画像容量は1.68MBから80KBに圧縮され、95%も軽量化されました。
WordPress内で最適化された画像サイズに変更する


WordPress内に取り込んだ画像サイズを、WordPress内で直接変更することができます。
ただし以下の制限があります。
- 横幅800px×高さ450pxのように画像サイズを細かく設定できない
- 画像サイズの縮小はできるが拡大はできない
制限はあるものの、画像容量の軽量化も同時に行われます。既に大きな画像をWordPress内にアップロードしてしまった方は、今回紹介する方法をお試しください。
画像のアスベクト比を維持したまま、サイズを縮小する方法
今回は竹林の画像の横幅を3264pxから800pxへ縮小します。


ダッシュボードからメディアを選択し、サイズを変更したい画像をクリックします。


画像の下部にある編集をクリックします。


画像縮尺の変更の欄の横幅に800と入力します。
アスベクト比は変えられないので横幅を入力すると、自動的に高さが変更されます。
入力が終わったら「縮尺変更」をクリックしてください。


更新をクリックすれば画像サイズ変更は完了です。
保存されている画像サイズが以下のように変更されました。
項目 | 変更前 | 変更後 |
---|---|---|
画像サイズ | 横幅3264px×高さ2448px | 横幅800px×高さ600px |
アスベクト比 | 4:3 | 4:3 |
画像容量 | 2.38MB | 393KB |
画像フォーマット | JPEG | JPEG |



WordPress内での画像サイズ変更はとても簡単です。ぜひお試しください。
WordPress内の画像を好みのサイズで記事に挿入する
WordPressにアップロードした画像は、画像サイズを変更して記事に挿入することができます。
今回はブロックエディタでの方法を紹介します。
画像サイズを変更して記事に挿入する方法


投稿画面右側のブロックを選択します。画像サイズの項目から好きなサイズを選択できます。
選択できる画像サイズは以下の4種類です。
- サムネイル
- 中
- 大
- フルサイズ
元の画像サイズが横幅800px×高さ600pxの場合、WordPressに挿入するとそれぞれ以下のようにサイズ変更されました。
画像サイズ | アスベクト比 | |
---|---|---|
サムネイル | 横幅300px×高さ225px | 4:3 |
中 | 横幅500px×高さ375px | 4:3 |
大 | 横幅729px×高さ547px | 4:3 |
フルサイズ | 横幅729px×高さ547px | 4:3 |
①サムネイルサイズの竹林画像


②中サイズの竹林画像


③大サイズの竹林画像


④フルサイズの竹林画像





画像を縮小して挿入する意味あるの?



サムネイル、中サイズのように縮小した画像は、デスクトップ上で横2列に画像を並べたいときに便利です。また画質が粗い時、画像を縮小することでごまかしが効きます(笑)
挿入する画像サイズは、用途に応じて使い分けてください。
サムネイル、中、大の画像サイズの設定方法


ダッシュボードの設定からメディアを選択します。
サムネイルサイズ、中サイズ、大サイズの幅の上限を設定すれば完了です。
幅の上限とは、画像の横幅の上限のことです。
まとめ


今回はGoogle砲を狙えるアイキャッチ画像のサイズと、画像サイズの変更方法を中心に解説しました。
- Google砲を受けやすいアイキャッチ画像のサイズは、横幅1200px×高さ675px
- 本文中の画像サイズの目安は、横幅800px×高さ450px
- Bulk Resize Photosで画像サイズを一括で変更できる
- WordPress内でも画像サイズを変更できる
- メディア設定を行うことで画像を好みのサイズで記事に挿入できる
Bulk Resize Photosを駆使して、最適化された画像サイズに変更しましょう。
コメント