メニュー
Improve how images are being used in the website, you will check things like: Pre-load, Lazy-load, Format, Size.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/decocms/storefront-skills --skill image-optimizerコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | image-optimizer |
| description | Improve how images are being used in the website, you will check things like: Pre-load, Lazy-load, Format, Size. |
Use this to improve how images are used on storefront and e-commerce pages. Check: pre-load, lazy-load, format, and size.
<link rel="preload" as="image" href="…"> in <head> for that single critical image.Where to preload by Storefront page type:
Edge cases:
Checks TO-DO: Does it have more than one image as a preload? Wrong! Does it have any preload tags? Probably wrong.
loading="lazy" on <img> (or equivalent in your framework) for images below the fold.loading="lazy" over custom JS unless you need intersection-based behavior (e.g. fade-in).loading="eager" on <img> for the main image (same chosen for pre-loading).fetchpriority="high" on the one image that is your LCP candidate (same as the one you preload or the first visible hero/product image).fetchpriority="low" on images that are below the fold or clearly non-critical (e.g. thumbnails, logos in the footer) so they don’t compete with the LCP image.fetchpriority="auto" (or omit the attribute) for everything else; the browser decides. No need to set it explicitly unless you want high or low.high on multiple images; reserve it for the single above-the-fold image that matters most for LCP.<picture> with <source type="image/avif"> / type="image/webp" and <img> as fallback.<picture>.srcset and sizes so the browser picks a width that matches layout and DPR.width/height or aspect-ratio) to avoid layout shift (CLS).