seo-images

画像最適化の分析

使用する場面

• 画像 SEO、代替テキスト、ファイルサイズ、フォーマット、遅延読み込みを監査するときに使用します。
• 画像に特化したパフォーマンス改善の提案をユーザーが求めているときに使用します。
• SEO と Core Web Vitals の両方に影響するメディア品質のシグナルを確認するときに使用します。

チェック項目

代替テキスト

• 情報を伝える画像には意味のある代替テキストを指定します。装飾画像には、代替テキストを省略したり role に頼ったりせず、alt="" を使用します。
• 具体的にする：画像の内容を説明し、「image.jpg」や「photo」のような記述は避けます。
• 関連するキーワードを自然な形で含め、キーワードを詰め込みません。
• 画像の目的に応じて、テキストはできる限り簡潔にします。10～125 文字という基準がアクセシビリティ要件として一律に適用されるわけではありません。

良い例：

• 「キッチンのシンクの蛇口を修理するプロの配管工」
• 「赤い 2024 年式トヨタ・カムリのセダンの正面写真」
• 「モダンなオフィスの会議室でミーティングをするチーム」

悪い例：

• 「image.jpg」（説明ではなくファイル名）
• 「配管工 配管工事 配管工サービス」（キーワードの詰め込み）
• 「ここをクリック」（説明になっていない）

ファイルサイズ

画像カテゴリ別の段階的な基準：

画像カテゴリ	目標	警告	重大
サムネイル	< 50KB	> 100KB	> 200KB
コンテンツ画像	< 100KB	> 200KB	> 500KB
ヒーロー／バナー画像	< 200KB	> 300KB	> 700KB

可能な場合は、画質を損なわずに目標値まで圧縮することを推奨します。

フォーマット

フォーマット	ブラウザーのサポート率	用途
WebP	97%+	デフォルトの推奨形式
AVIF	92%+	圧縮率が最も高く、新しい形式
JPEG	100%	写真のフォールバック
PNG	100%	透過を含むグラフィック
SVG	100%	アイコン、ロゴ、イラスト

JPEG/PNG より WebP/AVIF を推奨します。フォーマットのフォールバックを指定した <picture> 要素があるか確認します。

推奨する <picture> 要素のパターン

最も効率の良いフォーマットを先に指定し、段階的拡張を使用します。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive alt text" width="800" height="600" loading="lazy" decoding="async">
</picture>

ブラウザーは、サポートしている最初のフォーマットを使用します。古い全体的な割合を当てにせず、現在の対象ブラウザーでのサポート状況を確認してください。

JPEG XL：新興フォーマット

2025 年 11 月、Google の Chromium チームは 2022 年の決定を覆し、Rust ベースのデコーダーを使用して Chrome の JPEG XL サポートを復元すると発表しました。実装は機能的に完成していますが、まだ Chrome 安定版には含まれていません。JPEG XL は JPEG の可逆再圧縮（画質をまったく損なわずに約 20% 削減）と、競争力のある非可逆圧縮を提供します。ウェブへの導入にはまだ実用的ではありませんが、今後の採用に向けて動向を注視する価値があります。

レスポンシブ画像

• 複数サイズに対応する 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="Description"
>

遅延読み込み

• ファーストビューより下の画像には loading="lazy" を指定します。
• ファーストビュー内やヒーロー画像を遅延読み込みしないでください（LCP が悪化します）。
• ネイティブ方式と JavaScript ベースの遅延読み込みのどちらを使用しているか確認します。

<img src="photo.jpg" loading="lazy" alt="Description">


<img src="hero.jpg" alt="Hero image">

LCP 画像の fetchpriority="high"

ヒーロー画像／LCP 画像に fetchpriority="high" を追加し、ブラウザーのネットワークキューでのダウンロード優先度を高めます。

<img src="hero.webp" fetchpriority="high" alt="Hero image description" width="1200" height="630">

重要： ファーストビュー内の画像／LCP 画像を遅延読み込みしないでください。LCP 画像に loading="lazy" を使用すると、LCP スコアが直接悪化します。loading="lazy" はファーストビューより下の画像にのみ使用してください。

LCP 以外の画像の decoding="async"

LCP 以外の画像に decoding="async" を追加し、画像のデコードでメインスレッドがブロックされないようにします。

<img src="photo.webp" alt="Description" width="600" height="400" loading="lazy" decoding="async">

CLS の防止

• すべての <img> 要素に width と height 属性を指定します。
• 代替手段として CSS の aspect-ratio を使用します。
• 寸法が指定されていない画像を指摘します。

<img src="photo.jpg" width="800" height="600" alt="Description">


<img src="photo.jpg" style="aspect-ratio: 4/3" alt="Description">


<img src="photo.jpg" alt="Description">

ファイル名

• 内容がわかる名前にします。IMG_1234.jpg ではなく blue-running-shoes.webp のようにします。
• 小文字とハイフンを使用し、特殊文字は避けます。
• 関連するキーワードを含めます。

CDN の使用

• 画像が CDN から配信されているか確認します（異なるドメイン、CDN ヘッダー）。
• 画像を多く使用するサイトには CDN を推奨します。
• エッジキャッシュのヘッダーを確認します。

出力

画像監査の概要

指標	状態	件数
画像の合計数	-	XX
代替テキストなし	❌	XX
サイズ超過（>200KB）	⚠️	XX
形式が不適切	⚠️	XX
寸法の指定なし	⚠️	XX
遅延読み込みなし	⚠️	XX

優先度順の最適化リスト

ファイルサイズへの影響が大きい順（削減量が多いものを先に表示）：

画像	現在のサイズ	形式	問題	推定削減量
...	...	...	...	...

推奨事項

1. X 枚の画像を WebP 形式に変換します（推定削減量：XX KB）
2. X 枚の画像に代替テキストを追加します
3. X 枚の画像に寸法を指定します
4. ページ下部にある X 枚の画像で遅延読み込みを有効にします
5. サイズ超過の X 枚の画像を圧縮します

エラー処理

シナリオ	対応
URL にアクセスできない	ステータスコードを含む接続エラーを報告します。URL を確認し、サイトで認証が必要かどうかを確認するよう提案します。
ページに画像が見つからない	<img> 要素が検出されなかったことを報告します。画像が JavaScript または CSS の background-image で読み込まれていないか確認するよう提案します。
CDN または認証の背後にある画像	画像ファイルに直接アクセスしてサイズを分析できなかったことを記載します。利用可能なメタデータ（代替テキスト、寸法、マークアップに記載された形式）を報告し、アクセスできないリソースとして示します。

制限事項

• このスキルは、タスクが上記の範囲に明確に該当する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中止して確認を求めてください。