WordPressブログの画像サイズの目安と最適化方法

フェニック

WordPressに使う画像サイズの目安が知りたいな。スマホの画像をそのまま使っちゃだめ？

今回はこのようなお悩みにお答えします。

スマホ画像をWordPressにそのままアップロードしてはいけません。

ブログが表示されるまでに時間がかかり、読者さんに逃げられてしまいます。

ただWordPressの画像をどのように扱えばいいか、わからないですよね。

そこで今回はWordPressに使う画像サイズ(写真)を最適化させる方法を解説します。

また画像サイズの目安も解説します。

この記事を読めばブログのページ表示速度が大幅にアップします。

気になる方は、記事をのぞいてみてください。

追記です。
WordPressを立ち上げたばかりの人には「WordPressの初期設定」の記事もおすすめです。

WordPressブログの画像サイズには2種類の意味がある

WordPressに挿入する画像サイズには2種類の意味があります。

画像サイズ(px)とは画像の大きさのこと

画像サイズ(px)とは画像の大きさのことです。

単位は画素数(px)です。

上の画像は幅が500pxで高さが300pxです

この時、画像サイズは幅500px×高さ300pxと表現されます。

ファイズサイズ(bytes)とは画像容量のこと

Web画像の場合、画像サイズと似た意味でファイルサイズという言葉があります。

ファイルサイズは画像容量のことで、単位はbytesで表します。

上の画像の画像サイズは幅500px×高さ300pxです。またファイルサイズは20KBです。

この時、画像容量は20KBと表現されます。

WordPressブログに最適な画像サイズ(写真)の目安

この項目ではWordPressにおける「画像サイズ」と「画像容量」の目安についてそれぞれ解説します。

WordPressブログの画像サイズの目安は幅800px以下

画像サイズの目安を幅800px以下としたのは、WordPressのメインカラム幅が800px以下だからです。

幅800px以上の画像を挿入しても、画像は大きく表示されません。

画像容量が大きくなるだけで、ページ表示速度は低下します。

メインカラム幅はWordPressテーマによって異なる

メインカラム幅はWordPressのテーマによって異なります。

参考までにWordPressテーマごとのメインカラム幅を記載します。

メインカラム幅の最大値はCocoonの800pxです。

よって画像サイズの目安を幅800px以下としました。

WordPressのメインカラム幅の調べ方

Google Chromeのデベロッパーツールを使ったメインカラム幅の調べ方を解説します。

STEP

Google Chromeのデベロッパーツールを開く

デベロッパーツールを開き方

• Windowsは「F12キー」をクリック
• MacOSは「Command＋Option＋Iキー」をクリック

STEP

【カーソルマーク】をクリック

STEP

本文や画像が青く表示される場所をクリック

STEP

【Computed】をクリック

STEP

青い枠の数値をチェックする

青い枠には「712.906×401」と記載されています。

この場合、WordPressのメインカラム幅は713pxです。

WordPressブログの画像容量の目安は200KB以下

WordPressに挿入する画像容量は軽いほどよいです。

ページ表示速度が速くなるからです。

Googleはページ表示速度の改善に努めることを推奨しています。

ページの読み込み時間を最適化します。表示の速いサイトはユーザーの満足度を高め、ウェブ全体の質を向上させます（特にインターネット接続速度が遅い場合）。PageSpeed Insights や Webpagetest.org などのツールを使用してページの読み込み速度をテストすることをおすすめします。

引用：Googleセントラル-ウェブマスター向けガイドライン

当ブログは画像1枚当たりの容量を200KB以下に圧縮したところ、ページ表示速度が劇的に改善しました。

Page Speed Insightsでパフォーマンススコアを測定すると、モバイルでも90点以上を常に計測しています。

スマホで撮った写真は、画像容量がとても重くなります。

ただし画像容量を200KB以下に収めることは十分可能です。

WordPressブログの画像サイズ(写真)を最適化する方法

この項目ではWordPressの画像サイズを最適化する方法を解説します。

画像サイズはWordPressのメディア設定でリサイズする

WordPressに挿入する画像は【メディア設定】で指定したサイズにリサイズされます。

【メディア設定】の管理画面は、ダッシュボードの【設定】⇒【メディア】にあります。

