WordPressは、自由度が高く無料で簡単にホームページやブログを作成できるため、世界中で人気のソフトウェアです。

プログラミングが使えなくても作成できるので、初心者でも比較的利用しやすいWordPressには、適切な画像サイズというものが存在します。

画像サイズを最適化することで、サイトを訪れたユーザーがより快適に使えるため、知っておいて損はないでしょう。

この記事では、WordPressにおける最適な画像サイズと実際に画像を最適化する方法についてご紹介していきます。

WordPressにおける最適な画像サイズ

そもそもWordPressにおける「画像」には、以下の2種類があります。

1. アイキャッチ画像
2. 記事内の画像

この記事では、この2種類の最適な画像サイズについて解説します。

アイキャッチはGoogleが推奨するサイズに

アイキャッチ画像とは読者の目をひきつけるための画像のことで、YouTubeでいうサムネイルのようなものです。

WordPressにおけるアイキャッチ画像は、基本的に各記事のタイトルの下か上に表示されている画像のことを指しています。

具体的にいうと、WordPressのエディター画面右側にある投稿パネルから設定できる画像のことです。

そんなアイキャッチ画像のサイズは、Googleが推奨しているサイズにするのがおすすめです。Googleが推奨している画像サイズは、以下の通りです。

画像サイズ	幅1,200px（ピクセル）以上
アスペクト比（縦横比）	16：9

Googleの推奨サイズに当てはめると、アイキャッチ画像の最適なサイズは「幅1,200px×高さ675px」となります。

高さを675pxにすべき理由は、Googleが推奨しているアスペクト比に幅1,200pxを当てはめると675pxになるからです。

もちろん幅を1.200px以上にすることも可能ですが、基本的に画像サイズは大きくすればするほどページの読み込み時間が長くなってしまうため、1,200pxに設定するようにしましょう。

Googleが推奨しているサイズに合わせるべき理由は、Google Discover（グーグル・ディスカバー）に表示されやすくなるからです。

Google  Discoverとは、Googleユーザーに合うコンテンツを「おすすめの記事」としてGoogleアプリのホーム画面や検索窓の下に表示する機能のことをいいます。

SNSなどで拡散されなくても、Googleが自動であなたの記事をおすすめしてくれます。

Google  Discoverに表示されると爆発的なアクセスが期待できるため、アイキャッチ画像は推奨サイズに合わせるのがおすすめです。

記事内の画像は横幅に合わせよう

記事内で利用する画像のサイズは、サイトの横幅に合わせるようにしましょう。なぜなら、サイトの横幅以上の画像を挿入してもそれ以上大きく表示される訳ではないからです。

WordPressの場合、サイトの横幅は利用しているテーマによって異なります。

代表的なWordPressテーマの横幅を以下にまとめましたので、利用しているものがあればご参考ください。

テーマ	横幅
COCOON	800px
ALBATROS	654px
JIN	700px
STINGER8	640px
賢威8	780px
WING	700px
SANGO	700px
THE THOR	698px
STORK19	728px
SWELL	729px
SWALLOW	764px
Base	740px
LIGHTNING	730px

WordPressの横幅は800pxなので、使っているテーマの横幅サイズがわからない場合は800pxで作成すれば間違いありません。

WordPressのテーマはアップデートされることがあります。その際、横幅が変更される可能性があるので、記事内の画像サイズも変更しなければなりません。

何度も画像サイズを変更するのが面倒な方は、800pxで作成することをおすすめします。

また、記事内の画像はアスペクト比を気にする必要はありません。しかし、縦を長くしすぎるとユーザーにとって見づらい画像になってしまいます。

ですから、基本的には16：9のアスペクト比を意識するようにしましょう。

ファイルサイズにも気を配るべき

そもそも画像サイズには、以下の2つの意味があります。

• 画像の大きさ
• 画像のファイルサイズ

画像の大きさについては先述した通りですが、もう1つファイルサイズに気を配る必要があります。

ファイルサイズとは、データの容量のことです。ファイルサイズが大きくなればなるほど、ページの読み込み時間が長くなってしまいます。

ですから、ファイルサイズはできる限り小さくするように心がけておきましょう。

最適なファイルサイズとは

