SEOで有効な画像サイズは？表示速度改善とWebPへの変換方法を紹介

SEOにおける画像サイズ最適化が重要な理由

サイト運営において画像は欠かせない要素ですが、その扱い方次第でSEO評価は大きく変わります。ここでは、なぜ画像サイズの最適化がSEOにとって重要なのか、まずはその背景を理解しましょう。

画像サイズがSEO評価に与える3つの影響

画像のファイルサイズが大きいと、SEOに以下の3つの悪影響を及ぼします。

まず、ページ表示速度への影響 です。一般的なWebページでは、画像がページ全体の容量の60〜70%を占めるといわれています。画像が重ければ重いほど、ブラウザがページを読み込むのに時間がかかり、結果としてCore Web Vitals（特にLCP）のスコアが悪化します。Googleは2021年以降、Core Web Vitalsを検索ランキングの要因として明示しているため、画像最適化はSEO施策の一つとして重要です。

2つ目に、モバイルユーザビリティへの影響 です。現在、Googleはモバイルファーストインデックスを採用しており、スマートフォンでの表示品質が検索順位に直結します。モバイル回線では通信速度が不安定な環境も多く、重い画像はユーザーの離脱を招きやすくなります。モバイルでの快適な閲覧体験を提供できるかどうかが、SEO評価の分かれ目となるのです。

3つ目に、クローラビリティと画像検索への影響 です。Googleのクローラーは限られた時間内で各ページを巡回するため、ページが重いとクロールの効率が下がります。また、画像検索においても、適切なサイズと形式で配信されている画像の方が評価されやすい傾向があります。画像最適化は、通常検索だけでなく画像検索からの流入機会にも影響を与える施策なのです。

表示速度が遅いとSEOでどれだけ不利になるのか

表示速度の遅さがSEOに与える影響は、数値として明確に現れます。Googleの調査データによれば、ページの読み込み時間が1秒から7秒に長くなると、サイト訪問者が直帰する確率が113%増加することが明らかになりました。また、ページ上の要素数（テキスト、タイトル、画像など）が400から6,000に増加すると、コンバージョン確率は95%低下することも報告されています。

参照：
Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed｜Google

Googleは公式に「ページエクスペリエンスシグナル」として、Core Web Vitalsを検索ランキングの要因に含めています。中でもLCP（Largest Contentful Paint）は、ページ内で最も大きなコンテンツが表示されるまでの時間を測る指標であり、多くの場合、その「最も大きなコンテンツ」は画像です。LCPが2.5秒以内であれば良好、4.0秒を超えると改善が必要とされており、画像の最適化はこの数値改善に直結します。

参照：Core Web Vitals と Google 検索の検索結果について｜Google 検索セントラル

SEOに最適な画像サイズ

画像最適化を正しく進めるには、まず「画像サイズ」という言葉が持つ2つの意味を区別する必要があります。ここでは、ファイルサイズとピクセルサイズの違い、そしてSEOに適した具体的な目安を理解していきましょう。

「画像サイズ」の2つの意味を正しく理解する

画像サイズには、ファイルサイズ（容量） と ピクセルサイズ（解像度） という2つの異なるサイズがあります。

ファイルサイズ とは、画像データの容量を指し、KB（キロバイト）やMB（メガバイト）で表されます。これは画像ファイルそのものの重さであり、ページの読み込み速度に直接影響します。SEOで重視すべきなのは、このファイルサイズです。

一方、ピクセルサイズ とは、画像の解像度を指し、横×縦のピクセル数（例：1200×800px）で表されます。これは画像の表示サイズや精細さに関わる要素であり、大きすぎると無駄にファイルサイズが増え、小さすぎると画質が粗くなります。

この2つは、必ずしもサイズの大きさが比例するわけではありません。たとえば、同じ1200×800pxの画像でも、JPEG形式で圧縮率を高めれば50KB程度に抑えられ、PNG形式で保存すれば300KBを超えることもあります。つまり、ピクセルサイズを適切に設定した上で、ファイルサイズをいかに小さくするかが重要です。

SEOにおいては、ページ全体の読み込み速度を改善するためにファイルサイズを最優先で削減しつつ、ユーザーに見せる画質を損なわない範囲でピクセルサイズを調整する、というバランスが求められます。

SEOに適した画像ファイルサイズの目安

では、具体的にどの程度のファイルサイズが適切なのでしょうか。一般的な推奨サイズは、1枚あたり100KB以下が理想的、最大でも200KB程度に収めることが望ましいとされています。ただし、これはあくまで目安であり、画像の用途や内容によって柔軟に判断する必要があります。

用途別に見ると、以下のような考え方ができます。