【メディア設定】では「サムネイルサイズ」「中サイズ」「大サイズ」の3つの設定が必要です。

画像の「大サイズ」は幅の上限を800px以下に設定する

画像の「大サイズ」の幅の上限は、WordPressのメインカラム幅(800px以下)に設定しましょう。

「大サイズ」の画像は、メインカラムに画像を1列挿入するときに使うためです。

高さの上限は0pxに設定しましょう。

縦横比率を変えずに、画像の大きさをリサイズできます。

①【メディア設定】で画像をリサイズすると画像容量は低下する

【メディア設定】で画像をリサイズすると、画像容量は大幅に低下します。

スマホで撮った竹林の写真はリサイズ後、画像容量が約2.1MBも低下しました。

WordPressブログ運用前に、必ず【メディア設定】で幅の上限を設定しましょう。

②リサイズした「大サイズ」の画像をWordPressに挿入する方法

ブロックエディタでの挿入方法を解説します。

まずWordPressに画像をそのまま挿入します。

次に投稿画面右側にある【画像サイズ】から「大」を選択すると、リサイズした画像に変換できます。

画像の「中サイズ」と「サムネイルサイズ」の幅と高さの上限を0pxに設定する

幅と高さの上限を0pxにする理由は「中サイズ」と「サムネイルサイズ」の画像を自動生成させないためです。

「中サイズ」と「サムネイルサイズ」の画像を使用することは、ほとんどありません。

Shota

「サムネイル」と「アイキャッチ」は別物です。

無駄な画像を自動生成させないことで、サーバーの使用容量を抑えることができます。

フェニック

サーバーの使用容量が増えるとどうなるの？

Shota

ブログのバックアップに時間がかかるんだ。

ブログのバックアップ時間を短縮させるためにも、画像の「中サイズ」と「サムネイルサイズ」の幅と高さの上限は0pxに設定しましょう。

なおプラグインを使ったブログのバックアップ方法は、以下の記事で解説しています。

【メディア設定】がデフォルト値の場合に自動生成される画像枚数

【メディア設定】がデフォルト値の場合「竹林の画像」をアップロードすると、画像が12枚も自動生成されました。

【メディア設定】がデフォルト値の場合、サーバー容量がすぐに圧迫されます。

無駄な画像を自動生成させないように、画像の「中サイズ」と「サムネイルサイズ」の幅と高さの上限は0pxに設定しましょう。

medium_large_sizeの幅と高さを0pxに設定する

WordPressが生成する「幅768px×高さ?px」の画像も、自動生成を抑制できます。

アドレスバーに「https://「ドメイン名」/wp-admin/options.php」と入力してください。

隠しページが表示されます。

隠しページにログインしたら「medium_large_size」の項目を、以下のように設定します。

【変更を保存】をクリックすれば完了です。

これで「幅768px×高さ?px」の画像の自動生成を抑制できます。

画像容量はWordPressのプラグインで圧縮する

画像容量を200KB以下に圧縮するには、画像をWebP化することが必須です。

WebPは、Googleが開発した次世代画像フォーマットです。

圧縮しても画質が落ちにくく画像容量が軽いのが特徴です。

画像のWebP化はプラグインを使うと簡単です。

スマホで撮った竹林の写真を200KB以下に圧縮する方法を解説します。

フェニック

またスマホで撮った竹林の写真！

Shota

細かいことは気にしないで！

①EWWW Image Optimizerで画像容量を圧縮する

EWWW Image Optimizerは、以下の方法で画像を圧縮してくれます。

EWWW Image Optimizerで竹林の写真を圧縮した場合、画像容量は72KBになりました。

スマホの写真でも、EWWW Image Optimizerを使えば画像容量を200KB以下に圧縮できます。

EWWW Image Optimizerの使い方は、以下の記事で解説しています。

画像をWebP変換できるその他の画像圧縮プラグイン

EWWW Image Optimizer以外にも、画像をWebP変換できるプラグインはたくさんあります。

その中でも以下の2つのプラグインがおすすめです。

EWWW Image Optimizerを使うと不具合が出る場合があります。

その場合は上記の2つのプラグインをお試しください。

