SEOの基本を順番どおりに学べる

独学でブログを育てたい人向けに、用語と手順をやさしく整理しています。

入門ガイドを開く

WebP変換のやり方(WordPress)|画像を圧縮して表示速度を上げる手順と、当サイトの実測データ

WebP変換のやり方(WordPress)|画像を圧縮して表示速度を上げる手順と、当サイトの実測データについてのアイキャッチ画像 表示・計測と運用

ブログに載せる画像のファイルサイズを、あまり気にしたことがないという方も多いのではないでしょうか。

実は、画像のファイルサイズは、サイトの表示速度に大きく影響する要素の一つです。

この記事では、画像が重いとサイトが遅くなる理由から、圧縮の方法、WebP形式に変換するメリットまでを解説します。当サイトの画像を実際に調べた数字も、紹介します。

記事のポイント
  • 画像のファイルサイズが大きいと、表示速度が落ちてSEOにも影響しうる。
  • アップロード前の圧縮や、プラグインによる自動圧縮で対策できる。
  • WebP形式なら、同じ画質のままファイルサイズを抑えられる。
  • 当サイトの画像を調べると、JPEGは平均170KB、WebPにすると平均55KB(約67%小さい)。ただし、WebPを作るだけでは使われない場合がある。

画像が重いとサイトが遅くなる理由

画像が重いとサイトが遅くなる理由を、表示速度がSEOに影響する・スマホ回線ではより顕著に表れるという2つに分けて図解したインフォグラフィックです。
  • 表示速度がSEOに影響する
  • スマホ回線ではより顕著に表れる

表示速度がSEOに影響する

画像のファイルサイズが大きいと、読者のブラウザがそのぶん多くのデータを読み込む必要があり、ページの表示に時間がかかってしまいます。

表示速度はCore Web Vitalsの評価項目にも関わっており、SEOの観点からも軽視できない要素です。

スマホ回線ではより顕著に表れる

パソコンの高速な回線では気にならない読み込み時間も、スマートフォンのモバイル回線では大きな遅延として感じられることがあります。

多くの読者がスマートフォンからアクセスすることを踏まえると、画像の軽量化は読者の使い勝手を左右する重要な対策です。

Googleの公式ガイドでの扱い

Googleの画像に関する公式ガイドでは、Google検索がサポートする画像形式として、BMP・GIF・JPEG・PNG・WebP・SVG・AVIFが挙げられています。WebPにしても、検索の対象から外れることはありません。

また、画像はページのサイズの大きな要因になるため、画像の最適化と、PageSpeed Insightsでの速度の確認が、推奨されています。PageSpeed Insightsの使い方は、別の記事で解説しています。

画像を圧縮する方法

画像を圧縮する方法を、アップロード前に圧縮しておく・WordPressのプラグインで自動圧縮するという2つに分けて図解したインフォグラフィックです。
  • アップロード前に圧縮しておく
  • WordPressのプラグインで自動圧縮する

アップロード前に圧縮しておく

画像編集ソフトやオンラインの圧縮サービスを使って、WordPressにアップロードする前にあらかじめファイルサイズを小さくしておく方法があります。

画質をほとんど落とさずにファイルサイズだけを削減できるケースも多く、手間をかけるだけの価値があります。

WordPressのプラグインで自動圧縮する

画像を圧縮する専用のWordPressプラグインを導入すれば、アップロードのたびに自動で圧縮処理を行ってくれます。

毎回手動で圧縮する手間を省きたい場合は、こうしたプラグインの導入を検討するとよいでしょう。

当サイトの画像の実測(2026年10月7日)

当サイトのメディアライブラリにある画像を、WordPressの管理画面の情報から、集計しました。

項目集計の結果
画像の数652枚(JPEG 632枚・PNG 20枚)
1枚あたりのファイルサイズ平均174KB・中央値137KB(最小18KB・最大843KB)
500KBを超える画像6枚(すべてPNGで、サイト公開の初期に作った図)
画像の合計サイズ約111MB

10月7日に新しく作った画像21枚は、79KB〜177KBでした。画像生成サービスで作った画像は、元のままだと1.8MBほどになることもあります。JPEGで保存し直し、横1280pxに縮小して保存すると、80〜180KB前後まで小さくなります。

最初の公開時に作ったPNGの図は、いまでも、サイトの中で重い画像として残っています。PNGは、文字や線画の図には向いていますが、ファイルサイズが大きくなりやすい形式です。

当サイトの画像最適化プラグインの設定

当サイトは、画像最適化プラグイン(EWWW Image Optimizer)を使っています。管理画面で確認した設定(2026年10月7日)は、次のとおりです。

  • 画像のメタデータ(撮影情報など、画像の見た目に関係しないデータ)の削除: オン
  • WebPへの変換(アップロード時に、WebPのコピーを自動で作る): オン
  • 遅延読み込み(画面に入る直前に、画像を読み込む): オン
  • 自動スケーリング(表示サイズに合わせて、画像のサイズを調整する): オン

WebP形式に変換するメリット

WebP形式に変換するメリットを、同じ画質でファイルサイズを抑えられる・対応状況を確認してから使うという2つに分けて図解したインフォグラフィックです。
  • 同じ画質でファイルサイズを抑えられる
  • 対応状況を確認してから使う