• アイキャッチ画像：記事の顔となる画像で、ある程度の品質が求められるため、100〜150KB程度
• 本文中の挿入画像：説明を補足する役割が中心のため、50〜100KB程度
• 背景画像：視覚的な装飾が目的であれば、50KB以下に抑えるのが理想
• サムネイル画像：一覧表示用の小さな画像は、30KB以下が目安

Google PageSpeed Insightsでは、最適化されていない画像に対して「次世代フォーマットでの配信」「適切なサイズへの調整」といった具体的な改善提案が表示されます。

しかし、画像サイズに絶対的な正解はありません。たとえば、写真がメインコンテンツとなるポートフォリオサイトであれば、多少ファイルサイズが大きくなっても画質を優先すべき場面もあります。一方、テキストが中心の情報サイトであれば、画像はあくまで補足的な役割なので、ファイルサイズを徹底的に削減するほうがよいでしょう。

画像のピクセルサイズ（解像度）はどう設定すべきか

ファイルサイズと並んで重要なのが、ピクセルサイズ（解像度）の設定です。

Web表示において、画像の解像度は 72dpiが基本とされています。印刷物では300dpi以上が必要ですが、Web上では72dpiで十分鮮明に表示されます。高解像度のまま保存しても、ブラウザ上では表示品質は変わらず、ファイルサイズだけが無駄に大きくなってしまいます。

次に、横幅の推奨サイズです。サイトのコンテンツ幅に合わせて設定するのが基本で、多くの場合、800〜1200px程度が適切です。たとえば、記事本文の横幅が800pxであれば、画像も800pxで作成すれば過不足ありません。必要以上に大きなサイズで保存すると、ブラウザが自動的に縮小表示することになり、その分の容量が無駄になります。

ただし、レスポンシブ対応を考慮すると、やや大きめのサイズで用意しておく必要もあります。スマートフォンからタブレット、デスクトップまで、様々な画面サイズで表示されることを前提に、1200px程度の横幅で用意しておけば、多くのデバイスで適切に表示されます。

さらに、高解像度ディスプレイへの対応 も視野に入れる必要があります。これらのディスプレイでは、通常の2倍の解像度で表示されるため、画像が粗く見えてしまうことがあります。対策としては、表示サイズの1.5〜2倍のピクセルサイズで画像を用意し、HTML側でサイズ指定して縮小表示させる方法があります。ただし、この場合はファイルサイズが大きくなるため、後述するレスポンシブ画像（srcset）を活用して、デバイスごとに最適な画像を出し分けるのが理想的です。

最も避けるべきなのは、必要以上に大きな画像をそのままアップロードすることです。スマートフォンで撮影した写真をそのまま使うと、4000×3000px、数MBといったサイズになることも珍しくありません。これはWeb表示には明らかに過剰であり、表示速度を大きく損ないます。アップロード前に必ず適切なサイズへリサイズする習慣をつけることが、画像最適化の第一歩です。

画像形式の選び方とSEOへの影響

画像のファイルサイズは、形式（フォーマット）の選択によって大きく変わります。ここでは、主要な画像形式の特徴と使い分け、そしてSEOで推奨される次世代フォーマットについて解説していきます。

主要な画像形式(JPEG・PNG・WebP・SVG)の特徴と使い分け

Web上で使われる画像形式には、それぞれ異なる特性があります。用途に応じて適切な形式を選ぶことが、ファイルサイズ削減の重要なポイントです。

JPEGは、写真やグラデーションを含む画像に適した形式です。非可逆圧縮という方式を採用しており、圧縮率を高めるほどファイルサイズは小さくなりますが、同時に画質も劣化します。とはいえ、適切な圧縮率（70〜85%程度）であれば、人間の目にはほとんど劣化がわからないレベルで容量を削減できます。透過には対応していないため、背景が必要な画像に向いています。

PNGは、透過が必要な画像やロゴ、アイコンなどに適しています。可逆圧縮のため、何度保存し直しても画質が劣化しない点が特徴です。ただし、JPEGに比べるとファイルサイズが大きくなりやすいため、写真のような複雑な画像には不向きです。透過背景が必要なUI部品や、シャープなエッジを持つ図形などに使うのが基本です。

WebPは、Googleが開発した次世代の画像フォーマットです。JPEGやPNGと比較して、同等の画質を保ちながらファイルサイズを25〜35%程度削減できるとされており、Google PageSpeed Insightsでも推奨されています。透過にも対応しており、写真・イラストの両方に使える汎用性の高さが魅力です。

SVGは、ベクター形式の画像フォーマットで、ロゴやアイコン、シンプルな図形に最適です。拡大・縮小しても画質が劣化せず、テキストデータとして記述されるためファイルサイズも非常に小さく抑えられます。ただし、写真のような複雑な画像には使えません。