②LiteSpeed Cacheで画像容量を圧縮する

LiteSpeed Cacheは、ページ表示速度を向上させるWordPressプラグインです。

LiteSpeed Cacheにも画像圧縮機能があります。

LiteSpeed Cacheで竹林の写真を圧縮した場合、画像容量は100KBになりました。

スマホの写真でも、LiteSpeed Cacheを使えば画像容量を200KB以下に圧縮できます。

LiteSpeed Cacheは「LiteSpeedサーバー」専用のプラグイン

LiteSpeed Cacheは「LiteSpeedサーバー」専用プラグインです。

そのため使用できる人は限られます。

LiteSpeedサーバーを扱っているレンタルサーバー会社と料金プランは以下になります。

「LiteSpeedサーバー」を使用している人はLiteSpeed Cacheで画像を圧縮しましょう。

LiteSpeed Cacheの使い方は、以下の記事で解説しています。

WordPressブログの画像サイズ(写真)のまとめ

今回はWordPressに使う画像サイズの目安と、最適化方法を解説しました。

当サイトではWordPressの初期設定について、豊富にコンテンツを用意しています。

以下の記事もあわせて参考にしてください。

WordPressの画像サイズの質問集

WordPressにアップロードする画像サイズの制限を上げる方法

WordPressにアップロードする画像サイズの制限は、サーバーのPHPファイルを書き換えることで変更可能です。

書き換える項目は以下の3つです。

3つの値の大きさは、以下の順番に設定する必要があります。

memory_limit > post_max_size > upload_max_filesize

post_max_sizePOSTデータに許可される最大サイズを設定します。この設定は、ファイルアップロードにも影響します。大きなファイルをアップロードするには、この値をupload_max_filesize より大きく設定する必要があります。一般的にmemory_limit は、post_max_sizeよりも大きく する必要があります。

引用：PHP Manual

今回はアップロードする画像サイズの制限を、64MBから128MBに引き上げる方法を解説します。

コアサーバーを例に解説します。

【ウェブ】⇒【PHP設定】をクリックします。

「memory_limit」を以下のように設定します。

設定が完了したら【追加】をクリックしましょう。

次に「post_max_size」を以下のように設定します。

設定が完了したら【追加】をクリックしましょう。

最後に「upload_max_filesize」を以下のように設定します。

設定が完了したら【追加】をクリックしましょう。

「PHP.INI OVERRIDE ADDED」と表記されたら設定は完了です。

WordPressダッシュボードから【メディア】を表示させます。

画像の最大アップロードサイズが、128MBに変更されています。

WordPressに挿入する画像サイズを変更できない

まずWordPressの投稿画面で画像挿入します。

次に画面右の「画像サイズ」の項目から、画像サイズを変更できます。

WordPressの画像を自動でリサイズする方法

EWWW Image Optimizerを使えば、アップロードする画像を自動でリサイズできます。

EWWW Image Optimizerをインストール後、ダッシュボードから【設定】⇒【EWWW Image Optimizer】をクリックします。

基本設定の【画像のリサイズ】を以下のように設定します。

設定が完了したら【変更を保存】をクリックしましょう。

これでWordPressにアップロードした画像は、幅1,600px以下に自動でリサイズされます。

またダッシュボードから【メディア】⇒【一括最適化】をクリックすると、既にWordPressに掲載されている画像も、幅1,600px以下に自動でリサイズされます。

WordPressの画像サイズをプラグイン以外で最適化する方法

「Bulk RESIZE」を利用すれば、オンラインで画像を最適化できます。

今回はスマホで撮影した「うな丼」の画像サイズを「Bulk RESIZE」で最適化します。

まず「Bulk RESIZE」にアクセスします。

「Bulk RESIZE」にドラッグ＆ドロップで画像をアップロードします。

画面が切り替わるので「幅」を選択します。

幅の項目を以下のように設定しましょう。

設定が完了したら【開始】をクリックします。

「完了しました」と表示されたら、最適化された画像が自動でダウンロードされます。

「Bulk RESIZE」で「うな丼」の画像サイズを最適化すると、サイズと容量は以下のようになりました。

プラグインを使わずに、画像サイズを最適化したい方は「Bulk RESIZE」をお試しください。