Image Optimization
Tune page images for Google discovery, Image Pack, and LCP without guessing alt text, formats, or structured data rules.
Overview
Image Optimization is an agent skill for the Launch phase that optimizes site images for Google Search discovery, performance (including LCP), and accessibility.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill image-optimizationWhat is this skill?
- Covers discovery and indexing via HTML img elements and image sitemaps
- Guides WebP, responsive srcset, lazy loading, and LCP-oriented hero optimization
- Specifies alt text, filenames, captions, and figcaption best practices
- Maps primaryImageOfPage, og:image, and ImageObject structured data for rich results
- Cross-references core-web-vitals skill for full CWV work beyond image scope
- Skill metadata version 1.2.1
- Scope spans discovery, format, metadata, preferred image, and structured data sections
Adoption & trust: 805 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You shipped visual pages but images slow LCP, lack proper alt and filenames, and never show up in Image Pack or Google Images.
Who is it for?
Indie builders polishing marketing sites, docs with screenshots, or ecommerce PDPs before a launch or SEO push.
Skip if: Teams that only need a full-site CWV audit with no image-specific copy—use core-web-vitals instead.
When should I use this skill?
User wants image SEO, alt text, captions, WebP, lazy loading, LCP, image sitemap, responsive images, srcset, hero image optimization, or mentions figcaption/image format.
What do I get? / Deliverables
You leave with an actionable image SEO checklist covering format, responsive delivery, metadata, sitemaps, and structured data aligned to Google guidance.
- Image SEO optimization recommendations per page or component
- Checklist-aligned alt, filename, format, and structured-data guidance
Recommended Skills
Journey fit
Image SEO is an on-page launch discipline that directly affects how landing and marketing URLs rank and appear in visual search surfaces. SEO subphase is where on-page image metadata, sitemaps, and preferred-image signals are implemented before distribution campaigns scale.
How it compares
On-page image SEO workflow, not a generic CDN or image compression SaaS integration.
Common Questions / FAQ
Who is image-optimization for?
Solo and indie builders who own landing pages, blogs, or shops and want Google-friendly images without hiring an SEO specialist for every upload.
When should I use image-optimization?
During Launch SEO when you mention image SEO, alt text, WebP, lazy loading, LCP, hero images, or image sitemaps; also when ship perf work surfaces image-heavy LCP regressions on the same pages.
Is image-optimization safe to install?
It is procedural documentation with no shell or network hooks in the skill itself; review the Security Audits panel on this Prism page before trusting any upstream skills.sh package.
SKILL.md
READMESKILL.md - Image Optimization
# 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.md` exists, read it for brand and page context. Identify: 1. **Context**: Hero, content page, product, trust badge, social preview 2. **Above vs below fold**: LCP candidate (hero) vs lazy-loadable 3. **Image count**: Single hero vs gallery, programmatic pages --- ## 1. Discovery & Indexing ### Use HTML Image Elements 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)">` | ### Image Sitemap Submit an [image sitemap](https://developers.google.com/search/docs/crawling-indexing/sitemaps/image-sitemaps) 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 <?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. --- ## 2. Format & Performance ### Supported Formats 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 | ### Responsive Images Use `<picture>` or `srcset` for different screen sizes. **Always provide fallback `src`**—some crawlers don't understand srcset. ```html <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-800