image-optimization

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SEO On-Page: Image Optimization

页面SEO：图片优化

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.

本指南涵盖适配谷歌搜索（文本结果、图片包、谷歌图片、Discover）、Core Web Vitals（LCP）以及无障碍要求的图片优化方法，整合了组件（首屏大图、信任徽章）和页面（落地页）的图片相关最佳实践。参考资料：Google Image SEO、Semrush Image SEO。

调用规则：首次使用时如果适用，可以先用1-2句话介绍本技能覆盖的范围及价值，再给出核心输出。如果是后续调用或者用户要求跳过说明，可以直接输出核心内容。

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.

发现与收录：HTML img元素、图片站点地图
格式与性能：WebP、响应式图片、懒加载、LCP
元数据：Alt text、文件名、图片说明
优先展示图片：primaryImageOfPage、og:image
结构化数据：ImageObject、文章/商品等实体中的图片字段

Initial Assessment

初步评估

Check for product marketing context first: If

.claude/product-marketing-context.md

.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

优先检查产品营销上下文：如果存在

.claude/product-marketing-context.md

或

.cursor/product-marketing-context.md

文件，先读取文件获取品牌和页面上下文。

需要识别的信息：

上下文：首屏大图、内容页、商品、信任徽章、社交预览
首屏/非首屏：LCP候选元素（首屏大图）vs 可懒加载资源
图片数量：单张首屏大图 vs 图片画廊、程序化生成页面

1. Discovery & Indexing

1. 发现与收录

Use HTML Image Elements

使用HTML图片元素

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)">`

谷歌会通过

<img>

（包括

<picture>

内部的img标签）的

src

属性抓取图片，CSS背景图片不会被收录。

推荐做法	不推荐做法
`<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.

提交图片站点地图可以帮助谷歌发现常规抓取可能遗漏的图片。图片站点地图可以包含CDN（其他域名）的URL，需要在Search Console中验证CDN域名以接收抓取错误报告。

结构示例（来自谷歌官方）：

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>

站点地图索引和提交方法可参考xml-sitemap技能。图片站点地图是标准站点地图的扩展，可以单独提交也可以和页面站点地图合并。

2. Format & Performance

2. 格式与性能

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

谷歌支持的图片格式包括：BMP、GIF、JPEG、PNG、WebP、SVG、AVIF，请确保文件扩展名和实际格式匹配。

格式	最佳适用场景	说明
WebP	照片、图形	文件体积更小、加载更快；支持有损/无损压缩、透明度、动画效果
AVIF	现代浏览器场景	体积比WebP更小，需要检查浏览器兼容性
JPEG	常规照片	兜底格式，兼容性最好
PNG	透明背景、高细节内容	体积较大，仅在必要时使用
SVG	图标、Logo	可无限缩放，内联SVG需要使用 `<title>` 提供替代文本
GIF	简单动画	仅第一帧会作为预览展示

Responsive Images

响应式图片

Use

<picture>

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-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>

使用

<picture>

或

srcset

适配不同屏幕尺寸，必须提供兜底的
src
属性——部分爬虫无法识别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元素（用于格式兜底，例如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

最大宽度：一般不超过2500px，和容器最大宽度匹配即可
压缩：优先使用WebP格式，有损压缩质量设置为75-85，网页使用72dpi即可
LCP优化：首屏/首屏大图是LCP候选元素，需要做极致优化

Lazy Loading

懒加载

Use

loading="lazy"

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">

仅对非首屏图片使用

loading="lazy"

，首屏图片（如首屏大图）必须立即加载，对首屏图片使用懒加载会损害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.

Alt text可以提升无障碍体验（供屏幕阅读器读取、低带宽场景展示）和SEO效果（谷歌会结合Alt text和计算机视觉识别图片内容），如果图片是链接，Alt text还会作为锚文本使用。

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 `alt=""` )

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"
```

推荐做法	不推荐做法
提供有用、信息丰富的描述	关键词堆砌
结合页面内容上下文描述	冗余表述如「图片 of」「照片 of」
长度控制在125字符左右（部分辅助技术会截断更长内容）	有意义的图片使用空Alt
功能性图片要说明功能	纯装饰性图片设置Alt内容（应该用 `alt=""` ）

示例（来自谷歌官方）：

❌ 缺失：
```
<img src="puppy.jpg"/>
```

❌ 堆砌：

alt="puppy dog baby dog pup pups puppies..."