WordPressで使う画像の最適なファイルサイズは、200KB以下です。

そもそもGoogleは「1ページあたりのファイルサイズで1.6MB以内を目指すように」と公表しています。

Googleが推奨している1.6MBというのは1ページ全てを合わせたデータ容量なので、画像を5枚程度使うとしたら1枚あたりのファイルサイズを200KB以下に設定しましょう。

ただし、目安である1.6MBは、あくまで3G回線を利用している時にストレスなく表示される容量のことを表しています。

ですから、1ページあたりの容量が1.6MBを少し超えてしまっても大きく気にする必要はありませんが、小さければ小さいほど良いことに間違いはありません。

ファイルサイズを縮小する方法は、以下の3つです。

• ツールを使う
• イラストを利用する
• WebPにする

1つ目のツールについては、ブラウザ上で行えるものやWordPressのプラグインなどさまざまな種類があるため、後ほど解説します。

2つ目のイラストですが、基本的に写真素材よりもイラストの方が容量が小さい傾向があるためです。

例えばフリー素材サイトからダウンロードして写真素材を利用する場合、高画質なカメラで撮影された素材がほとんどです。

そのため、画像のファイルサイズもかなり大きいものがあり、1枚の写真だけで2MBを超えてしまうものもあります。

そんな写真素材と比較すると、イラストはデータ容量が小さめです。

もちろんデータ容量が大きいイラストもあるので、確かめる必要があることにご注意ください。

3つ目のWebP（ウェッピー）とは、2010年にGoogleが開発した次世代の画像フォーマット（ファイル形式）のことです。

画像の圧縮率が非常に高く、写真でもイラストでも容量が小さいという特徴があります。Chrome・Safari・Firefoxなどの主要ブラウザに対応しているため、利用できるのであればファイル形式をWebPにしましょう。
後ほど、画像をWebPにする方法についても解説します。

出典：Chrome Developers

なぜ画像サイズを最適化するべきなのか

ここまでの内容で、最適な画像サイズについてご紹介してきました。ここからは、画像サイズを最適化するべき理由について解説します。

サイトの訪問者が見やすいから

1つ目の理由は、サイトを閲覧しにきたユーザーにとって見やすいページにするためです。

これは主に画像の大きさについての話ですが、何か調べ物をしている時に画像が小さすぎたり大きすぎたりして見にくかったという経験はないでしょうか。

小さすぎると画像の内容が読み取れないし、大きすぎると見づらいのが画像です。そういった画像を利用してしまうと、訪問者は無意識にストレスを感じてしまい、あなたのサイトから離脱してしまいます。

また、現在はスマートフォンで検索するユーザーが多くなっています。2021年に行われたドイツのSEO会社による調査では、日本における75.1%の検索がスマートフォンからとのことです。

スマートフォンで検索することが主流となった今、PCだけでなくスマートフォンで画像が綺麗に表示されているかを確認しておきましょう。

ページの読み込み速度が早くなるから

画像を最適化することで、ページの読み込み速度を速くすることができます。

ページの読み込み速度とは、GoogleやYahoo!を利用しているユーザーが何かを検索し、あなたのサイトのページをクリックし、実際に表示されるまでの速度のことです。

ファイルサイズが大きい画像を使ってしまうと、ページの読み込み速度が長くなり、ユーザーが離脱してしまいます。

Googleの調査報告では、リンクをクリックしてから表示されるまでに3秒以上かかると、ユーザーの53%が離脱してしまうと発表しています。

たった3秒で、半数以上のユーザーが離脱してしまうのが現状です。

より多くのユーザーにサイトを見てもらうためにも、画像のファイルサイズを最適化しページの読み込み速度を高速化しましょう。

出典：Think with Google

SEO的に有利だから

画像サイズを最適化すると、SEOに有利に働きます。

SEOとは「Search Engine Optimization」の略で、日本語に訳すと「検索エンジン最適化」のことです。

もう少しわかりやすくいうと、検索エンジンからサイトに訪問するユーザーを増やすマーケティング施策のことを指しています。

GoogleやYahoo!などの検索エンジンから評価され、検索結果で上位に表示されるようにすることをSEO対策といいます。

