image-optimization

SEO 页面优化：图片优化

介绍如何针对 Google 搜索（文本结果、图片包、Google 图片、Discover）、Core Web Vitals（LCP）和无障碍访问优化图片。汇总组件（hero、trust-badges）和页面（landing-page）中的图片相关最佳实践。参考：Google 图片 SEO、Semrush 图片 SEO。

调用时：首次使用时，如果有帮助，可先用 1–2 句话介绍此技能涵盖的内容及其重要性，然后提供主要内容。后续使用时，或用户要求跳过时，直接提供主要内容。

范围

• 发现与索引：HTML img 元素、图片站点地图
• 格式与性能：WebP、响应式图片、延迟加载、LCP；完整的 CWV 优化请参阅 core-web-vitals
• 元数据：替代文本、文件名、说明文字
• 首选图片：primaryImageOfPage、og:image；搜索结果中标题/描述旁的缩略图
• 结构化数据：ImageObject、Article/Product 等中的图片

初步评估

**项目上下文：**如果根目录中存在 contextus.md，请先阅读，并仅加载与此任务相关的模块。若没有 Contextus，请使用现有项目材料或用户提供的信息，并询问缺失信息；不要创建并行的上下文系统。

确定：

1. 上下文：Hero、内容页、产品、信任徽章、社交预览
2. 首屏上方与下方：LCP 候选图片（hero）与可延迟加载的图片
3. 图片数量：单张 hero、图片库、程序化生成的页面

---

1. 发现与索引

使用 HTML 图片元素

Google 会从 <img> 的 src 属性中发现图片（包括 <picture> 内部的图片）。CSS 背景图片不会被编入索引。

应做	不应做
<img src="puppy.jpg" alt="Golden retriever puppy" />	<div style="background-image:url(puppy.jpg)">

图片站点地图

提交图片站点地图，帮助 Google 发现可能遗漏的图片。图片站点地图可以包含 CDN（其他域名）上的 URL；请在 Search Console 中验证 CDN 域名，以便报告抓取错误。

结构（来自 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>

有关站点地图索引和提交，请参阅 xml-sitemap。图片站点地图是一种扩展，可以单独使用，也可以与页面站点地图合并。

---

2. 格式与性能

支持的格式

Google 支持：BMP、GIF、JPEG、PNG、WebP、SVG、AVIF。文件名扩展名应与格式一致。

格式	最适用场景	备注
WebP	照片、图形	文件更小，加载更快；支持有损和无损压缩、透明度与动画
AVIF	现代浏览器	比 WebP 更小；请检查支持情况
JPEG	普通照片	回退选项；支持广泛
PNG	透明效果、细节	文件较大；按需使用
SVG	图标、徽标	可缩放；内联 SVG 的替代文本请使用 <title>
GIF	简单动画	预览时仅显示第一帧

响应式图片

针对不同屏幕尺寸使用 <picture> 或 srcset。始终提供回退 src——某些爬虫无法识别 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 元素（格式回退，例如 WebP → PNG）：

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.png" alt="Descriptive alt text">
</picture>

数据 URI（内联图片）

Base64 数据 URI（data:image/...;base64,...）可以减少 HTTP 请求，但会增加 HTML 大小。仅谨慎用于小图标；避免用于大图。请参阅 web.dev。

调整尺寸与压缩

• 最大宽度：通常 ≤2,500px；应与容器的最大宽度匹配
• 压缩：优先使用 WebP；有损压缩质量设为 75–85；网页使用 72dpi
• LCP：Hero/首屏上方图片是 LCP 候选图片；应积极优化

延迟加载

仅对首屏下方的图片使用 loading="lazy"。首屏上方的图片（hero）必须立即加载——延迟加载会损害 LCP。

<img src="hero.jpg" alt="..." loading="eager">
<img src="below-fold.jpg" alt="..." loading="lazy">

---

3. 替代文本

替代文本可提升无障碍性（屏幕阅读器、低带宽环境）和 SEO（Google 会结合计算机视觉来理解图片）。如果图片是链接，它也会作为锚文本。

最佳实践

应该	不应该
提供有用且信息丰富的描述	堆砌关键词
结合页面内容的上下文	使用“图片”或“照片”（多余）
最多约 125 个字符（某些辅助技术会截断文本）	为有意义的图片使用空 alt
为功能性图片提供描述	为纯装饰性图片添加 alt（使用 alt=""）

示例（来自 Google）：

• ❌ 缺失：<img src="puppy.jpg"/>
• ❌ 堆砌：alt="puppy dog baby dog pup pups puppies..."
• ✅ 更好：alt="puppy"
• ✅ 最佳：alt="Dalmatian puppy playing fetch"

