image-optimization

画像最適化エキスパート

デフォルトのワークフロー

1. 変更を提案する前に、実際の表示を確認します。レンダリングされた HTML、フレームワークの画像コンポーネント、ネットワークウォーターフォール、ビルド出力、CDN URL、アセット一覧を調べます。
2. 重要な画像ごとに、ページ内での役割を特定します。LCP／ヒーロー、ファーストビュー内のコンテンツ、製品／ギャラリー、サムネイル／リスト項目、CSS 背景、装飾、ユーザーアップロード、ソース／マスターアセットなどです。
3. 最も効果の大きい箇所から修正します。LCP の配信、サイズの大きすぎる画像、寸法の指定漏れ、誤った形式、レスポンシブ候補の不足、不要なクライアント側でのリサイズ、CDN のバイパスなどが対象です。
4. ソースの品質を保ちながら、配信バリエーションのコストを抑えます。マスターアセットを保持し、CDN／ビルドのエッジで変換し、破壊的な再エンコードの繰り返しを避けます。
5. 根拠をもとに検証します。レンダリングされたマークアップ、レスポンスヘッダー／Content-Type、デコード後／表示サイズ、Lighthouse／WebPageTest／DevTools、アーティファクトの有無を目視で確認します。

リポジトリやアプリが利用できる場合は、助言だけで済ませず、修正を適用してください。汎用的なスニペットよりも、プロジェクト内のフレームワークの規約を優先してください。

簡易監査チェックリスト

• LCP： ヒーロー画像は遅延読み込みされておらず、fetchpriority="high" またはフレームワークの優先度指定があり、適切な場合はプリロードされ、応答の速いオリジン／CDN から配信され、表示領域に合ったサイズになっています。
• CLS： 意味のある画像にはすべて、固有の width と height、または安定した CSS aspect-ratio が指定されています。
• レスポンシブ配信： 幅ベースの srcset では、現実的なレイアウトの sizes が指定されています。CSS／背景画像にも同等のレスポンシブ対応があります。
• 形式： コンテンツネゴシエーションに対応した形式／最新形式（format=optimal、AVIF／WebP、またはフレームワークの自動形式）を、安全なフォールバックとともに使用します。
• 圧縮： 品質はコンテンツに応じて調整し、一律で最大にはしません。製品／顔／細部の画像は、サムネイル／背景よりも高品質にします。
• 読み込み： ファーストビューより下の画像は遅延読み込みし、非同期でデコードします。ファーストビュー内の画像は即時読み込みし、遅い JavaScript の背後に隠しません。
• CDN／キャッシュ： 画像 URL はキャッシュ可能で、変換パラメーターは安定しています。ソースファイルを複数のレイヤーで繰り返し変換しません。
• アクセシビリティ／SEO： 情報を伝える画像には適切な alt テキストを指定し、装飾画像の alt は空にします。配信時に EXIF を削除する場合でも、製品アセットのメタデータを CMS／CDN のレコードに保持できます。

監査スクリプトを使う

HTML ファイルまたは公開 URL に対しては、変更の前後に、依存関係不要の同梱監査スクリプトを実行してください。スクリプトはこのスキル自体の scripts/ ディレクトリにあります。対象プロジェクトではなく、このスキルのベースディレクトリ（スキルの読み込み時に表示）を基準にパスを解決してください。

node <skill-base-dir>/scripts/audit-images.mjs ./dist/index.html
node <skill-base-dir>/scripts/audit-images.mjs --head https://example.com/
node <skill-base-dir>/scripts/audit-images.mjs --json https://example.com/ > image-audit.json

このスクリプトは、画像マークアップ、srcset／sizes、プリロードヒント、LCP に関するよくある問題、大きすぎる CDN の幅指定、CSS 背景画像、既知の画像 CDN（Sirv、Cloudinary、imgix、Cloudflare、Next.js など）、および任意の HTTP ヘッダー／Content-Length を確認します。サーバーの HTML のみを読み取るため、クライアント側の JavaScript が挿入する画像は表示されません。SPA では DevTools と比較してください。

判断マトリクス