Googleは、ページの読み込み速度を検索のランキング要素に使用すると発表しました。

具体的には、優れたコンテンツであれば読み込み速度が遅くても上位に表示される可能性があるとしていますが、ユーザーが遅いと感じるページはランキングに影響するとしています。

つまり画像のファイルサイズを大きくしてしまい、ページの読み込み速度が遅くなってしまうと、上位に表示されなくなってしまうかもしれません。

反対に、見やすくファイルサイズが小さい画像を利用すればユーザーの滞在時間や回遊率が上がり、SEOに有利に働くと考えられます。

画像の大きさやファイルサイズは簡単に変更できるため、まずは最適な画像サイズにすることからSEO対策を始めてみましょう。

出典：Google検索セントラル

自分のサイトの横幅を調べる方法

先述した通り、記事内で利用する画像の大きさはサイトの横幅に合わせるべきです。

主要なテーマの横幅についてはご紹介しましたが、それ以外のテーマを利用していたり、制作会社にオリジナルデザインでの制作を依頼していたりと、さまざまなパターンが考えられます。

そこで、現在利用しているサイトの横幅を調べる方法を解説します。

サイトの横幅を調べるには、GoogleChromeのデベロッパーツールを利用する方法が最も簡単です。

まず、GoogleChromeで自分のサイトの記事ページを開きます。

次に、デベロッパーツールを開きます。デベロッパーツールとは、表示しているページのコードなどを確認・編集するツールのことです。

デベロッパーツールの開き方はMacとWindowsで異なるため、以下に開き方を載せておきました。

Mac：option + command + i
Windows：F12

続いて、画面の右上に出てくるカーソルマークをクリックします。

その後、カーソルを記事本文の方に動かし、青くなったところでクリックするとポップが表示されます。

右上に書いてある最初の数字がサイトの横幅です。

ステップをまとめると以下の通りです。

1. GoogleChromeで自分のサイトの記事ページを開く
2. デベロッパーツールを開く
3. カーソルマークをクリック
4. カーソルを記事本文へ動かし、青くなった所でクリック

この方法は自分のサイトだけでなく、他のサイトの横幅も調べることができます。他のテーマの横幅が知りたい方もご活用ください。

画像サイズを最適化する5つの方法

ここからは、実際に画像サイズを最適化する方法について解説します。

大まかにいうと、ブラウザ上でサイズ変更する方法とWordPressのプラグインを使ってサイズ変更する2つの方法をご紹介します。

プラグインとは、WordPressにさまざまな機能を追加できる拡張ツールのことです。基本的にはWebサイトの機能を追加する場合、プログラミング言語を使ってコーディングする必要があります。

しかし、WordPressの場合はプラグインをダウンロードするだけでサイトに必要な機能を追加することができます。

Squoosh

まず1つ目は、Google Chrome Labsが開発提供している、Squoosh（スクワッシュ）という画像圧縮サービスです。

ドラッグ&ドロップで直感的に操作ができる上に、サイズ変更後のファイルサイズや画質をあらかじめ確認できるという特徴があります。

さらに、かなり多くの画像形式に対応しているというのも大きなメリットです。具体的には、以下の画像形式に対応しています。

• JPEG
• PNG
• WebP
• PDF
• GIF
• MozJPEG
• JPEG2000
• TIFF
• BMP

先述したWebPにも対応していますので、おすすめのサービスです。また、サイズの縮小やファイルサイズの圧縮だけでなく、拡大も綺麗に行うことができます。

WordPressの画像の場合、基本的には「WebP」「JPEG」「PNG」を利用することになるでしょう。

SquooshはPCからだけではなく、スマートフォンからも画像サイズの変更を行うことができます。

EWWW Image Optimizer

EWWW Image Optimizerは、画質の劣化を抑えながら画像サイズを圧縮することができるWordPressのプラグインです。

このプラグインのメリットは、以下の2つにあります。

• 新規画像を自動でリサイズ・圧縮できる
• 既存画像を一括でリサイズ・圧縮できる

まずEWWW Image Optimizerをダウンロードして有効化すれば、今後アップロードする画像は全て自動でリサイズ・圧縮することができます。

ですから、コンテンツを作成するたびに画像をリサイズする必要はありません。

