` 作为内联 SVG alt **GIF** |简单的动画|第一帧仅用于预览 ### 响应式图像针对不同的屏幕尺寸使用 `<picture>` 或 `srcset`。 **始终提供后备`src`**——一些爬虫不理解srcset。 <图片 srcset =“image-320w.jpg 320w，image-480w.jpg 480w，image-800w.jpg 800w” 尺寸=“（最大宽度：320px）280px，（最大宽度：480px）440px，800px” src="image-800w.jpg" alt="描述性替代文本"> **图片元素**（格式回退，例如 WebP → PNG）： <图片> <source type="image/webp" srcset="image.webp"> <img src="image.png" alt="描述性替代文本"> </图片> ### 调整大小和压缩 * **最大宽度** ：一般≤2,500px；匹配容器最大宽度 * **压缩** ：WebP 首选；有损质量为 75–85； 72dpi 网页 * **LCP** ：英雄/上方图片是 LCP 候选者；积极优化 ### 延迟加载使用 `loading="lazy"` **仅适用于下屏图像**。首屏图像（英雄）必须立即加载——延迟加载会损害 LCP。 <img src =“hero.jpg”alt =“...”loading =“eager”> <img src =“below-fold.jpg”alt =“...”loading =“lazy”> ** ** ## 3\.替代文本 Alt 文本提高了**可访问性**（屏幕阅读器、低带宽）和**SEO**（Google 将其与计算机视觉结合使用来理解图像）。如果图像是链接，它也可以用作锚文本。 ### 最佳实践做|不要 ---|--- 有用且信息丰富的描述 |关键词堆砌页面内容的上下文 | “图像”或“照片”（多余）最多约 125 个字符（某些辅助技术会被截断）|有意义的图像上的空 alt 功能图像的描述 |纯装饰图像上的 Alt（使用 `alt=""`） **示例**（来自谷歌）： * ❌ 缺失：`<img src="puppy.jpg"/>` * ❌ 馅料：`alt="小狗小狗小狗小狗小狗..."` * ✅ 更好：`alt="puppy"` * ✅ 最佳：`alt="达尔马提亚小狗玩捡东西"` ### 内联 SVG 在 SVG 中使用 `<title>` 来实现可访问性： <svg aria-labelledby="svgtitle1"> <title id="svgtitle1">SVG 的描述性文本

# SEO 页面：图像优化指导 Google 搜索（文本结果、图像包、Google 图片、Discover）、Core Web Vitals (LCP) 和辅助功能的图像优化。整合来自组件（英雄、信任徽章）和页面（登陆页面）的与图像相关的最佳实践。参考文献：[Google 图像 SEO]()、[Semrush 图像 SEO]()。 **调用时**：**首次使用**时，如果有帮助，请用 1-2 句话开头说明该技能涵盖的内容及其重要性，然后提供主要输出。在 **后续使用** 或当用户要求跳过时，直接转到主输出。 ## 范围 * **发现和索引**：HTML img 元素、图像站点地图 * **格式和性能**：WebP、响应式图像、延迟加载、LCP * **元数据**：替代文本、文件名、标题 * **首选图像** : PrimaryImageOfPage, og:image * **结构化数据**：ImageObject，文章/产品/等中的图像。 ## 初步评估 **首先检查产品营销上下文：** 如果 `.claude/product-marketing-context.md` 或 `.cursor/product-marketing-context.md` 存在，请读取其品牌和页面上下文。识别： 1. **上下文**：英雄、内容页面、产品、信任徽章、社交预览 2. **上折叠与下折叠**：LCP 候选者（英雄）与延迟加载 3. **图像计数**：单个英雄与图库、程序化页面 ** ** ## 1\.发现和索引 ### 使用 HTML 图像元素 Google 在“”的“src”属性中查找图像（包括在“

图像优化

包含技能