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
- Metadata: Alt text, file names, captions
- Preferred image: primaryImageOfPage, og:image
- Structured data: ImageObject, image in Article/Product/etc.
Initial Assessment
Check for product marketing context first: If
.claude/product-marketing-context.md
or
.cursor/product-marketing-context.md
exists, read it for brand and page context.
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
attribute of
(including inside
).
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 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 for inline SVG alt |
| GIF | Simple animation | First frame only for preview |
Responsive Images
Use
or
for different screen sizes.
Always provide fallback —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-800w.jpg"
alt="Descriptive alt text">
Picture element (format fallback, e.g. WebP → PNG):
html
<picture>
<source type="image/webp" srcset="image.webp">
<img src="image.png" alt="Descriptive alt text">
</picture>
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
only for below-fold images. Above-fold images (hero) must load immediately—lazy loading them hurts LCP.
html
<img src="hero.jpg" alt="..." loading="eager">
<img src="below-fold.jpg" alt="..." loading="lazy">
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
| 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 ) |
Examples (from Google):
- ❌ Missing:
- ❌ Stuffing:
alt="puppy dog baby dog pup pups puppies..."
- ✅ Better:
- ✅ Best:
alt="Dalmatian puppy playing fetch"
Inline SVG
Use
inside SVG for accessibility:
html
<svg aria-labelledby="svgtitle1">
<title id="svgtitle1">Descriptive text for the SVG</title>
</svg>
4. File Names
Descriptive filenames give Google light clues about subject matter.
| Do | Don't |
|---|
apple-iphone-15-pink-side-view.jpg
| |
| Short, hyphen-separated | Generic: , |
| Localize filenames for translated pages | Overly long filenames |
5. Preferred Image (SERP / Discover)
Google selects page preview images automatically. Influence selection via:
Schema: primaryImageOfPage
json
{
"@context": "https://schema.org",
"@type": "WebPage",
"url": "https://example.com/page",
"primaryImageOfPage": "https://example.com/images/cat.png"
}
Or attach
to main entity (e.g. BlogPosting, Article).
Open Graph
html
<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.
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
| Context | Priority | Notes |
|---|
| Hero | LCP, alt, no lazy | See hero-generator; above-fold, fast load |
| 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 |
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
- 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
SEO
- xml-sitemap: Sitemap structure; image sitemap extension
- open-graph: og:image, social preview
- twitter-cards: twitter:image, X preview
- schema-markup: ImageObject, Article/Product image
- content-optimization: Multimedia (images) in content; see this skill for full image optimization
- featured-snippet: Optimized images near answers can double CTR; alt, captions
- serp-features: Image Pack optimization
Components & Pages
- hero-generator: Hero images; LCP, alt; reference this skill for optimization
- trust-badges-generator: Badge images; alt text
- landing-page-generator: Pre-Delivery Checklist references image optimization
- visual-content: Visual content for social, infographics, repurposing; website images use this skill
Content
- eeat-signals: Original images over stock for E-E-A-T