もう1つのメリットが、今までWordPress上にアップロードした画像を全てリサイズ・圧縮できるという点です。

本来であれば今までの画像は1つ1つリサイズする必要がありますが、このプラグインであれば全て一括で変更することができます。

また、WebPに対応しているのもポイントです。

一方で、画像をリサイズ・圧縮しすぎると画質が多少劣化してしまうのがデメリットとなります、

LiteSpeed Cache

LiteSpeed Cacheは、キャッシュを有効にすることによってページの読み込み速度を高速化することができるプラグインです。

300万回以上ダウンロードされている非常に人気のプラグインとなっています。

そんなLiteSpeed Cacheは、LiteSpeedサーバーを使用しているWebサイト専用のプラグインです。ですから、他のサーバーを利用しているサイトは互換性がなく使用することができないことにご注意ください。

LiteSpeedサーバーを扱っているレンタルサーバー会社とプランは以下の通りです。

• ロリポップハイスピードプラン
• ミックスホスト【mixhost】スタンダードプラン
• カラフルボックス【Colorful Box】Box2
• ラッコサーバーRK2
• コアサーバーのV2プラン CORE-X

このプラグインは既存画像をWebPに置き換えたり、HTMLなどのコードを最適化したり、データベースを最適化したりと、画像サイズ以外の情報もリサイズ・圧縮することができる高機能なプラグインです。

もちろん圧縮率も非常に高く、2MBを超える画像も100KB以下まで小さくすることができます。

WebP Converter for Media

WebP Converter for Mediaは、これからアップロードする画像を自動でWebPに変換してくれるプラグインです。

さらに、すでにWordPressにアップロードされている画像も自動でWebPに変換することができます。

先述した通りWebPは画像圧縮率が非常に高く、背景透過やアニメーションにも対応している高機能なファイル形式です。

しかし、他の画像形式と比べるとまだ新しいファイル形式なので、対応していないブラウザでは画像が表示されないという問題点があります。

このWebP Converter for Mediaは、非対応ブラウザでページが表示された場合、元々アップロードされたファイル形式で画像を表示することが可能です。

つまり、WebP対応ブラウザはもちろん非対応ブラウザにも表示される優秀なプラグインといえるでしょう。

Bulk RESIZE

Bulk RESIZEは、ブラウザ上で画像をリサイズ・圧縮できるサービスです。日本語対応なので、安心してご利用ください。また、もちろん無料で利用することができます。

ドラッグ&ドロップで直感的かつ簡単に利用することができ、複数枚の画像でも高速でサイズ変更できるという特徴があります。

なんと150枚の画像でも、約1分で全てリサイズすることが可能です。複数枚リサイズする場合、zipファイル形式でダウンロードする形式となります。

さらに、WebPにも対応している所も重要なポイントと言えるでしょう。

Bulk RESIZEは圧縮率や画質のクオリティも指定できるため、なるべく画質の劣化を抑えながらリサイズすることが可能です。

最初に紹介したSquooshと同じような機能なので、使いやすい方をご利用ください。

画像変更したらPageSpeed Insightsで速度計測

先述した通り、ファイルサイズは大きくすればするほど読み込み速度が遅くなり、小さくすればするほど読み込み速度が速くなります。

そして、読み込み速度が速ければ訪問者の離脱率を下げることができて、SEOに有利に働くのです。

そこで実際に画像をリサイズ・圧縮したら、ページの読み込み速度を計測してみることをおすすめします。

ページの読み込み速度は、Googleが無料で提供しているPageSpeed Insightsというツールで計測することが可能です。
このツールは、計測したいページのURLを入力して「分析」をクリックするだけで、Webページの読み込み速度を100点満点のスコアで表示してくれるサービスです。
具体的には、以下6つの分析項目があります。

• 実際のユーザーの環境で評価する
• パフォーマンスの問題を診断する
• 改善できる項目
• 診断
• 合格した監査

1度の分析で、PCとモバイル両方のデバイスにおける表示速度を計測してくれます。
PageSpeed Insightsにおけるスコアは、大きく以下の3段階に分けられます。

点数	評価
90〜100（緑）	速い
50〜89（オレンジ）	平均的
0〜49（赤）	遅い

