画像はWebサイトのSEO対策において非常に重要な要素です。適切な画像サイズを設定することで、ページの読み込み速度が向上し、ユーザーエクスペリエンスや検索エンジンでの評価にも好影響を与えます。しかし、画像の最適化方法や適切なサイズについて悩んでいる方も多いのではないでしょうか。
そこで本記事では、SEOに最適な画像サイズの選び方や効果的な画像最適化の方法、おすすめの画像圧縮ツールやWordPressプラグインまで詳しく解説します。この記事を読むことで、Webサイトのパフォーマンスを向上させるための画像最適化のポイントを理解し、実践することができるでしょう。
記事執筆：認定SEOコンサルタント 三田健司
SEOにおける画像の重要性
画像はWebサイトのコンテンツを豊かにし、ユーザーに視覚的な情報を提供する重要な要素です。しかし、SEOの観点から見ると、画像は単なる装飾以上の役割を果たしています。
画像がユーザビリティに与える影響
適切に利用された画像は、テキストだけでは伝えきれない情報をユーザーに提供し、コンテンツの理解を助けます。調査によると、画像が含まれたコンテンツは、テキストのみのコンテンツと比較して、ユーザーの滞在時間が平均で2倍以上になるというデータもあります。
ユーザーは視覚的な情報に強く反応する傾向があり、魅力的な画像があることで、以下のような効果が期待できます：
- コンテンツの内容をより直感的に理解できる
- ページの滞在時間が延びる
- 情報の記憶に残りやすくなる
- 共有される可能性が高まる
しかし、画像サイズが大きすぎると、表示速度に悪影響を与え、ユーザーエクスペリエンスを損なう原因となります。GoogleのThink with Googleによると、ページの読み込み時間が3秒から5秒に増えるだけで、直帰率は90%も増加するとされています。
検索エンジン結果への影響
Googleをはじめとする検索エンジンは、ページの表示速度をランキング要因の一つとして重視しています。画像の最適化はページ速度の向上に直結するため、SEOにとって非常に重要な要素です。
特にモバイルファーストインデックスの時代においては、モバイルでの表示速度が検索順位に大きく影響します。モバイルデバイスはPCと比較して処理能力や通信環境に制約があるため、画像の最適化がより重要になります。
さらに、適切にalt属性を設定した画像は、検索エンジンのクローラーがコンテンツを理解するための手がかりとなり、画像検索からの流入も期待できます。
最適化すべき画像サイズとは
画像サイズの最適化は、「ファイルサイズ（容量）」と「表示サイズ（ピクセル寸法）」の両方を考慮する必要があります。それぞれについて最適な設定値を見ていきましょう。
一般的な画像ファイルサイズの目安
ファイルサイズ（容量）は、ページの読み込み速度に直接影響します。一般的に、ウェブサイトで使用する画像は以下のサイズに抑えることが推奨されています：
- 記事内の通常画像: 200KB以下
- 背景画像やヒーロー画像: 500KB以下
Googleのページスピードインサイトでは、画像を含むすべてのリソースを1,600KB以下に抑えることを推奨しています。複数の画像を使用する場合は、この総容量を考慮して各画像のサイズを調整する必要があります。
ファイルサイズを小さくしすぎると画質が低下してしまうため、画質とファイルサイズのバランスを取ることが重要です。画像内のテキストが読めない、製品の細部が見えないなどの問題が生じないよう注意しましょう。
解像度と画質の関係
画像の表示サイズ（ピクセル寸法）に関しては、Googleが公式に推奨している基準があります。一般的なブログ記事や商品画像などでは、横幅を1,200pxにすることが推奨されています（引用：Google検索セントラル）。
SNSでの共有を考慮すると、以下のようなサイズ設定が最適です：
| 用途 | 推奨サイズ | アスペクト比 |
|---|---|---|
| ブログのアイキャッチ画像 | 1,200px × 675px | 16:9 |
| 商品画像 | 1,200px × 1,200px | 1:1 |
| ヒーロー画像 | 1,920px × 1,080px | 16:9 |
| SNS共有用画像 | 1,200px × 630px | 1.91:1 |
画像の解像度はピクセル密度とも関連しています。特に高解像度のRetinaディスプレイなどを考慮すると、通常の2倍の解像度（例：2,400px × 1,350px）で準備し、CSSで表示サイズを指定する方法も効果的です。
しかし、解像度を上げるとファイルサイズも増大するため、適切な圧縮処理が必要になります。高解像度画像を使用する場合は、後述する画像圧縮ツールを活用して、表示品質を維持しながらファイルサイズを最小限に抑えましょう。
画像形式の選定基準
画像の用途に応じて最適な形式を選択することも、SEO対策として重要です。一般的なウェブ用画像形式には、JPEG、PNG、GIF、WebPなどがありますが、それぞれに特徴があります。
JPEGとPNGの使い分け
JPEGとPNGは最もよく使用される画像形式ですが、それぞれに適した用途があります。
JPEG（Joint Photographic Experts Group）
- 写真や複雑なグラデーションを含む画像に適しています
- 可逆圧縮が可能で、圧縮率が高く、ファイルサイズを小さくできます
- 透明部分を表現できません
- 圧縮率を高くするほど画質が劣化します
PNG（Portable Network Graphics）
- イラストやロゴ、テキストを含む画像に適しています
- 透明背景（アルファチャンネル）をサポートしています
- 可逆圧縮のため、画質劣化なしに圧縮可能です
- JPEGと比較してファイルサイズが大きくなる傾向があります
写真などの複雑な画像はJPEG、ロゴやアイコンなどのシンプルな画像や透明部分が必要な画像はPNGを選択するのが一般的です。
次世代フォーマットWebPの利点
近年、Googleが開発したWebP形式が注目されています。WebPは、JPEGとPNGの両方の長所を兼ね備えた形式で、以下のような特徴があります：
- JPEGと同等の画質でファイルサイズが約25-34%小さい
- PNGのように透明部分をサポート
- アニメーションもサポート（GIFの代替としても使用可能）
WebPはChrome、Firefox、Edge、Safariなど主要なブラウザでサポートされていますが、一部の古いブラウザでは表示できない場合があります。そのため、代替画像として従来のJPEGやPNGも用意しておくとよいでしょう。
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="画像の説明">
</picture>
このようなHTML記述により、WebPをサポートするブラウザではWebP画像が、サポートしないブラウザではJPEG画像が表示されます。
画像圧縮の手法
画像のファイルサイズを削減するには、適切な圧縮ツールを使用するのが効率的です。オンラインツールやデスクトップソフトなど、様々な選択肢があります。
オンライン画像圧縮ツール3選
オンラインで簡単に画像を圧縮できる無料ツールをご紹介します。
1. TinyJPG/TinyPNG
TinyJPGは、JPEGフォーマットの画像を、TinyPNGはPNGフォーマットの画像を効率的に圧縮するツールです。
- 高品質を維持しながら、ファイルサイズを最大80%削減
- 一度に最大20枚の画像をアップロード可能
- API機能があり、開発者向けの統合も可能
- 無料版では一度に20枚まで、サイズ制限5MB
2. Optimizilla
Optimizillaは、JPEG、PNGなど複数の画像形式に対応した圧縮ツールです。
- 圧縮前後のプレビュー機能があり、画質を確認しながら圧縮率を調整可能
- 一度に最大20枚の画像をアップロード可能
- ドラッグ＆ドロップでの操作に対応
- 最適な圧縮アルゴリズムを自動選択
3. I love IMG
I love IMGは、画像の圧縮だけでなく、サイズ変更、切り抜き、変換など多機能な画像編集ツールです。
- JPEG、PNG、GIF、SVGなど多様な形式に対応
- バッチ処理で複数の画像を一括編集可能
- クラウドベースでインストール不要
- 無料アカウントでも一度に最大15MBまで処理可能
デスクトップソフトによる圧縮方法
より大量の画像を処理したい場合や、自動化したい場合は、デスクトップソフトを使用するのも効果的です。
ImageOptim (Mac)
- 無料で使える高性能な画像圧縮ツール
- ドラッグ＆ドロップで簡単操作
- 複数の圧縮アルゴリズムを組み合わせて最適化
FileOptimizer (Windows)
- 多数のファイル形式に対応したオープンソースの圧縮ツール
- バッチ処理機能で大量の画像を一括処理
- 詳細な設定オプションあり
Squoosh (クロスプラットフォーム)
- Google Chrome Labsが開発した高機能な画像圧縮ツール
- ブラウザベースだがオフラインでも使用可能
- 形式変換や詳細な圧縮設定が可能
alt属性とファイル名の設定
画像の最適化は、ファイルサイズや形式だけでなく、適切なメタデータの設定も重要です。特にalt属性（代替テキスト）とファイル名は、SEOに大きく影響します。
alt属性の重要性と書き方
alt属性は、画像が表示されない場合にテキストとして表示される代替テキストです。視覚障害のあるユーザーのためのスクリーンリーダーにも使用されるため、アクセシビリティの観点からも重要です。
SEOの観点では、検索エンジンのクローラーは画像の内容を直接理解できないため、alt属性を通じて画像の内容を把握します。適切なalt属性を設定することで、画像検索での表示機会が増え、SEO評価も向上します。
alt属性の効果的な書き方：
- 画像の内容を簡潔に説明する（40〜80文字程度）
- キーワードを自然に含める（キーワードの詰め込みは避ける）
- 装飾的な画像はalt=””と空にしてもよい
- 製品画像の場合は、製品名や特徴を含める
悪い例：
<img src="img123.jpg" alt="SEO 画像 最適化 サイズ">
良い例：
<img src="image-optimization-guide.jpg" alt="SEOに効果的な画像サイズ最適化のガイド図">
ファイル名のSEO効果
画像のファイル名も検索エンジンがコンテンツを理解するための重要な手がかりとなります。デジタルカメラやスマートフォンでの撮影時のデフォルトファイル名（例：IMG_1234.jpg）ではなく、内容を適切に表すファイル名に変更しましょう。
効果的なファイル名の付け方：
- 内容を表す単語を使用する
- 単語間はハイフン（-）で区切る（アンダースコア_やスペースは避ける）
- 日本語よりも英語のファイル名が望ましい
- キーワードを自然に含める
悪い例：
IMG_20230825.jpg
良い例：
seo-image-size-optimization-guide.jpg
ファイル名とalt属性の両方を適切に設定することで、画像のSEO効果を最大化することができます。
WordPressでの画像最適化方法
WordPressサイトを運営している場合、画像の最適化をより効率的に行うためのプラグインが多数あります。ここでは、特におすすめのプラグインを3つご紹介します。
EWWW Image Optimizer
EWWW Image Optimizerは、アップロードした画像を自動的に圧縮し、WebPへの変換も可能な人気プラグインです。
主な特徴：
- JPEG、PNG、GIF、PDFなど多様な形式に対応
- 既存の画像も一括で最適化可能
- WebP変換機能が無料で使える
- サーバー負荷の少ない最適化設定が可能
設定方法のポイント：
- まずは基本設定から始める
- 「Remove metadata」オプションを有効にするとさらに圧縮率が向上
- 遅延読み込み（Lazy Load）機能もあり、ページ速度向上に効果的
TinyPNG (Compress JPEG & PNG images)
前述のTinyPNGのWordPressプラグイン版で、高品質な圧縮が可能です。
主な特徴：
- 画像を自動で最適化
- アップロード時だけでなく、既存の画像も最適化可能
- WebP形式への変換にも対応
- 月100枚まで無料、それ以上は有料プラン
設定方法のポイント：
- APIキーの取得が必要（無料で取得可能）
- 圧縮する画像サイズの設定が可能
- サムネイルを含めたすべての画像サイズを最適化するよう設定すると効果的
Imagify
WP Rocketの開発元が提供する高機能な画像最適化プラグインです。
主な特徴：
- 3段階の圧縮レベル（ノーマル、アグレッシブ、ウルトラ）
- 一括最適化機能
- WebP形式への自動変換
- バックアップ機能付き
設定方法のポイント：
- 最初は「ノーマル」モードでテスト
- サムネイルの最適化設定を確認
- 必要に応じてバックアップ機能を有効化
これらのプラグインを使用することで、WordPressサイトでの画像最適化が格段に効率化され、サイト全体のパフォーマンス向上につながります。
モバイルフレンドリーな画像設定
モバイルデバイスでの閲覧が増加している現在、モバイルフレンドリーな画像設定は必須となっています。特にGoogleのモバイルファーストインデックスが導入されて以降、モバイル対応は検索順位に直接影響します。
レスポンシブデザインでの対応
レスポンシブデザインでは、デバイスの画面サイズに応じて最適な画像を表示する必要があります。HTML5のpicture要素やsrcset属性を使用することで、画面サイズに応じた画像の切り替えが可能です。
<img srcset="small.jpg 600w,
medium.jpg 1200w,
large.jpg 1800w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
33vw"
src="medium.jpg"
alt="レスポンシブ画像の例">
この例では、画面幅に応じて異なる解像度の画像が表示されます。sizes属性は、各ブレイクポイントでの画像の表示サイズを指定します。
モバイル表示に最適なサイズとは
モバイルデバイスでの表示に最適な画像サイズは、以下の点を考慮する必要があります：
- モバイルでの表示幅を超える解像度は不要（多くのスマートフォンの画面幅は360〜414pxほど）
- 解像度の高いRetinaディスプレイを考慮すると、表示サイズの2倍の解像度が理想的
- データ通信量を考慮し、ファイルサイズはモバイル向けにさらに最適化
モバイル向けの画像設定例：
| 用途 | モバイル向けサイズ | ファイルサイズ目安 |
|---|---|---|
| ヘッダー画像 | 800px×450px | 100KB以下 |
| 記事内画像 | 600px×適切な高さ | 50KB以下 |
| サムネイル | 300px×300px | 20KB以下 |
おすすめのフリー画像素材サイト
最適化された画像を作成するためには、高品質な素材から始めることも重要です。以下に、SEO対策にも使いやすい無料の画像素材サイトをご紹介します。
pixabay
Pixabayは、世界中のクリエイターが投稿した高品質な写真や素材が豊富に揃っています。商用利用も可能で、登録不要で利用できます。
写真AC
日本の風景や人物など、日本らしさを表現したい場合におすすめのサイトです。会員登録すれば無料で使用可能で、商用利用も可能です。
イラストAC
写真ACと姉妹サイトで、様々なジャンルのイラストが揃っています。会員登録することで無料でダウンロードでき、ビジネス用途にも適したイラストが多数あります。
ぱくたそ
日本人や日本の風景を中心とした写真素材サイトで、独自性の高い写真が多いのが特徴です。商用利用も無料で、クレジット表記も不要です。
food.foto
食べ物や料理、食器などの写真に特化した素材サイトです。飲食関連のサイトやブログ記事に最適な高品質な写真を無料で使用できます。
これらのサイトから素材をダウンロードする際は、必要に応じてファイル名の変更や圧縮処理を行い、SEOに最適化してから使用しましょう。
画像に関するトラブルシューティング
画像最適化を行う際に発生しがちな問題とその対処法について解説します。
表示されない画像の対処法
画像が表示されない主な原因と対処法は以下の通りです：
- ファイルパスの問題
- 絶対パスと相対パスの使い分けを確認する
- ファイル名や拡張子の大文字小文字の違いをチェック
- サーバーの設定問題
- .htaccessでの画像ファイルへのアクセス設定を確認
- サーバーのパーミッション設定を見直す
- キャッシュの問題
- ブラウザのキャッシュをクリアする
- キャッシュプラグインの設定を確認
- 画像ファイルの破損
- 画像を再アップロードする
- 別の形式に変換して試す
まとめ
本記事では、SEOに最適な画像サイズについて詳しく解説しました。画像最適化のポイントをまとめると以下の通りです：
- 画像はSEOにおいて非常に重要な要素であり、ページ表示速度やユーザーエクスペリエンスに直接影響する
- SEOに最適な画像サイズは、横幅1,200px程度、ファイルサイズは200KB以下が目安
- 用途に応じて適切な画像形式（JPEG、PNG、WebP）を選択する
- TinyJPG、Optimizilla、I love IMGなどのオンライン圧縮ツールを活用する
- WordPressサイトではEWWW Image Optimizer、TinyPNG、Imagifyなどのプラグインが効果的
- モバイルフレンドリーな画像設定を行い、レスポンシブデザインに対応する
画像の最適化は一度行えば終わりではなく、サイト運営を続ける中で継続的に取り組むべき課題です。定期的に画像の状態をチェックし、最新のツールや技術を取り入れながら改善を続けましょう。
適切に最適化された画像は、サイトのパフォーマンスを向上させるだけでなく、ユーザーの満足度を高め、結果として検索エンジンでの評価も向上します。本記事で紹介した方法を実践し、効果的な画像SEO対策を実現してください。
記事執筆・株式会社アクセス・リンク 代表取締役
Webサイト制作歴10年以上の経験を元にSEOコンサルティングを行い、延べ1,000件以上のサポート実績を誇ります。個人事業主や中小企業向けのホームページ制作やSEOコンサルティングを得意としています。
（社）全日本SEO協会 認定SEOコンサルタント
コメント