形式選択がファイルサイズに与える影響は非常に大きく、たとえば同じ画像をPNGで保存すると300KBになるものが、JPEGでは80KB、WebPでは50KBになる、といったケースも珍しくありません。SEO的には、用途に応じて最も軽量化できる形式を選ぶことが重要です。

WebP形式への移行がSEOに有利な理由

近年、SEOの観点から特に注目されているのがWebP形式です。WebPの最大の利点は、従来の形式と比較した圧縮率の高さにあります。

Googleの公式データによれば、WebPはPNGと比較して約26%、JPEGと比較して約25〜34%ファイルサイズを削減できるとされています。この数値は、ページ全体の読み込み速度に直接影響するため、SEO評価の改善につながります。

参照：ウェブ用の画像形式｜Google

現在では、主要ブラウザのほぼすべてがWebPに対応しています。Google Chrome、Firefox、Microsoft Edge、Safariなど、シェアの大半を占めるブラウザで問題なく表示できるため、実用上の障壁はほとんどありません。

ただし、移行時には注意点もあります。古いバージョンのブラウザではWebPが表示できないため、フォールバック対応が必要です。HTML5の<picture>タグを使えば、WebP対応ブラウザにはWebPを、非対応ブラウザにはJPEGやPNGを自動的に出し分けることができます。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明文">
</picture>

このように記述することで、WebPのメリットを生かしつつ、すべてのユーザーに画像を届けることが可能です。WordPressなどのCMSを使っている場合は、プラグインが自動的にこの処理を行ってくれるため、技術的なハードルは低くなっています。

WebPへの移行は、ページ速度改善とSEO評価向上の両面で効果的な施策です。まだ対応していないサイトであれば、優先的に取り組む価値があります。

画像を最適化する具体的な手順

ここからは、実際に画像を最適化するための具体的な作業手順を解説します。リサイズ、圧縮、形式変換という3つのステップを順に押さえていきましょう。

リサイズ（ピクセルサイズの調整）の方法

画像最適化する際は、表示サイズに合わせた適切なリサイズを行うことから始めましょう。

基本的に、サイト上で実際に表示されるサイズよりも大きな画像を用意する必要はありません。たとえば、記事本文の横幅が800pxであれば、画像も800px程度にリサイズすることで、無駄な容量を削減できます。ただし、Retinaディスプレイ対応を考慮するなら、1.5〜2倍のサイズ（1200〜1600px）で用意しておくのがおすすめです。

リサイズには、無料で使えるツールが数多くあります。

• Canva：ブラウザ上で直感的に操作でき、デザイン初心者にも使いやすい
• Adobe Photoshop：プロ向けツールだが、精密な調整が可能
• オンラインツール：I Love IMGやResizeImageなど、アップロードするだけで簡単にリサイズできるサービス

また、WordPressを使っている場合は、メディア設定で自動リサイズを設定できます。「設定」→「メディア」から、サムネイル・中サイズ・大サイズの各サイズを指定しておけば、アップロード時に自動的に複数サイズが生成されます。これにより、手動でのリサイズ作業を省略できます。

実務者向けには、レスポンシブ画像（srcset）の活用もおすすめです。HTMLのsrcset属性を使えば、デバイスの画面サイズに応じて最適なサイズの画像を自動的に配信できます。

<img src="image-800.jpg" 
     srcset="image-400.jpg 400w, 
             image-800.jpg 800w, 
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, 
            (max-width: 1200px) 800px, 
            1200px"
     alt="説明文">

この設定により、スマートフォンでは400px、タブレットでは800px、デスクトップでは1200pxの画像が配信され、無駄なデータ転送を防げます。

圧縮（ファイルサイズの削減）の方法

リサイズの次は、画像ファイルの圧縮に取り組みましょう。

圧縮には、可逆圧縮と非可逆圧縮の2種類の方式があります。可逆圧縮は、圧縮後も元のデータを完全に復元できる方式で、PNGなどで使われます。一方、非可逆圧縮は、一部のデータを削除することで高い圧縮率を実現する方式で、JPEGやWebPで採用されています。Web用途では、多少の画質劣化を許容して非可逆圧縮を積極的に活用するのが一般的です。

圧縮に使える推奨ツールとしては、以下のようなものがあります。

• TinyPNG / TinyJPG：ブラウザ上で簡単に圧縮でき、画質を保ちながら大幅にサイズ削減できる
• ImageOptim（Macのみ対応）：ドラッグ&ドロップで一括圧縮が可能
• Squoosh：圧縮前後の画質を比較しながら調整できるGoogle製の高機能ツール

圧縮率の目安としては、70〜85%程度がおすすめです。これ以上圧縮すると、目に見えて画質が劣化し始めることが多く、ユーザー体験を損なう可能性があります。Squooshなどのツールを使えば、リアルタイムで圧縮後の見た目を確認しながら調整できるため、最適なポイントを見つけやすくなります。