图片说明

Google 会从图片说明和附近的文本中提取图片上下文。使用 <figcaption> 或在图片附近添加描述性文字。

用途	目的
主题相关性	图片说明描述图片主题，有助于建立索引
精选摘要	靠近答案且带有图片说明的图片可能会出现在缩略图位置；参见 featured-snippet
图片包	替代文本、图片说明和文件名有助于图片显示在图片包中；参见 serp-features

内嵌 SVG

在 SVG 中使用 <title> 提升无障碍性：

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

---

4. 文件名

描述性文件名能为 Google 提供有关主题的线索。

应该	不应该
apple-iphone-15-pink-side-view.jpg	IMG00353.jpg
简短并以连字符分隔	使用通用名称：image1.jpg、pic.gif
为已翻译的页面本地化文件名	使用过长的文件名

---

5. 首选图片（搜索结果缩略图和 Discover）

用户搜索关键词时，经过优化的图片可能会以缩略图的形式显示在搜索结果中的页面标题和描述旁边，从而提升曝光度和点击率。Google 也会将这些图片用于 Google Discover。Search Engine Land

Google 会从多个来源自动选择缩略图。可通过以下方式影响选择：

Schema：primaryImageOfPage

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

也可以通过 mainEntity 或 mainEntityOfPage 将 image 添加到主要实体（例如 BlogPosting、Article）。

Open Graph

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

首选图片规则：内容相关且具有代表性；避免使用通用图片（如徽标）或文字过多的图片；避免极端宽高比；使用高分辨率图片。社交媒体规格参见 open-graph、twitter-cards。

Google Discover（若目标是 Discover）：宽度 ≥1200px；大小 ≥300KB；优先采用 16:9 宽高比；确保重要内容在横向裁剪中可见。

---

6. 页面上下文

• 标题和元描述：Google 会使用页面标题和元描述生成图片结果摘要。参见 title-tag、meta-description。
• 位置：将图片放在相关文本附近；页面主题会影响图片索引。
• 相同 URL：在不同页面中使用相同 URL 引用同一图片，以提高缓存效率并节省抓取预算。

---

7. 结构化数据

添加结构化数据，以便在 Google 图片中显示富媒体搜索结果（徽章、额外信息）。符合条件必须包含图片属性。有关 ImageObject、Article、Product、Recipe 等内容，请参见 schema-markup。

---

8. 按上下文划分的规范

上下文	优先项	备注
主视觉	LCP、alt、不要延迟加载	参见 hero-generator；位于首屏上方，快速加载
文章 / 博客主视觉	宽 1200–1600px；高度按比例设置；og:image 使用 1200×630	Schema、Open Graph、Twitter Cards 使用同一张图片；小于 200 KB；优先使用 WebP；使用描述性 alt；设置 width/height 以防止 CLS；使用 srcset/sizes 实现响应式显示；配有相关图片的文章浏览量约高出 94%
信任徽章	Alt 文本	参见 trust-badges-generator；例如“诺顿安全认证”
落地页	以上全部	参见 landing-page-generator 的交付前检查清单
OG / Twitter	1200×630、1200×675	参见 open-graph、twitter-cards
平台	按平台而定	X、LinkedIn、Pinterest——参见各平台技能

---

9. 选择退出与安全搜索

• 选择退出内嵌链接：通过 HTTP referrer 检查（200 或 204），阻止在 Google 图片中显示完整尺寸的图片。参见 Google 文档。
• 安全搜索：如适用，为包含露骨内容的页面添加标签。

---

输出格式

• 每张图片的 Alt 文本 建议
• 图片说明（如适用；用于摘要 / Image Pack 上下文）
• 文件名 建议
• 格式（WebP、回退格式）
• 响应式（srcset/sizes 或 picture）
• 延迟加载（首屏上方与首屏下方）
• 图片站点地图（图片较多时）
• 关键页面的 首选图片（schema、og:image）

相关技能

• core-web-vitals：LCP、INP、CLS；图片优化有助于 LCP
• xml-sitemap：站点地图结构；图片站点地图扩展
• open-graph, twitter-cards：og:image、twitter:image；社交媒体预览
• schema-markup：ImageObject、Article/Product 图片
• content-optimization：内容中的多媒体；图片 SEO 由此技能负责
• featured-snippet：答案附近的图片及说明；摘要缩略图
• serp-features：Image Pack；alt、图片说明、文件名
• visual-content：社交媒体视觉内容、信息图；网站图片使用此技能