✅ 良好：
```
alt="puppy"
```
✅ 最佳：
```
alt="Dalmatian puppy playing fetch"
```

Inline SVG

内联SVG

Use

<title>

inside SVG for accessibility:

html

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Descriptive text for the SVG</title>
</svg>

在SVG内部使用

<title>

提升无障碍体验：

html

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Descriptive text for the SVG</title>
</svg>

4. File Names

4. 文件名

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

描述性的文件名可以给谷歌提供图片主题的轻量级线索。

推荐做法	不推荐做法
`apple-iphone-15-pink-side-view.jpg`	`IMG00353.jpg`
简短、用连字符分隔	通用命名如 `image1.jpg` 、 `pic.gif`
多语言页面对应本地化文件名	文件名过长

5. Preferred Image (SERP / Discover)

5. 优先展示图片（搜索结果页/Discover）

Google selects page preview images automatically. Influence selection via:

谷歌会自动选择页面预览图片，你可以通过以下方式影响选择结果：

Schema: primaryImageOfPage

Schema：primaryImageOfPage

json

{
  "@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).

json

{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "url": "https://example.com/page",
  "primaryImageOfPage": "https://example.com/images/cat.png"
}

也可以将

image

字段附加到主实体上（例如博客文章、文章实体）。

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.

html

<meta property="og:image" content="https://example.com/images/cat.png">

优先展示图片规则：内容相关、有代表性；避免使用通用图片（如Logo）或文字过多的图片；避免极端长宽比；保证高分辨率。社交平台的规格可参考open-graph、twitter-cards技能。

6. Page Context

6. 页面上下文

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.

标题与元描述：谷歌会使用页面标题和元描述作为图片结果的片段，可参考title-tag、meta-description技能。
位置：把图片放在相关文本附近，页面主题会影响图片的收录效果。
统一URL：跨页面引用同一张图片时使用相同的URL，提升缓存效率、节省爬虫预算。

7. Structured Data

7. 结构化数据

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.

添加结构化数据可以让谷歌图片展示富结果（徽章、额外信息），图片属性是获得富结果资格的必要条件。ImageObject、文章、商品、食谱等实体的结构化数据可参考schema-markup技能。

8. Specs by Context

8. 不同场景的规格要求

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

场景	优先级	说明
首屏大图	LCP、alt、不使用懒加载	参考hero-generator技能；属于首屏内容，需要快速加载
信任徽章	Alt text	参考trust-badges-generator技能；例如「Norton Secured」
落地页	上述所有要求	参考landing-page-generator的交付前检查清单
OG / Twitter预览	1200×630、1200×675尺寸	参考open-graph、twitter-cards技能
第三方平台	遵循平台要求	X、LinkedIn、Pinterest等平台的要求参考对应平台技能

9. Opt-Out & SafeSearch

9. 退出机制与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.

内链引用退出：可以通过HTTP referrer检查（返回200或204）禁止谷歌图片展示全尺寸图片，参考谷歌官方文档。
SafeSearch：如果页面包含成人内容，请添加对应标签。

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

每张图片的Alt text建议
文件名建议
格式建议（WebP、兜底格式）
响应式实现方案（srcset/sizes或picture元素）
懒加载配置建议（区分首屏/非首屏）
图片站点地图建议（图片数量多的场景）
核心页面的优先展示图片配置建议（schema、og:image）

image-optimization

Original

Translation

SEO On-Page: Image Optimization

页面SEO：图片优化

Scope

适用范围

Initial Assessment

初步评估

1. Discovery & Indexing

1. 发现与收录

Use HTML Image Elements

使用HTML图片元素

Image Sitemap

图片站点地图

2. Format & Performance

2. 格式与性能

Supported Formats

支持的格式

Responsive Images

响应式图片

Resize & Compress

尺寸调整与压缩

Lazy Loading

懒加载

3. Alt Text

3. Alt Text

Best Practices

最佳实践

Inline SVG

内联SVG

4. File Names

4. 文件名

5. Preferred Image (SERP / Discover)

5. 优先展示图片（搜索结果页/Discover）

Schema: primaryImageOfPage

Schema：primaryImageOfPage

Open Graph

Open Graph

6. Page Context

6. 页面上下文

7. Structured Data

7. 结构化数据

8. Specs by Context

8. 不同场景的规格要求

9. Opt-Out & SafeSearch

9. 退出机制与SafeSearch

Output Format

输出格式

Related Skills

相关技能

SEO

SEO相关

Components & Pages

组件与页面相关

Content

内容相关