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, Semrush Image SEO.
Works with
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionimage-optimizationExecute the skills CLI command in your project's root directory to begin installation:
Fetches image-optimization from kostja94/marketing-skills and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate image-optimization. Access via /image-optimization in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Create detailed user stories, acceptance criteria, and feature specs
Example
Generate user stories for 'password reset feature' with acceptance criteria, edge cases, and test scenarios
Reduce spec writing time by 50%, ensure comprehensive coverage
Research competitors, compare features, identify gaps
Example
Analyze 5 competitor products, create feature comparison matrix, suggest differentiation opportunities
Complete competitive research in 2 hours instead of 2 days
Evaluate features using frameworks (RICE, ICE, Kano) and create prioritized backlogs
Example
Score 20 feature ideas using RICE framework, generate prioritized roadmap with rationale
0
total installs
0
this week
309
GitHub stars
0
upvotes
Run in your terminal
0
installs
0
this week
309
stars
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, Semrush 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.
Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for brand and page context.
Identify:
Google finds images in the src attribute of <img> (including inside <picture>). CSS background images are not indexed.
| Do | Don't |
|---|---|
<img src="puppy.jpg" alt="Golden retriever puppy" /> |
<div style="background-image:url(puppy.jpg)"> |
Submit an image sitemap to help Google discover images it might otherwise miss. Image sitemaps can include URLs from CDNs (other domains); verify CDN domain in Search Console for crawl error reporting.
Structure (from Google):
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>https://example.com/page</loc>
<image:image>
<image:loc>https://example.com/image.jpg</image:loc>
</image:image>
</url>
</urlset>
See xml-sitemap for sitemap index and submission. Image sitemap is an extension; can be standalone or combined with page sitemap.
Google supports: BMP, GIF, JPEG, PNG, WebP, SVG, AVIF. Match filename extension to format.
| Format | Best for | Notes |
|---|---|---|
| WebP | Photos, graphics | Smaller files, faster load; lossy + lossless; transparency, animation |
| AVIF | Modern browsers | Even smaller than WebP; check support |
| JPEG | Standard photos | Fallback; widely supported |
| PNG | Transparency, detail | Larger; use when needed |
| SVG | Icons, logos | Scalable; use <title> for inline SVG alt |
| GIF | Simple animation | First frame only for preview |
Use <picture> or srcset for different screen sizes. Always provide fallback src—some crawlers don't understand srcset.
<img
srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"
sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
src="image-800w.jpg"
alt="Descriptive alt text">
Picture element (format fallback, e.g. WebP → PNG):
<picture>
<source type="image/webp" srcset="image.webp">
<img src="image.png" alt="Descriptive alt text">
</picture>
Base64 data URIs (data:image/...;base64,...) reduce HTTP requests but increase HTML size. Use sparingly for small icons; avoid for large images. See web.dev.
Use loading="lazy" only for below-fold images. Above-fold images (hero) must load immediately—lazy loading them hurts LCP.
<img src="hero.jpg" alt="..." loading="eager">
<img src="below-fold.jpg" alt="..." loading="lazy">
Alt text improves accessibility (screen readers, low bandwidth) and SEO (Google uses it with computer vision to understand images). It also serves as anchor text if the image is a link.
| Do | Don't |
|---|---|
| Useful, information-rich description | Keyword stuffing |
| Context of page content | "image of" or "photo of" (redundant) |
| Max ~125 characters (some assistive tech truncates) | Empty alt on meaningful images |
| Descriptive for functional images | Alt on purely decorative images (use alt="") |
Examples (from Google):
<img src="puppy.jpg"/>alt="puppy dog baby dog pup pups puppies..."alt="puppy"alt="Dalmatian puppy playing fetch"Google extracts image context from captions and nearby text. Use <figcaption> or descriptive text near the image.
| Use | Purpose |
|---|---|
| Topic relevance | Caption describes image subject; supports indexing |
| Featured Snippets | Images near answers with captions can capture thumbnail slots; see featured-snippet |
| Image Pack | Alt + caption + file name help Image Pack display; see serp-features |
Use <title> inside SVG for accessibility:
<svg aria-labelledby="svgtitle1">
<title id="svgtitle1">Descriptive text for the SVG</title>
</svg>
Descriptive filenames give Google light clues about subject matter.
| Do | Don't |
|---|---|
apple-iphone-15-pink-side-view.jpg |
IMG00353.jpg |
| Short, hyphen-separated | Generic: image1.jpg, pic.gif |
| Localize filenames for translated pages | Overly long filenames |
When users search for keywords, optimized images can appear as thumbnails next to the page title and description in search results—enhancing visibility and CTR. Google also uses these images for Google Discover. Search Engine Land
Google selects thumbnails automatically from multiple sources. Influence selection via:
{
"@context": "https://schema.org",
"@type": "WebPage",
"url": "https://example.com/page",
"primaryImageOfPage": "https://example.com/images/cat.png"
}
Or attach image to main entity (e.g. BlogPosting, Article) via mainEntity or mainEntityOfPage.
<meta property="og:image" content="https://example.com/images/cat.png">
Preferred image rules: Relevant, representative; avoid generic (e.g. logo) or text-heavy images; avoid extreme aspect ratios; high resolution. See open-graph, twitter-cards for social specs.
Google Discover (if targeting Discover): ≥1200px wide; ≥300KB; 16:9 aspect ratio preferred; important content visible in landscape crop.
Add structured data for rich results in Google Images (badges, extra info). Image attribute is required for eligibility. See schema-markup for ImageObject, Article, Product, Recipe, etc.
| Context | Priority | Notes |
|---|---|---|
| Hero | LCP, alt, no lazy | See hero-generator; above-fold, fast load |
| Article / Blog hero | 1200–1600px wide; proportional height; 1200×630 for og:image | Same image for Schema, Open Graph, Twitter Cards; under 200 KB; WebP preferred; descriptive alt; set width/height to prevent CLS; use srcset/sizes for responsive; articles with relevant images get ~94% more views |
| Trust badges | Alt text | See trust-badges-generator; e.g. "Norton Secured" |
| Landing page | All above | See landing-page-generator Pre-Delivery Checklist |
| OG / Twitter | 1200×630, 1200×675 | See open-graph, twitter-cards |
| Platforms | Per-platform | X, LinkedIn, Pinterest—see platform skills |
Make data-driven prioritization decisions faster
Draft PRDs, status updates, and stakeholder presentations
Example
Create executive summary of Q3 roadmap, monthly progress report, feature launch announcement
Save 3-5 hours/week on communication overhead
Prerequisites
Time Estimate
30-60 minutes to see productivity improvements
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
kostja94/marketing-skills
mattpocock/skills
parcadei/continuous-claude-v3
cursor/plugins
ailabs-393/ai-labs-claude-skills
ailabs-393/ai-labs-claude-skills
Useful defaults in image-optimization — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
image-optimization has been reliable in day-to-day use. Documentation quality is above average for community skills.
I recommend image-optimization for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
Keeps context tight: image-optimization is the kind of skill you can hand to a new teammate without a long onboarding doc.
image-optimization fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
image-optimization reduced setup friction for our internal harness; good balance of opinion and flexibility.
image-optimization has been reliable in day-to-day use. Documentation quality is above average for community skills.
We added image-optimization from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
Useful defaults in image-optimization — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
Solid pick for teams standardizing on skills: image-optimization is focused, and the summary matches what you get after install.
showing 1-10 of 56