同じ画質でファイルサイズを抑えられる

WebPは、Googleが開発した比較的新しい画像形式で、従来のJPEGやPNGと比べて、同程度の画質でもファイルサイズを小さく抑えられる特徴があります。

サイト全体の画像をWebP化することで、表示速度の改善が期待できます。

対応状況を確認してから使う

WebPは多くのブラウザに対応していますが、利用しているテーマやプラグインによっては変換や表示の設定が必要になる場合があります。

WebPを作っただけでは、使われない場合がある(当サイトの確認)

当サイトは、WebPへの変換をオンにしています。そのため、画像ごとに、WebPのコピーが作られています。ところが、実際にブラウザへ届けられている画像を調べると、状況が違いました。

確認したこと(2026年10月7日)結果
WebPのコピーが存在するか(25枚を確認)25枚すべてに、WebPのコピーがあった
JPEGのサイズ(20枚の平均)170KB → WebPのコピーは55KB(約67%小さい)
PNGのサイズ(5枚の平均)428KB → WebPのコピーは302KB(約30%小さい)
WebPに対応していると伝えて、画像を取得したときWebPではなく、元のJPEGが返ってきた
記事のHTMLの中に、WebPの画像が出てくるか0件(元のJPEG・PNGのまま)

つまり、当サイトでは、WebPのコピーは作られているものの、読者のブラウザには、まだ届けられていません。WebPを使うには、変換に加えて、「どうやって届けるか」の設定が必要です。

当サイトで使っているプラグインには、WebPを届ける方法として、「JavaScriptでの書き換え」と「pictureタグでの書き換え」が用意されています。どちらも、当サイトでは、オフのままです。

PageSpeed Insightsでも、画像の配信を改善すると、1,379KiB(約1.3MB)減らせる可能性がある、と指摘されました(トップページ・モバイル・2026年10月7日)。

WebPを使うときの手順

  1. 画像最適化のプラグインで、WebPへの変換を有効にする(アップロード時に、WebPのコピーが作られる)
  2. 既存の画像は、プラグインの「一括最適化」で、まとめて変換する
  3. WebPを届ける方法(書き換えの方式)を選ぶ。選ぶ前に、記事のバックアップを取っておく
  4. キャッシュをクリアして、記事を開き、表示が崩れていないかを確認する
  5. ブラウザの開発者ツールなどで、画像がWebPで届いているかを確認する

当サイトは、まだ配信の設定を変えていません。設定を変えたあとに、画像の配信量やスコアがどう変わったかは、確認できしだい、この記事に追記する予定です。

形式特徴
JPEG写真向き。圧縮率が高いが画質が劣化しやすい
PNG透過やイラスト向き。ファイルサイズは大きくなりやすい
WebPJPEG・PNGと同等以上の画質を、より小さいサイズで実現
ナナ
ナナ

全部の画像をWebPに変換すれば、それだけで解決するのかな?

リク
リク

変換は効果的だけど、そもそも大きすぎる画像を使わないことも大切だよ。両方を意識するとより効果的なんだ。

画像の軽量化でよくある質問

WebPにすると、検索順位は上がりますか?

WebPにしただけで、順位が上がるとは、断言できません。Googleの公式ガイドでは、WebPも、JPEGやPNGと同じく、サポートされている形式のひとつとして紹介されています。画像を軽くして、ページの表示を速くすることで、読者にとっての使いやすさを良くする、という位置づけです。

画像は、何KBくらいにすればよいですか?

Googleの公式ガイドには、何KBにすべき、という基準は書かれていません(確認した範囲)。目安として、当サイトでは、最近の記事の画像を、横1280pxで、80〜180KB前後に収めています。写真の多いサイトでは、また別の考え方が必要です。

PNGとJPEG、どちらを使えばよいですか?

写真は、JPEGが向いています。文字や線画の図は、PNGでも見やすくなりますが、ファイルサイズが大きくなりやすいです。当サイトでは、最近の図は、JPEGで保存して、サイズを抑えています。

プラグインを入れずに、WebP化できますか?

画像編集ソフトや、変換サービスを使えば、アップロード前に、WebPに変換できます。ただし、記事の数が増えると、手作業は大変です。画像の数が多いブログは、アップロード時に自動で変換するプラグインが、向いています。

まとめ:軽い画像は読者にもGoogleにも優しい

画像の圧縮とWebP変換について、まずアップロード前に画像を圧縮することから、必要に応じてWebP形式に変換するという流れを2ステップで図解したインフォグラフィックです。
  • 画像のファイルサイズは、サイトの表示速度に直結する。圧縮とWebP変換を組み合わせることで、画質を保ちながら軽量化できる。
  • 当サイトの画像は、JPEGが平均170KB、WebPにすると平均55KB(約67%小さい)。
  • WebPは、作るだけでは使われない場合がある。「変換」と「配信」の両方を確認する。

画像の軽量化は、一度仕組みを整えてしまえば、あとは大きな手間をかけずに続けられる対策です。

表示速度の改善は、読者にとっての使い勝手だけでなく、Googleからの評価にも良い影響を与えます。できるところから取り組んでみましょう。

SEOを基礎から順番に学びたい方は、SEO入門の進め方(はじめに)と学習ステップもあわせてご覧ください。

コメント