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, 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.
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
Project context: Read root contextus.md when present and load only the modules relevant to this task. Without Contextus, use available project material or user-provided facts and ask for missing information; do not create a parallel context system.
Identify:
- Context: Hero, content page, product, trust badge, social preview
- Above vs below fold: LCP candidate (hero) vs lazy-loadable
- 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.
Image Sitemap
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):
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.
Responsive Images
Use <picture> or srcset for different screen sizes. Always provide fallback src—some crawlers don't understand srcset.
Picture element (format fallback, e.g. WebP → PNG):
Data URI (Inline Images)
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.
Resize & Compress
- Max width: Generally ≤2,500px; match container max-width
- Compression: WebP preferred; quality 75–85 for lossy; 72dpi for web
- LCP: Hero/above-fold images are LCP candidates; optimize aggressively
Lazy Loading
Use loading="lazy" only for below-fold images. Above-fold images (hero) must load immediately—lazy loading them hurts LCP.
3. Alt Text
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.
Best Practices
Examples (from Google):
- ❌ Missing:
<img src="puppy.jpg"/> - ❌ Stuffing:
alt="puppy dog baby dog pup pups puppies..." - ✅ Better:
alt="puppy" - ✅ Best:
alt="Dalmatian puppy playing fetch"
Captions
Google extracts image context from captions and nearby text. Use <figcaption> or descriptive text near the image.
Inline SVG
Use <title> inside SVG for accessibility:
4. File Names
Descriptive filenames give Google light clues about subject matter.
5. Preferred Image (SERP Thumbnail & Discover)
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:
Schema: primaryImageOfPage
Or attach image to main entity (e.g. BlogPosting, Article) via mainEntity or mainEntityOfPage.
Open Graph
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.
6. Page Context
- Title & meta description: Google uses page title and meta for image result snippets. See title-tag, meta-description.
- Placement: Put images near relevant text; page subject matter influences image indexing.
- Same URL: Reference the same image with the same URL across pages for cache efficiency and crawl budget.
7. Structured Data
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.
8. Specs by Context
9. Opt-Out & SafeSearch
- Inline linking opt-out: Prevent full-sized image display in Google Images via HTTP referrer check (200 or 204). See Google docs.
- SafeSearch: Label pages for explicit content if applicable.
Output Format
- Alt text suggestions per image
- Captions (if applicable; snippet/Image Pack context)
- File name recommendations
- Format (WebP, fallback)
- Responsive (srcset/sizes or picture)
- Lazy loading (above-fold vs below-fold)
- Image sitemap (if many images)
- Preferred image (schema, og:image) for key pages
Related Skills
- core-web-vitals: LCP, INP, CLS; image optimization supports LCP
- xml-sitemap: Sitemap structure; image sitemap extension
- open-graph, twitter-cards: og:image, twitter:image; social preview
- schema-markup: ImageObject, Article/Product image
- content-optimization: Multimedia in content; defers image SEO to this skill
- featured-snippet: Images near answers + captions; snippet thumbnail
- serp-features: Image Pack; alt, captions, file names
- visual-content: Visual content for social, infographics; website images use this skill
