メニュー
Use when designing responsive image strategy. Covers srcset, picture element, lazy loading, blur placeholders, and the trade-offs between performance and quality.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/x3allamerican/design-skills-fleetsafety --skill responsive-imagesコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | responsive-images |
| description | Use when designing responsive image strategy. Covers srcset, picture element, lazy loading, blur placeholders, and the trade-offs between performance and quality. |
Images are the biggest performance cost. Responsive images shave loading time without sacrificing quality.
Provide multiple image sizes. Browser picks the right one based on viewport + DPR.
Different images for different breakpoints (e.g., horizontal hero on desktop, vertical hero on mobile).
loading='lazy' on offscreen images. Native browser support. No JS needed.
Show low-res blurred placeholder (BlurHash) while full image loads. Modern hero experience.
WebP / AVIF have 30-50% better compression. Fall back to JPG / PNG.
Single huge image for every device. No lazy loading (loads images user never scrolls to). No blur placeholder (content shifts). No modern formats.
Applied across the X3 Compass design system.