WordPressを使っている場合は、プラグインで自動圧縮を設定するのが効率的です。

• EWWW Image Optimizer：アップロード時に自動圧縮してくれる無料プラグイン
• Imagify：より高機能な圧縮が可能で、無料プランでも月25MBまで利用可能
• ShortPixel：一括最適化にも対応し、既存画像の圧縮も簡単

これらのプラグインを導入しておけば、以降アップロードする画像が自動的に最適化されるため、運用上の手間が大幅に削減されます。

圧縮ツールを選ぶ際のポイントは、画質とファイルサイズのバランスを視覚的に確認できるかどうか です。数値だけで判断せず、実際の見た目を確認しながら調整することで、過度な圧縮を避けられます。

次世代フォーマット（WebP）への変換方法

リサイズと圧縮が済んだら、最後のステップとして WebP形式への変換 を行います。

WebPへの変換は、専用のツールを使えば簡単に実行できます。

手動変換ツール としては、以下が便利です。

• Squoosh：Googleが提供する無料ツールで、WebPを含む様々な形式への変換が可能。圧縮率を調整しながらリアルタイムでプレビューできるため、画質とサイズのバランスを最適化しやすい
• Convertio：オンラインで複数ファイルを一括変換できる
• XnConvert：デスクトップアプリで、大量の画像を一括処理するのに適している

WordPressで運用している場合は、プラグインを使った自動変換が現実的です。

• EWWW Image Optimizer：WebP変換機能を備えており、アップロード時に自動的にWebP版を生成してくれる
• WebP Converter for Media：既存の画像も一括でWebP化でき、.htaccessによる自動配信設定も行える
• Imagify：WebP変換と圧縮を同時に行える

これらのプラグインは、元のJPEG/PNG画像を残しつつWebP版を生成し、対応ブラウザには自動的にWebPを配信する仕組みを構築してくれます。

変換後は、品質確認を必ず行いましょう。WebPは高効率な圧縮が可能ですが、圧縮率を上げすぎると、JPEGとは異なる形で画質劣化が現れることがあります。特に、細かいテクスチャやグラデーションを含む画像では、複数のデバイス・ブラウザで実際の表示を確認することが重要です。

また、前述の通り フォールバック設定も忘れてはいけません。<picture>タグを使うか、WordPressプラグインの自動機能を活用して、非対応ブラウザでも画像が表示されるようにしておきましょう。

WebPへの移行は、一度設定してしまえば以降は自動的に最適化されるため、初期の手間を惜しまず取り組む価値があります。PageSpeed Insightsのスコア改善にも直結するため、SEO施策として優先度の高い作業といえます。

画像SEOで押さえるべきその他の重要施策

画像のファイルサイズ最適化だけでなく、SEOにはメタ情報や配信方法の工夫も重要です。ここでは、画像SEOを総合的に強化するための周辺施策を解説します。

alt属性（代替テキスト）の最適化

画像のalt属性は、画像検索とアクセシビリティの両面でSEOに影響を与える 重要な要素です。

alt属性（代替テキスト）とは、画像が表示されない場合や、視覚障害のあるユーザーがスクリーンリーダーを使う際に、画像の内容を伝えるためのテキストです。Googleのクローラーは画像の視覚的内容を完全には理解できないため、alt属性を読み取ることで画像の文脈を判断しています。つまり、適切なalt属性を設定することで、画像検索での上位表示やページ全体のSEO評価向上につながります。

効果的なalt属性の書き方は、以下のとおりです。

• 画像の内容を具体的に説明する（「画像」「写真」だけでは不十分）
• 関連するキーワードを自然に含める（記事のテーマと合致していれば）
• 簡潔にまとめる（1〜2文程度、125文字以内が目安）
• 文脈に沿った情報を提供する

例えば、SEO記事内で使う画像であれば、以下の良い例を参考に作成するとよいでしょう。

悪い例：

<img src="graph.jpg" alt="グラフ">
<img src="tool.jpg" alt="画像">
<img src="analysis.jpg" alt="">

良い例：

<img src="graph.jpg" alt="ページ表示速度と直帰率の相関を示すグラフ">
<img src="tool.jpg" alt="TinyPNGの画像圧縮インターフェース画面">
<img src="analysis.jpg" alt="Google PageSpeed Insightsのスコア分析結果">

避けるべき記述としては、以下のようなものがあります。

• キーワードの詰め込み（「SEO 画像 最適化 圧縮 リサイズ WebP ツール」など）
• 画像と無関係な説明
• 「〜の画像」「〜の写真」という冗長な表現（altは画像であることが前提なので不要）

