WordPressテーマSWELL導入方法を見てみる

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

WordPressブログの画像サイズの目安と最適化方法(スマホ対応)
フェニック

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

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

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

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

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

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

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

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

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

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

さくっと知りたい方は読みたいリンクをクリックしてください。

目次

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

中休み

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

画像サイズの種類画像サイズの意味
画像サイズ(px)画像の大きさ
ファイルサイズ(bytes)画像容量

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

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

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

幅が500pxで高さが300pxの画像

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

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

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

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

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

ファイルサイズは20KBの画像

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

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

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

中休み
画像サイズの種類画像サイズの意味
画像サイズ(px)画像の大きさ
ファイルサイズ(bytes)画像容量

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

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

WordPressのメインカラム幅の解説画像

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

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

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

画像の高さは気にしなくてOKです。

幅と同時に画像の高さを設定すると、画像デザインが崩れるためです。

メインカラム幅は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です。

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

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

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

STEP
Google Chromeのデベロッパーツールを開く
Google Chromeのデベロッパーツールを開いた画像
デベロッパーツールを開き方
  • Windowsは「F12キー」をクリック
  • MacOSは「Command+Option+Iキー」をクリック
STEP
【カーソルマーク】をクリック
【カーソルマーク】をクリックした画像
STEP
本文や画像が青く表示される場所をクリック
本文や画像が青く表示される場所をクリック
STEP
【Computed】をクリック
【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のメディア設定でリサイズする

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

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

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

メディア設定の画像
メディア設定のデフォルト値

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

【メディア設定】のデフォルト値は以下になります。

項目サムネイルサイズ中サイズ大サイズ
幅の上限150px300px 1024px
高さの上限150px300px 1024px

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

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

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

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

項目大サイズの設定値
幅の上限800px以下
高さの上限0px

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

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

①【メディア設定】で画像をリサイズすると画像容量は低下する
スマホで撮った竹林の写真
スマホで撮った竹林の写真

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

リサイズ前の画像容量
リサイズ前の画像容量
リサイズ後の画像容量
リサイズ後の画像容量

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

項目画像容量画像サイズ
リサイズ前の竹林の写真2.38MB3264px×2448px
リサイズ後の竹林の写真243KB800px×600px

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

②リサイズした「大サイズ」の画像をWordPressに挿入する方法
【画像サイズ】から「大」を選択した画像

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

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

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

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

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

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

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

Shota

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

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

フェニック

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

Shota

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

バックアップしている時の画像
バックアップしている時の画像

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

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

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

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

自動生成された竹林の画像ファイル①
自動生成された竹林の画像ファイル②
自動生成された画像画像の生成要因
①竹林の画像-100px×100px.jpgWordPressテーマにより自動生成
②竹林の画像-1024px×768px.jpg【メディア設定-大サイズ】により生成
③竹林の画像-128px×68px.jpgWordPressテーマにより自動生成
④竹林の画像-150px×150px.jpg【メディア設定-サムネイルサイズ】により生成
⑤竹林の画像-1536px×1152px.jpgWordPressにより自動生成
⑥竹林の画像-160px×90px.jpgWordPressテーマにより自動生成
⑦竹林の画像-2048px×1536px.jpgWordPressにより自動生成
⑧竹林の画像-300px×225px.jpg【メディア設定-中サイズ】により生成
⑨竹林の画像-320px×180px.jpgWordPressテーマにより自動生成
⑩竹林の画像-768px×576px.jpgWordPressにより自動生成(スマホ用)
⑪竹林の画像-scaled.jpg(2560px×1920px)WordPressにより自動生成(フルサイズ用)
⑫竹林の画像.jpg元の画像(3264px×2448px)

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

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

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

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

アドレスバーに「https://「ドメイン名」/wp-admin/options.php」と入力した画像

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

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

「medium_large_size」の設定方法

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

項目設定値
medium_large_size_h0px
medium_large_size_w0px
【変更を保存】をクリック

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

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

レンタルサーバーのWAF設定がONの時は、隠しページの変更を保存できません。

隠しページの設定を変更する際は、一時的にWAF設定をOFFにしてください。

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

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

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

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

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

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

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