このツールは、さまざまな指標でページの読み込み速度を計測してくれます。そして速度だけでなく、ページの改善点についても指摘してもらえるのが特徴です。

さらに、サイトの中で合格している点についても知ることができます、
具体的には、以下の6つのパフォーマンス指標について診断されます。

• 最初のコンテンツ表示にかかるまでの時間（FCP）
• メインコンテンツの読み込み時間（LCP）
• 視覚的な安定性（CLS）
• ページの読み込み時間（SI）
• Webページのインタラクティブ性（TTI）
• 合計ブロック時間（TBT）

これらの指標を計測した上で「次世代フォーマット（WebP）での画像の配信」や「使用していないCSSの削減」などの改善点を教えてくれます。

基本的には全ての指標で緑色の90点以上を目指すべきですが、技術的な改善が求められる部分もあるため、まずは画像サイズを変更して読み込み速度の改善を目指しましょう。

おすすめのフリー素材サイト

最後におすすめのフリー素材サイトをご紹介します。全て無料で利用できるサイトなので、写真やイラストの素材に困ったらサイズを変更した上でご使用ください。

Pixabay

Pixabayは、2,700万点以上の写真・イラスト・ベクター素材・動画をダウンロードできるフリー素材サイトです。

全ての素材が無料で使える上に、原則として著作権の帰属表示不要なので安心して利用することができます。一部の写真素材はライセンスが異なるため、ダウンロードする前に右側に「Pixabay License」と書かれていることをご確認ください。

もちろん商用利用も可能で、自由に改変・加工・配布することができるフォトストックサービスです。

会員登録も不要なので、すぐに利用することができます。

対応しているファイル形式は「jpeg」「png」「gif」の3種類なので、WebPを利用したい場合はファイル形式を変更する必要があることにご注意ください。

また、広告としてshutterstockなどの有料素材サイトへのリンクがあるので、無料で利用したい場合はPixabayのサイト内で完結するようにしましょう。

日本語に対応しているため、例えば「森」と検索すれば3万点以上の素材が選出されます。

Pexels

Pexelsは、Pixabayと同じく著作権の帰属表示をする必要がなく、商用利用可能のフリー素材サービスです。

イラストやベクター画像は取り扱っていませんが、写真と動画の素材をフリーで利用することができます。

Pexelsの特徴は非常に解像度が高く、写真がおしゃれでハイクオリティなのが特徴です。他の素材サイトにはない個性的な素材も多く、加工して使用することもできます。

Pexelsはドイツ発の素材サイトなので、日本の画像は少なめです。非常にハイクオリティな素材がたくさんありますが、日本らしい画像を使用したい方は希望する画像が見つからないかもしれません。

Unsplash

Unsplashは、プロの写真家が登録しているストックフォトサービスで、クオリティの高い写真を無料で利用することができます。

素材の数は40万枚を超えているため、きっとお気に入りの素材が見つかるでしょう。

これまでに紹介したサイトと同じく、著作権表記をする必要がなく、会員登録不要で利用することができます。ただし、Unsplashにある素材をそのまま販売したり、Unsplashにある素材を利用して似たようなサービスを作ることはできません。

商用利用可能で、加工して使用することもできます。

無料で使えるのにもかかわらず、有料レベルのハイクオリティな素材が使えるのが魅力的なサービスです。

一方で、イラストやベクター画像の素材はないため、そういった素材を利用したい方はPixabayを利用することをおすすめします。

まとめ

ここまで解説してきたように、WordPressにおける最適な画像サイズは以下の通りです。

アイキャッチ画像サイズ	幅1,200px × 高さ675px
記事内の画像サイズ	横幅をサイトの幅に合わせて、アスペクト比を16：9にする
ファイルサイズ（容量）	200KB以下

特にアイキャッチ画像のサイズは、Google Discoverに表示されやすいこのサイズに合わせるようにしましょう。

また、ファイルサイズに関しては小さければ小さいほどページの読み込み速度が速くなり、SEOにも有利に働きやすいため、意識して小さくすることをおすすめします。

2つの意味で画像サイズを最適化して、ユーザーにとってより良いサイト・ページを目指してみてはいかがでしょうか。