装飾目的の画像やアイコンなど、内容的に意味を持たない画像については、alt=""と空欄にするのが正しい対応です。これにより、スクリーンリーダーがその画像をスキップし、ユーザー体験を損ないません。

すでにアップロード済みの画像についても、定期的に見直して最適化することで、画像検索からの流入を増やせる可能性があります。

ファイル名の最適化

画像のファイル名も、クローラーが読み取る情報の一つです。適切なファイル名を付けることで、わずかながらSEO効果が期待できます。

SEOに効果的なファイル名の付け方は、以下のとおりです。

• 内容を説明する英単語をハイフン（-）区切りで記述する
• 小文字のみを使用する（大文字は避ける）
• キーワードを自然に含める

推奨形式の例：

seo-image-optimization-graph.jpg
page-speed-comparison-before-after.webp
wordpress-plugin-settings-screenshot.png

避けるべきファイル名は、以下のようなものです。

• IMG_1234.jpg（カメラやスマートフォンのデフォルト名）
• image1.jpg、photo2.png（内容が分からない連番）
• screenshot_20250120_153042.png（意味のない日時情報）
• 無題.jpg、スクリーンショット.png（日本語ファイル名）

日本語ファイル名については、一部のサーバー環境でURLエンコードされて長い文字列になってしまうため、基本的には英数字とハイフンのみを使うのが無難です。ただし、技術的には問題ないケースもあるため、環境に応じて判断してください。

ファイル名の最適化は、alt属性ほど直接的なSEO効果はありませんが、画像検索での表示や、Googleがページ全体の関連性を判断する際の補助情報として機能します。画像をアップロードする前に、ひと手間かけてファイル名を整えるだけで、長期的には積み重なって効果を生む施策です。

遅延読み込み（Lazy Load）の実装

遅延読み込み（Lazy Load）とは、ページ読み込み時にすべての画像を一度に読み込むのではなく、ユーザーがスクロールして画像が画面内に入る直前に読み込む技術です。これにより、初期表示速度が大幅に改善され、SEO評価の向上につながります。

遅延読み込みの仕組みは、ファーストビュー外の画像読み込みを遅らせることで、ページの初期レンダリングに必要なリソースを削減するというものです。特に、画像を多用する記事やECサイトでは、ページ下部の画像を最初から読み込む必要はなく、ユーザーがそこまでスクロールした時点で読み込めば十分です。

実装方法は簡単で、HTML5の標準属性であるを使うだけです。

<img src="image.jpg" alt="説明文" >

この一行を追加するだけで、主要なブラウザ（Chrome、Firefox、Edge、Safari）では自動的に遅延読み込みが機能します。

WordPressを使っている場合は、WordPress 5.5以降であれば、自動的にが付与されるため、特別な設定は不要です。それ以前のバージョンや、より細かい制御が必要な場合は、以下のようなプラグインを活用できます。

• a3 Lazy Load
• Lazy Load by WP Rocket
• EWWW Image Optimizer（遅延読み込み機能も含む）

ただし、注意点として、ファーストビュー内の画像には遅延読み込みを適用してはいけません。最初に表示される画像まで遅延させてしまうと、かえって体感速度が遅くなり、LCPスコアが悪化します。アイキャッチ画像やヘッダー画像など、ページ上部の重要な画像は通常通り読み込み、スクロールしないと見えない位置にある画像のみに適用するのが正しい使い方です。

遅延読み込みは、実装が簡単でありながら、ページ速度改善に大きく貢献する施策です。特に画像枚数が多いページでは、劇的な効果が期待できます。

レスポンシブ画像（srcset）の設定

レスポンシブ画像とは、デバイスの画面サイズや解像度に応じて、最適なサイズの画像を自動的に配信する仕組みです。これにより、モバイルユーザーに無駄に大きな画像を送らず、データ転送量を削減できます。

設定には、HTMLの srcset属性と sizes属性を使います。

<img src="image-800.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1200px) 800px,
            1200px"
     alt="説明文">

この記述により、以下のような挙動になります。

• 画面幅600px以下（スマートフォン）：400px幅の画像を配信
• 画面幅600〜1200px（タブレット）：800px幅の画像を配信
• 画面幅1200px以上（デスクトップ）：1200px幅の画像を配信

これは、モバイルSEOへの効果が非常に高い施策です。Googleはモバイルファーストインデックスを採用しているため、モバイル環境でのページパフォーマンスがSEO評価に直結します。レスポンシブ画像を実装することで、スマートフォンでのデータ転送量を大幅に削減でき、表示速度が改善します。

実装難易度については、HTML・CSSの知識が必要になりますが、CMS利用時は自動対応されるケースが多いため、実務上のハードルは低めです。WordPressでは、テーマやプラグインが自動的にsrcsetを生成してくれることが一般的です。手動で実装する場合も、一度テンプレートに組み込んでしまえば、以降は自動的に適用されます。