フェニック

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

Shota

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

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

EWWW Image Optimizer

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

  • メタデータなど画像の余分な情報をそぎ落とす
  • 縦横比を変えずに画像サイズ(px)を小さくする
  • 画像をWebPに変換する

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

圧縮後の画像容量
圧縮後の画像容量
圧縮後の画像サイズ
圧縮後の画像サイズ
項目画像容量画像サイズ
圧縮前の竹林の写真2.38MB  幅3264px×高さ2248px
圧縮後の竹林の写真72KB 幅800px×高さ600px

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

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

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

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

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

Imagify – Optimize Images & Convert WebP
ShortPixel Image Optimizer
WebP変換できる画像圧縮プラグイン

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

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

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

LiteSpeed Cacheの画像

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

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

  • QUIC.cloudとブログを連携させて画像を圧縮する
  • QUIC.cloudとブログを連携させて画像をWebP化する

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

圧縮後の画像容量
圧縮後の画像容量
圧縮後の画像サイズ
圧縮後の画像サイズ
項目画像容量画像サイズ
圧縮前の竹林の写真2.38MB  幅3264px×高さ2248px
圧縮後の竹林の写真100KB 幅800px×高さ600px

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

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

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

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

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

サーバー会社とプラン名初期費用初年度月額費用
ロリポップハイスピードプラン0円825円
カラフルボックス【Colorful Box】Box20円874円
ミックスホスト 【mixhost】スタンダードプラン0円1,078円
ラッコサーバーRK20円1,210円
コアサーバー のV2プラン CORE-X1,650円
⇒ドメイン同時取得で0円
528円
※月額料金は1年契約の場合

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

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

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

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

WordPressの画像サイズのまとめ
  • 画像サイズの目安は幅800px以下
  • 画像容量の目安は200KB以下
  • 画像サイズの最適化はメディア設定で行う
  • 画像容量の最適化はプラグインで行う

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

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

WordPressの画像サイズの質問集

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

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

アップロードする画像サイズの制限(64MB)
アップロードする画像サイズの制限(64MB)

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

項目項目の解説
①memory_limitメモリ使用量
②post_max_sizePOSTデータが許可する最大サイズ
③upload_max_filesizeアップロードするファイルの最大サイズ

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

memory_limit > post_max_size > upload_max_filesize

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

引用:PHP Manual
アップロードする画像サイズの制限(128MB)
アップロードする画像サイズの制限(128MB)

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

項目PHPの設定値
memory_limit368MB
post_max_size256MB 
upload_max_filesize128MB

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

【ウェブ】⇒【PHP設定】をクリック

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

「memory_limit」の設定方法

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

項目設定方法
settingmemory_limit
368M

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

「post_max_size」の設定方法

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

項目設定方法
settingpost_max_size
256M

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

「upload_max_filesize」の設定方法

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

項目設定方法
settingupload_max_filesize
128M

 

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

「PHP.INI OVERRIDE ADDED」と表記された画像

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

アップロードする画像サイズの制限(128MB)

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

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

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

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

画面右の「画像サイズ」の項目から画像サイズを変更可能

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

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

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

ダッシュボードから【設定】⇒【EWWW Image Optimizer】をクリック

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

基本設定の【画像のリサイズ】の設定方

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

項目幅の上限高さの上限
画像のリサイズ16000

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

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

ダッシュボードから【メディア】⇒【一括最適化】をクリック

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

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

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

うな丼の画像

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

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

「Bulk RESIZE」にドラッグ&ドロップで画像をアップロード

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

幅の項目の設定方法

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

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

項目設定方法
画像800ピクセル
画像フォーマットJPEG
画像の背景デフォルト設定でOK
画質80%

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

完了しましたと表示された画像

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

画像サイズ(px)の情報
画像サイズ(px)の情報
画像容量(KB)の情報
画像容量(KB)の情報

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

画像画像サイズ画像容量
元の画像幅1,904px×高さ2,268px898KB
最適化された画像幅800px×高さ953px127KB

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントに日本語が含まれない場合は表示できません(スパム対策)

目次