image-optimization
When the user wants to optimize images for search engines and performance. Also use when the user mentions "image SEO," "alt text," "image captions," "figcaption," "image optimization," "WebP," "lazy loading," "LCP," "image sitemap," "responsive images," "srcset," "image format," or "hero image optimization." For CWV, use core-web-vitals.
npx skills add kostja94/marketing-skills --skill image-optimization --agent cursor
Same command for any agent — swap --agent for claude-code, codex, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# SEO On-Page: Image Optimization Guides image optimization for Google Search (text results, Image Pack, Google Images, Discover), Core Web Vitals (LCP), and accessibility. Consolidates image-related best practices from components (hero, trust-badges) and pages (landing-page). References: [Google Image SEO](https://developers.google.com/search/docs/appearance/google-images), [Semrush Image SEO](https://www.semrush.com/blog/image-seo/). **When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. ## Scope - **Discovery & indexing**: HTML img elements, image sitemap - **Format & performance**: WebP, responsive images, lazy loading, LCP; full CWV optimization in **core-web-vitals** - **Metadata**: Alt text, file names, captions - **Preferred image**: primaryImageOfPage, og:image; thumbnail next to title/description in search results - **Structured data**: ImageObject, image in Article/Product/etc. ## Initial Assessment **Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.
- Scope
- Initial Assessment
- 1. Discovery & Indexing
- Use HTML Image Elements
- Image Sitemap
- 2. Format & Performance
- Supported Formats
- Responsive Images
- Data URI (Inline Images)
- Resize & Compress
- Lazy Loading
- 3. Alt Text
- Best Practices
- Captions
What does the image-optimization skill do?
When the user wants to optimize images for search engines and performance. Also use when the user mentions "image SEO," "alt text," "image captions," "figcaption," "image optimization," "WebP," "lazy loading," "LCP," "image sitemap," "responsive images," "srcset," "image format," or "hero image optimization." For CWV, use core-web-vitals.
How do I install it?
Run `npx skills add kostja94/marketing-skills --skill image-optimization --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From kostja94/marketing-skills, a repository with 848 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.