レスポンシブ画像は、デバイスの多様化が進む現代において、ユーザー体験とSEOの両方を改善できる重要な技術です。まだ導入していないサイトであれば、優先的に検討すべき施策といえます。

画像最適化でよくある失敗と注意点

画像最適化は効果的なSEO施策ですが、やり方を誤るとかえって逆効果になることもあります。ここでは、実務でよくある失敗パターンと、その回避方法を理解しておきましょう。

過度な圧縮により画質が劣化する

ファイルサイズを小さくすることに注力しすぎて、画質を犠牲にしてしまうのは、最もよくある失敗です。確かにSEOにおいてページ速度は重要ですが、画像がぼやけていたり、ノイズが目立ったりすれば、ユーザーは「このサイトは品質が低い」と判断して離脱してしまいます。結果として、滞在時間の低下や直帰率の上昇を招き、SEO評価にマイナスの影響を与えかねません。

画質とファイルサイズのバランスを取るためには、以下のポイントを意識しましょう。

• 圧縮率は70〜85%程度に抑える（それ以上は画質劣化が顕著になる）
• 圧縮後の画像を必ず目視で確認する
• 複数のデバイス（スマートフォン、タブレット、PC）で表示を確認する
• 用途に応じて圧縮率を調整する（装飾的な画像は強めに、メインビジュアルは控えめに）

SquooshやTinyPNGなどのツールは、圧縮前後の画像を並べて比較できるため、劣化の程度を確認しながら調整するのが理想的です。

また、画像の内容によって許容できる圧縮率は異なります。たとえば、グラデーションや細かいテクスチャを含む写真は、圧縮による劣化が目立ちやすい一方、シンプルなイラストやアイコンは高圧縮でもほとんど劣化が分かりません。一律に同じ設定を適用するのではなく、画像ごとに最適なバランスを見極めることが重要です。

画像を入れすぎてページが重くなる

画像最適化を個別に行っていても、画像の枚数が多すぎると、結果的にページ全体が重くなってしまいます。1枚あたり100KBに抑えていても、1記事に50枚の画像があれば合計5MBになり、ページ動作が重くなることもあります。画像は視覚的な訴求力がある一方、使いすぎればページ速度を損ない、ユーザーの集中力を削ぐ原因にもなります。

1記事あたりの適切な画像枚数について、明確な正解はありませんが、一般的には以下のような考え方ができます。

• テキスト中心の情報記事：5〜15枚程度
• 手順解説やチュートリアル：10〜20枚程度(各ステップに1枚ずつなど)
• ビジュアル重視の記事（レビュー、ギャラリーなど）：20〜30枚程度

たとえば、見出しの装飾に毎回画像を使っているなら、CSSのグラデーションや:before疑似要素で代替できます。また、矢印やチェックマークなどのアイコンは、Font AwesomeやGoogle Iconsなどのアイコンフォントを使えば、画像ファイルを読み込む必要がありません。

SEO的には、コンテンツの価値を高める画像のみを使うという原則が基本です。ユーザーの理解を助ける、情報を補足する、視覚的に内容を伝える、といった明確な目的がある画像だけを残し、それ以外は思い切って削減することで、ページ全体のパフォーマンスが向上します。

著作権・ライセンス違反のリスク

画像最適化の技術的な側面だけでなく、著作権やライセンスの問題も見落としてはいけません。

無断で使用した画像が原因で、法的なトラブルに発展したり、最悪の場合、Googleからペナルティを受けたりするリスクがあります。特に、他サイトから無断で転載した画像や、ライセンス条件を満たしていない素材を使うと、著作権侵害として訴えられる可能性があります。

安全な画像の入手先 としては、以下のようなサービスがあります。

フリー素材サイト：

• Unsplash、Pexels、Pixabay（商用利用可能、クレジット表記不要のものが多い）
• いらすとや、ICOOON MONO（日本語向けのイラスト素材）

有料素材サイト：

• Adobe Stock、Shutterstock、Getty Images（品質が高く、権利関係も明確）

使用する際は、必ずライセンス条件を確認しましょう。特に以下の点に注意が必要です。

• 商用利用が可能かどうか
• クレジット表記（出典記載）が必要かどうか
• 加工や改変が許可されているかどうか
• 再配布の可否

引用や出典表記が必要な場合は、画像の近くやページ下部に「出典：（サイト名・作者名）」と明記するのが一般的です。

また、自社で撮影した写真 であっても、人物が写っている場合は肖像権に配慮する必要があります。特に、顔が明確に識別できる写真を使う場合は、本人の許可を得ておくことが必須です。

画像最適化の効果を測定・検証する方法