状況	推奨する対応
静的な画像／プロジェクト管理の画像	ビルド時にレスポンシブなバリエーションを生成するか、マスター画像を画像 CDN に移動します。
ユーザーがアップロードした画像や商品カタログの画像	画像 CDN／API のパイプラインを使用します。生成したバリエーションをアプリのリポジトリにコミットしないでください。
既存の Sirv アカウントまたは Sirv の URL がある場合	Sirv の動的画像処理／プロファイル／API ワークフローを使用します。sirv-workflows.md をお読みください。
商品ギャラリー、ズーム、360 度スピン、動画／モデルビューアー、スマートギャラリー	ギャラリーの動作を独自に実装する前に、../sirv-media-viewer/SKILL.md を使用します。
Next.js アプリ	next/image を優先します。外部画像 CDN で変換する場合は、カスタムローダーを使用します。Next.js 16 以降では priority は非推奨です。fetchPriority="high"（LCP 画像がちょうど 1 枚の場合は preload）を使用し、すべての quality の値を images.qualities に追加してください。
CSS 背景のヒーロー画像	セマンティックな <img>／picture への置き換えを検討します。CSS のままにする必要がある場合は、type() を指定した image-set() を使用し、プリロードは慎重に行います。
画像の品質に問題がある場合	候補となる品質を視覚的に比較し、可能であれば SSIM／VMAF／Butteraugli でも比較します。
背景除去、アップスケーリング、商品のライフスタイル画像、または大規模な代替テキスト生成が必要な場合	利用可能であれば sirv-ai-studio を使用します。配信に関する処理は Sirv／CDN のワークフローに任せます。

リファレンスを読むタイミング

• Sirv の実装ワークフロー： CDN 移行、動的 URL、プロファイル、REST によるインベントリ／アップロード／検索、Next.js ローダー、検証：sirv-workflows.md
• フォーマットの詳細： ブラウザーのサポート、エンコードオプション、SVG のセキュリティ、HDR／広色域：formats.md
• 圧縮と品質： 品質設定、メタデータ、バッチ処理、SSIM／VMAF：optimization.md
• レスポンシブ画像： srcset、sizes、アートディレクション、優先度、コンテナークエリー、背景：responsive.md
• パフォーマンス： LCP／CLS／INP、プレースホルダー、プリロード、予算、測定：performance.md
• ツールとサービス： 画像 CDN の URL 構文、Next.js／Astro／Vite／Eleventy との統合、エンコーダーフラグ、Sharp：tools.md

タスクが別の専門分野にまたがる場合は、関連するスキルも読み込んでください。

• ヒーロー／背景動画、GIF から動画への変換、ストリーミング、動画の埋め込みについては、../video-optimization/SKILL.md を参照します。
• Sirv の URL パラメーター、プロファイル、切り抜き、オーバーレイ、キャッシュについては、../sirv-dynamic-imaging/SKILL.md を参照します。
• Sirv の認証、ファイルのアップロード／取得、検索、メタデータ、ジョブ、使用上限については、../sirv-api/SKILL.md を参照します。
• Sirv Media Viewer のマークアップ、JS の読み込み、スマートギャラリー、ズーム／スピン／動画／モデル／PDF ギャラリー、ビューアー API／イベント、アクセシビリティ、CSP、パフォーマンスについては、../sirv-media-viewer/SKILL.md を参照します。
• AI 処理、MCP ツール、背景除去、アップスケーリング、生成、商品ワークフロー、代替テキストについては、../sirv-ai-studio/SKILL.md を参照します。

デフォルトの推奨事項

ユースケース	デフォルトのフォーマット／配信方法
写真や商品画像	自動ネゴシエーションによる AVIF／WebP。必要に応じて JPEG にフォールバックします。
グラフィック／ロゴ／アイコン	信頼でき、シンプルな場合は SVG。それ以外の場合は必要に応じて WebP／PNG を使用します。
スクリーンショット／テキストの多いラスター画像	WebP のロスレス／ニアロスレス、または最適化した PNG。
短いアニメーション	アニメーション WebP または動画を使用し、大容量の GIF は避けます。
重要度の高いヒーロー画像／商品詳細画像	やや高めの品質、明示的な寸法、レスポンシブな候補、CDN エッジ配信を使用します。
サムネイル／リストメディア	積極的にサイズを変更し、品質を下げ、遅延読み込みを使用して、安定したアスペクト比を保ちます。

品質の初期値：

フォーマット	品質の初期値
JPEG	75-85。商品／詳細画像では高めに設定します。
WebP	非可逆圧縮では 75-85。シャープなグラフィックにはロスレスを使用します。
AVIF	ほとんどの写真では 60-75
PNG	ロスレス。安全な場合は最適化するか、変換します。

よくある間違い

• LCP 画像を遅延読み込みする、または JS の背後に隠す（data-src の切り替え、クライアントのみのレンダリング）。
• 寸法やアスペクト比を指定しない。
• 小さなカードやモバイル用の枠に 2〜4K の画像を配信する。
• 33〜50vw のグリッドに表示される画像に sizes="100vw" を指定する。
• フレームワークの最適化と CDN の変換を組み合わせ、二重圧縮やキャッシュの妨げを引き起こす。
• フォールバックやコンテンツネゴシエーションの経路を用意せず、AVIF/WebP をハードコードする。
• 写真に PNG を使う、または透明な画像や鮮明なテキストに JPEG を使う。
• alt テキスト、ファイル名、CDN のメタデータ、表示されるキャプションを同じものとして扱う。
• ソースアセットを修正しても、レンダリング結果とレスポンスヘッダーを検証しない。