做图片 SEO 与性能优化时：让图片被搜索引擎收录、提升…

当需要为搜索引擎和性能优化网页图片（alt 文本、文件名、格式、懒加载、LCP、图片站点地图、响应式图片、SERP 缩略图）时使用。

适用场景

解决思路

1. 用 HTML <img> 元素（含 <picture> 内的 img）承载图片，因为 Google 只索引 src 属性中的图片；不要用 CSS background-image，它不会被索引。
2. 提交图片站点地图（image sitemap）帮助 Google 发现可能遗漏的图片；可包含 CDN（其他域名）上的 URL，并在 Search Console 中验证 CDN 域名以便接收抓取错误报告。
3. 图片站点地图结构：在 urlset 中声明 xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"，每个 <url> 下用 <loc> 写页面地址、<image:image><image:loc> 写图片地址；它可作为独立站点地图或与页面站点地图合并。
4. 使用 Google 支持的格式：BMP、GIF、JPEG、PNG、WebP、SVG、AVIF，并让文件名扩展名与真实格式一致。
5. 按用途选格式：WebP 适合照片和图形（体积更小、支持有损/无损、透明、动画）；AVIF 更小但需确认浏览器支持；JPEG 作通用回退；PNG 用于透明和细节；SVG 用于图标和 logo；GIF 仅用于简单动画（预览只取第一帧）。
6. 用 <picture> 或 srcset 提供响应式图片，并始终提供回退 src，因为部分爬虫不理解 srcset。
7. srcset/sizes 示例：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。
8. 用 <picture> 做格式回退（如 WebP → PNG）：<source type="image/webp" srcset="image.webp"> 加 <img src="image.png" alt="...">。
9. Base64 data URI 内联图片可减少 HTTP 请求但会增大 HTML，仅少量用于小图标，大图避免使用。
10. 调整尺寸与压缩：最大宽度一般 ≤2,500px 并与容器最大宽度一致；优先 WebP；有损质量 75–85；Web 用 72dpi；首屏/LCP 图片要重点优化。
11. 懒加载只用于首屏以下的图片：用 loading="lazy"；首屏图片（hero）必须立即加载，用 loading="eager"，否则会拖累 LCP。
12. Alt 文本要写有用、信息丰富的描述，结合页面内容语境，最多约 125 个字符（部分辅助技术会截断）；功能性图片写描述性 alt，纯装饰图片用 alt=""。
13. Alt 文本避免关键词堆砌、避免写 "image of" 或 "photo of" 这类冗余词，也不要给有意义的图片留空 alt。
14. Alt 示例：缺失 alt 的 <img src="puppy.jpg"/> 和堆砌的 alt="puppy dog baby dog pup pups puppies..." 都不好；alt="puppy" 较好；alt="Dalmatian puppy playing fetch" 最好。
15. 用 <figcaption> 或图片附近的描述性文字做说明文字，Google 会从中提取图片语境，有助于索引、Featured Snippets 缩略图和 Image Pack 展示。
16. 内联 SVG 用 <title> 提供无障碍文本，例如 <svg aria-labelledby="svgtitle1"><title id="svgtitle1">描述文字</title></svg>。
17. 文件名要有描述性、简短、用连字符分隔，如 apple-iphone-15-pink-side-view.jpg；避免 IMG00353.jpg、image1.jpg、pic.gif 这类通用名；翻译页面要本地化文件名；避免过长文件名。
18. 通过 Schema 的 primaryImageOfPage 影响 SERP 缩略图选择：在 WebPage 上写 "primaryImageOfPage": "https://example.com/images/cat.png"，或通过 mainEntity/mainEntityOfPage 给主实体（如 BlogPosting、Article）挂 image。
19. 用 Open Graph 影响缩略图：<meta property="og:image" content="https://example.com/images/cat.png">。
20. 首选图片规则：相关且有代表性；避免通用图（如 logo）或文字过多的图；避免极端宽高比；使用高分辨率。
21. 若面向 Google Discover：图片宽度 ≥1200px、体积 ≥300KB、优先 16:9 宽高比，并确保重要内容在横向裁剪中可见。
22. 页面语境：Google 用页面标题和 meta description 生成图片结果摘要；把图片放在相关文字附近；同一图片在各页面用同一 URL 以提升缓存效率和抓取预算。
23. 为 Google Images 富结果添加结构化数据（ImageObject、Article、Product、Recipe 等），image 属性是获得资格的必要条件。
24. 按场景设定规格：Hero 图关注 LCP、alt、不懒加载；文章/Blog hero 宽 1200–1600px、高度成比例、og:image 用 1200×630、体积 200KB 以下、优先 WebP、描述性 alt、设置 width/height 防 CLS、用 srcset/sizes 响应式；信任徽章写 alt（如 "Norton Secured"）；OG/Twitter 用 1200×630 或 1200×675。
25. 如需退出内联链接（阻止 Google Images 显示全尺寸图），用 HTTP referrer 检查返回 200 或 204；如有露骨内容，为页面打 SafeSearch 标签。
26. 输出交付物应包含：每张图的 alt 建议、说明文字（如适用）、文件名建议、格式（WebP 及回退）、响应式方案（srcset/sizes 或 picture）、懒加载策略（首屏 vs 首屏以下）、图片站点地图（图片多时）、关键页面的首选图片（schema、og:image）。

适用边界 · 注意事项

• 纯装饰性图片不要写 alt 文本，应使用 alt=""。
• 首屏以上（hero/LCP 候选）图片不要用 loading="lazy"，会损害 LCP。
• 大图不要用 Base64 data URI 内联，会显著增大 HTML。