画像最適化を実施したら、その効果を客観的に測定することが重要です。ここでは、具体的な測定ツールと、改善の優先順位の付け方を解説します。

Google PageSpeed Insightsでの確認方法

Google PageSpeed Insights は、Googleが公式に提供する無料のページ速度測定ツールで、画像最適化の効果を確認する上で最も重要なツールです。

使い方は非常にシンプルです。PageSpeed Insightsにアクセスし、測定したいページのURLを入力するだけで、モバイルとデスクトップ両方のパフォーマンススコア(0〜100点)が表示されます。

画像関連の指摘項目 としては、主に以下のようなものがあります。

• 「次世代フォーマットでの画像の配信」：JPEG・PNGをWebPに変換すべきという提案
• 「適切なサイズの画像」：実際の表示サイズよりも大きい画像が使われている場合の指摘
• 「効率的な画像フォーマット」：圧縮が不十分な画像への警告
• 「オフスクリーン画像の遅延読み込み」：遅延読み込みが未実装の画像への提案

各項目には、削減可能な容量が具体的に表示されるため、どの画像を優先的に最適化すべきかが一目で分かります。たとえば「次世代フォーマットでの画像の配信で500KBを削減できる可能性があります」といった形で、改善余地が数値化されます。

スコア改善の優先順位 は、以下のように考えるとよいでしょう。

• 削減可能な容量が大きい項目から着手する（100KB以上削減できる指摘を優先）
• 実装が簡単な施策から進める（の追加など）
• 複数ページに共通する問題を優先的に解決する（サイト全体のテンプレート改善）

また、モバイルとデスクトップ両方を確認することが重要です。Googleはモバイルファーストインデックスを採用しているため、モバイルでのスコアがSEO評価により強く影響します。デスクトップでは高スコアでも、モバイルで低い場合は優先的に改善すべきです。

PageSpeed Insightsは、改善前後の数値を記録しておくことで、施策の効果を明確に可視化できます。定期的に測定して、継続的な改善サイクルを回していくのが理想的です。

Core Web Vitals（LCP・CLS）と画像の関係

Core Web Vitals は、Googleが重視するユーザー体験の指標であり、SEOランキングにも影響します。画像最適化は、特に LCP(Largest Contentful Paint) と CLS(Cumulative Layout Shift) の改善に直結します。

LCP(Largest Contentful Paint) は、ページ内で最も大きなコンテンツが表示されるまでの時間を測る指標です。多くの場合、この「最も大きなコンテンツ」はアイキャッチ画像やヒーロー画像などの画像要素です。

LCPの評価基準は以下の通りです。

• 2.5秒以内：良好（Good）
• 2.5〜4.0秒:改善が必要（Needs Improvement）
• 4.0秒超:不良（Poor）

画像が重いと、この数値が悪化し、SEO評価にマイナスの影響を与えます。LCP改善のための画像最適化としては、以下が有効です。

• ファーストビュー内の画像を優先的に軽量化する
• WebP形式を使用する
• 画像のwidthとheight属性を指定して、ブラウザが事前にスペースを確保できるようにする
• CDNを使って画像配信を高速化する

CLS(Cumulative Layout Shift) は、ページ読み込み中にコンテンツが予期せず移動する現象を測る指標です。画像の読み込みによってレイアウトがずれると、この数値が悪化します。

CLS改善のためには、画像にwidth・height属性を必ず指定する ことが重要です。

<img src="image.jpg" alt="説明文" width="800" height="600">

この指定により、ブラウザは画像が読み込まれる前に適切なスペースを確保でき、レイアウトのずれを防げます。WordPressなどのCMSでは、通常、自動的にこれらの属性が付与されますが、手動でHTMLを記述している場合は必ず含めるようにしましょう。

Google Search Console では、Core Web Vitalsの状態を確認できます。「エクスペリエンス」→「ウェブに関する主な指標」から、サイト全体のLCP・CLS・FIDの状態が「良好」「改善が必要」「不良」のいずれかで表示されます。

具体的な改善例としては、以下のようなケースがあります。

• 改善前:LCP 4.2秒 → 画像WebP化・圧縮 → 改善後:LCP 2.1秒
• 改善前:CLS 0.15 → width/height属性追加 → 改善後:CLS 0.02

画像最適化がCore Web Vitals改善に直結することを理解し、PageSpeed InsightsとSearch Consoleの両方で定期的にモニタリングすることで、SEO効果を最大化できます。

WordPress での画像最適化を効率化する方法

WordPressを使っているサイトでは、プラグインを活用することで画像最適化の作業を大幅に効率化できます。ここでは、実務で役立つプラグインと、運用を自動化する設定方法を紹介します。

おすすめの画像最適化プラグイン

WordPressで画像最適化を行う際に有力なプラグインとしては、以下のようなものがあります。

EWWW Image Optimizer：最も人気のある画像最適化プラグインの一つで、無料版でも十分な機能を備えています。主な特徴は以下の通りです。

• アップロード時の自動圧縮
• WebP形式への自動変換
• 既存画像の一括最適化
• 遅延読み込み(Lazy Load)機能
• 無料で利用可能(有料プランでより高度な圧縮も可能)

設定も比較的シンプルで、「基本設定」でWebP変換と自動圧縮を有効にするだけで、基本的な最適化が自動的に実行されます。

Imagify：フランスのWP Rocketチームが開発した高機能な圧縮ツールです。

• 3段階の圧縮レベル(Normal、Aggressive、Ultra)から選択可能
• WebP変換に対応
• リサイズ機能も内蔵
• 無料プランでは月25MBまで利用可能
• 視覚的に分かりやすい管理画面

圧縮前後の画像を比較できるため、品質を確認しながら最適化レベルを調整できる点が便利です。

ShortPixel：画質を保ちながら高い圧縮率を実現するプラグインです。

• Lossy(非可逆)、Glossy(バランス型)、Lossless(可逆)の3モードから選択
• WebP・AVIF形式に対応
• PDFの最適化も可能
• 無料プランでは月100枚まで

既存画像の一括最適化機能が使いやすく、サイトリニューアル時などにまとめて最適化したい場合に適しています。

プラグイン選択のポイントとしては、以下を考慮するとよいでしょう。

• 無料で十分か、有料プランが必要か（画像枚数や機能要件による）
• WebP対応の有無
• 既存画像の一括最適化が可能か
• サーバーへの負荷（共有サーバーでは軽量なプラグインを選ぶ）

実務的には、まずEWWW Image Optimizerの無料版から試してみて、物足りなければImagifyやShortPixelを検討する、という流れがおすすめです。

設定時の注意点 として、必ず バックアップを取ってから実行 しましょう。特に一括最適化は、大量の画像を一度に処理するため、何らかの問題が発生した際に元に戻せるよう、事前にサイト全体のバックアップを取っておくのが安全です。

アップロード時の自動最適化設定

画像最適化で最も重要なのは、手動作業を減らし、仕組み化する ことです。WordPressでは、アップロード時に自動的に最適化が実行されるよう設定することで、運用効率を大幅に改善できます。

メディア設定での自動リサイズ WordPress標準の「設定」→「メディア」では、以下のサイズを設定できます。

• サムネイルサイズ（デフォルト：150×150px）
• 中サイズ（デフォルト：300×300px）
• 大サイズ（デフォルト：1024×1024px)

これらを、サイトのデザインに合わせて適切なサイズに変更しておくことで、アップロード時に自動的に複数サイズの画像が生成されます。たとえば、記事本文の横幅が800pxであれば、大サイズを800×800pxに設定しておくとよいでしょう。

なお、前述のプラグインを使えば、アップロード時の自動圧縮が可能になります。

EWWW Image Optimizerの場合：

1. 1.「設定」→「EWWW Image Optimizer」を開く
2. 2.「基本」タブで「メタデータを削除」にチェック
3. 3.「WebP」タブでWebP変換を有効化
4. 4.「保存」をクリック

これだけで、以降アップロードされるすべての画像が自動的に圧縮・WebP変換されます。すでにアップロード済みの画像についても、プラグインを使えば一括で最適化できます。

EWWW Image Optimizerの場合:

1. 1.「メディア」→「一括最適化」を開く
2. 2.「最適化されていない画像をスキャンする」をクリック
3. 3.最適化可能な画像数が表示されたら、「最適化を開始」をクリック

数百枚〜数千枚の画像がある場合、処理に時間がかかることがあるため、アクセスの少ない時間帯に実行するのが安全です。また、サーバーの負荷を考慮して、一度に処理する枚数を制限できる設定もあります。

自動最適化の仕組みを一度構築してしまえば、以降は手間をかけずにSEO効果を維持できます。WordPressサイトを運用している方は、優先的に導入すべき施策といえます。

まとめ

この記事では、SEOにおける画像サイズ最適化の重要性と具体的な実践方法をご紹介しました。ファイルサイズを100〜200KB以下に抑える圧縮、WebP形式への変換、alt属性の適切な設定、遅延読み込みの実装、そしてGoogle PageSpeed Insightsでの定期的な効果測定という5つの基本施策を押さえることで、ページ表示速度が改善し、SEO評価の向上につながります。

画像最適化は一度仕組みを構築すれば継続的に効果を生み出せる施策です。WordPressをお使いの方はプラグインで自動化し、手動で管理されている方も各種ツールを活用することで、検索エンジンとユーザーの両方に評価されるサイト運営を実現できます。