内联图片：规则与示例

内联图片是放置在阅读流程中的单张图片，用于阐明或证实其周围的要点。它不是图库、推广面板或文字的替代品。请问读者在看过图片后，能够理解或验证哪些附近文字未能同样高效提供的信息。

键槽缺口可防止连接器以错误方向插入插座。

上述渲染元素应紧跟在告诉读者检查连接器方向的段落之后。裁剪使缺口可见，说明文字说明了其重要性，后续指令可以继续进行，无需读者去解码一个庞大而不相关的场景。

为什么这个元素很重要

读者在扫读和集中审视之间交替切换。一张摆放得当的图片可以将抽象描述转化为可识别的形态，展示证据，或减少想象某个视觉状态所需的精力。位置的安排暗示该图片在解释附近的文字。当这种关系薄弱时，读者会审视图片，发现没有额外的意义，然后不得不重新找回阅读位置。

相关的心理学原理是信号引导。裁剪、说明文字和周围文字将注意力引向重要的细节。当句子讨论的是一个两厘米的锁定卡榫时，整台机器的照片是无效的。对该卡榫的聚焦裁剪给读者提供了一个需要回答的视觉问题。当仅靠构图就能使主体变得明显时，图片不需要箭头或嵌入的文字。

机器可提取性是指软件能够识别一个单元并保持其与附近含义的关系。一个语义化的 <figure> 包含一个 <img> 和可选的 <figcaption>，为爬虫、辅助技术、迁移工具和 AI 检索系统提供了一个稳定的单元。替代文本说明图片所贡献的内容；尺寸描述其几何形状；说明文字在像素之外展示解读或来源信息。

机器不能依赖计算机视觉来恢复关键的指令、数字、警告或结论。如果图片包含决定性的测量值或标签，请在附近文字中重复该信息，或使用结构化表格。元素撰写规则 控制共享指令语法、源路径、正文映射和优先级。本页面在涉及内联图片字段、尺寸、加载、说明文字和替代文本决策时具有优先权。

何时使用

当一张视觉内容直接支持附近的一个想法，并且该图片在阅读列的宽度下仍然有用时，使用内联图片。适用的场景包括：展示物理细节、识别地点或物体、呈现简单的前后对比状态、提供测试条件的视觉证据、或展示不需要注释的输出外观。

在添加之前，进行三项测试：

1. 贡献测试： 说出该图片提供的全新信息、证据或辨识内容。
2. 上下文测试： 确定该图片所支持的具体段落。如果有三个章节都可以声称拥有它，那么它的目的可能过于宽泛。
3. 移除测试： 隐藏图片。如果没有丢失任何有意义的内容，只有当设计确实需要时才将其标记为纯装饰；否则将其移除。

最接近但不当的用法是导致误用的主要原因。当读者必须定位控件或匹配多个编号区域时，使用带注释的截图。当内容是关系、流程或系统而非可见对象时，使用图表。当多个并列图片需要浏览时，使用图库。当差异依赖于重复的标准时，使用对比表。当图片和大量说明文字构成一个自包含的双列单元时，使用图文框。

不要仅仅为了分割文字而插入通用库存照片。握手不代表合作伙伴关系；笔记本电脑不能解释软件；灯泡不会让想法更清晰。不要为了保留排版效果而将文字发布为图片。不要将散文内容作为截图使用，不要使用数值无法读懂的图表，也不要用许可证和来源不明的图片。

放置位置

将图片紧接在介绍读者应审视内容的段落之后放置。先给出理由，以便读者知道将注意力投向何处。只有当图片是证据且其结果不明显时，才在图后添加解读。在操作流程中，将图片放在相关操作之后、成功检查之前；切勿将句子与其限定条件分开，或将指令与其警告分开。

只有当标题和首段已确立图片用途时，内联图片才可以放在 H2 下方。确保图形、说明文字和来源信息在响应式布局和分页中保持在一起。

不要将图片放置在段落内、列表项内、表格单元格内、提示框内、折叠面板内、可点击卡片内或其他媒体元素内。不要将两张内联图片背靠背放置：将真正的并列图片合并为图库，或添加说明文字来区分它们的作用。图片不得放在密集的表格、视频、图表或行动号召旁边，避免两个对象争夺注意力。不同媒体单元之间至少保留一个有意义的段落，除非它们构成一个明确定义的对比。

默认使用正常内容宽度，对于小物体或竖图使用较窄的呈现方式。仅当细节在其他方式下无法辨认时才使用已批准的宽媒体容器；切勿造成页面级别的横向滚动。

结构

1. 图形边界： 将素材、说明文字和来源信息作为一个单元分组在文档流中。
2. 图片来源： 解析为已批准、存在的素材，而非远程热链接或占位符。
3. 替代文本： 替代图片对于无法感知图片的读者的上下文功能；仅装饰用途时为空。
4. 固有尺寸： 在文件加载前保留正确的宽高比，防止布局移动。
5. 响应式候选： 让浏览器选择合适的文件大小，而非在所有地方下载最大的源文件。
6. 渲染尺寸： 保持相关细节清晰可辨，不溢出也不放大低质量源素材。
7. 说明文字： 在信息有助于所有读者时，添加解读、识别、日期、比例或来源信息。
8. 来源信息： 在许可或编辑政策要求时，记录创作者和来源。

图片文件名和替代文本不可互换。稳定的文件名有助于素材维护；上下文相关的替代文本解释图片在本次出现中的用途。因此，同一张照片在支持不同观点时可能具有不同的替代文本，不过将一张图片重复用于无关观点是一个警示信号。

设计示例

该元素支持三种语义变体和两种宽度处理方式。加载行为不是视觉变体。

信息性图片，内容宽度

这是默认方式。图片贡献可识别的细节或证据，使用非空的替代文本，并保持在阅读容器内。

信息性图片，宽媒体

仅当地图、详细照片或可读输出需要更多水平空间时，使用已批准的宽容器。周围文字仍然掌控含义，移动端呈现必须保持可用。

装饰性图片

装饰不携带独特信息，使用 alt=""，没有解释性说明文字，在长篇制作内容中应很少出现。它不能作为情绪、状态、身份或结果的唯一表达方式。

带可选展开的细节图片

仅当常规内联渲染建立了上下文但细微细节需要更大视图时，才使用展开功能。图片本身在不激活链接的情况下仍可理解，控件的无障碍名称描述其操作。

窄视口行为

每个变体在视口内缩小，保持宽高比，并使说明文字保持附加状态。如果有意义的文字变得不可读，提供移动端裁剪或用结构化文本替换图片；强制双指缩放不是默认解决方案。

参数

约定存储编辑和交付决策。边框、阴影、间距和断点值属于渲染器。

该指令没有标题字段：内联图片属于周围的章节，而不是创建一个新章节。其第一个正文段落映射到 caption；不接受首标题。来源信息在可用时取自可信的素材元数据，防止作者静默更改许可信息。

语法和代码示例

以下三种表示法映射相同的来源、替代文本、固有尺寸、大小、说明文字和加载意图。示例素材路径仅演示约定；生产环境中的源路径必须解析为现有文件。

可移植的 Markdown 指令

:::inline-image{src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="连接器特写，展示键槽缺口与匹配插座脊对齐" width=1600 height=1000 size=content loading=lazy}
键槽缺口允许仅以一个方向插入。
:::

第一段是说明文字。额外的段落、标题、列表、按钮和嵌套媒体将被拒绝，因为它们会将聚焦的图形变成通用的内容容器。

Hugo 短代码

{{< inline-image src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="连接器特写，展示键槽缺口与匹配插座脊对齐" width="1600" height="1000" size="content" loading="lazy" >}}
键槽缺口允许仅以一个方向插入。
{{< /inline-image >}}

仅使用命名参数。这是一个可移植的适配器规范，并不表示本地短代码已注册。在适配器存在之前，使用发布系统已建立的标准语义图形实现；切勿向生产内容添加损坏的短代码调用。

WordPress 区块

<!-- wp:image {"id":412,"width":"auto","height":"auto","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
  <img src="/cdn-assets/seo-playbook/examples/keyed-connector.webp"
       alt="连接器特写，展示键槽缺口与匹配插座脊对齐"
       width="1600" height="1000" loading="lazy">
  <figcaption class="wp-element-caption">键槽缺口允许仅以一个方向插入。</figcaption>
</figure>
<!-- /wp:image -->

使用媒体库元数据，但根据本次放置位置审核上下文替代文本。默认情况下不要链接到附件页面。

示例

好示例：聚焦的图片回答视觉问题

一份安装指南写道：“在接通电源之前，将键槽缺口与插座脊对齐；强行插入连接器可能弯曲引脚。“然后放置了以下图形：

缺口和脊对齐后，锁定卡榫才能啮合。

这样做效果好的原因是：图片出现在需要审视的理由之后，裁剪包含两个匹配特征，说明文字解释了二者关系，而不是简单地说"连接器图片”。指令和结果仍然保留在文字中。固有尺寸防止加载时的移动，由于图片出现在首个视口下方较远位置，可以使用懒加载。

坏示例：装饰打断说明而没有解释

一篇关于配置分析工具的文章，在步骤与其警告之间插入了全宽库存照片，显示一个人正在观看彩色图表。其替代文本写着"分析仪表盘 SEO 优化报告数据”，源文件宽 5000 像素，未声明尺寸，并且图片在页面中途急切加载。

这张图片的问题在于：它没有证明任何配置状态，将风险操作与其警告分开，在替代文本中堆砌关键词，下载的像素超出布局所需，并可能在其高度确定后导致警告移位。将其移除。如果实际界面包含一个有歧义的控件，用聚焦的、最新的截图替换，并使警告与操作保持关联。

结构化标记和无障碍

内联图片默认不创建特殊的结构化数据实体。有意义的图片可能提供 Article、HowTo、Product、Review 或其他适当实体的 image 属性。仅当具有稳定的 contentUrl 和真实的可用元数据（如说明文字、尺寸、创作者和许可信息）时，才使用 ImageObject。不要为装饰性或未经验证的权利添加标记。

好的替代文本 描述上下文中的功能，而不是每一个可见物体。问一问：如果图片加载失败，用什么句子来替代它？“连接器特写，展示键槽缺口与匹配插座脊对齐"在安装指南中是有用的。“灰色背景上的黑色和银色物体"在视觉上是字面的，但在功能上是薄弱的。避免"某某的图片"和"某某的照片”，除非媒介本身很重要，例如区分照片和模拟图像。

每个 <img> 都需要一个 alt 属性。信息性图片使用非空文本，装饰性图片使用 alt=""。省略该属性并不等同于使用空值：某些屏幕阅读器会宣布文件名。不要将关键的散文、指令、引用或长数据系列放在像素内。如果图片中的可见文本很重要，在周围内容中重复。

当说明文字属于图片时，使用 <figure> 和 <figcaption>。不要手动添加 figure 角色。可展开的图片需要一个可见的、可通过键盘操作的控件，具有描述性名称、可预测的焦点移动、打开模态时的 Escape 支持，以及在放大尺寸下访问相同的替代文本和说明文字。不要将每张图片都包裹在指向源文件的未标记链接中。

响应式交付是图片 SEO 和无障碍的一部分，因为它使内容无需不必要的延迟即可使用。使用 srcset 和 sizes 或等效的图片处理管道，以便响应式设计 可以选择合适的候选。保持宽高比，设置固有 width 和 height，并将渲染的最大宽度限制在其容器内。这些尺寸可保留空间并减少累积布局偏移 ，即页面内容在资源加载时的移动。

懒加载 将屏幕外的资源延迟到读者接近时再加载。对初始视口下方的图片使用 loading="lazy"。不要对可能立即可见的图片使用懒加载，因为延迟可能使最大的可见内容加载得更晚。仅当测量和模板位置将图片确定为可能是主要折叠上方素材时，才使用急切加载和 fetchpriority="high"；多个高优先级图片会使信号失效。

撰写规则

内联图片周围的文字完成了大部分解读工作，因此元素内的简洁并不意味着含糊。

• 在图形之前的一个附近段落中介绍理由。不要使用"下方"等坐标语言，因为响应式或联合布局可能会移动素材。
• 根据图片在确切上下文中的功能编写信息性替代文本。目标 40–160 字符；仅当复杂性确实需要时才使用最多 250 字符。
• 将说明文字控制在 5–30 个词，可能时保持一句话。识别、解读、注明日期、比例或来源；不要仅仅重复替代文本。
• 展示一个主要主题或关系。如果读者必须检查三个以上的独立区域，请使用带注释的截图、图表、表格或图库。
• 使用美式拼写、平实的语言以及与周围章节相同的术语。替代文本不是关键词字段。
• 将所有关键指令、警告、测量值、价格、日期和结论保留在 HTML 文本中，即使它们也出现在像素中。
• 切勿在元素体内放置标题、多段文字、列表、表格、按钮、表单、视频、音频或其他图片。
• 切勿使用空的说明文字来制造间距、虚构的来源信息、远程热链接、未许可的素材、未经许可的客户数据或不存在的占位符路径。
• 切勿拉伸、扭曲或放大图片以填充设计空间。仅当裁剪保留了文字所讨论的证据和上下文时才进行裁剪。

使用此元素的文章类型

Frontmatter 中的 postTypes 数组是规范的联结。文章类型可以缩小要求，但不会改变元素的字段或无障碍约定。

QA 检查清单

• 目的： 评审者能够说明该图片增加的独特信息、证据或辨识内容。
• 位置： 前一段落确立了需要检查的内容，且没有警告、限定条件或引用与其声明分离。
• 正确元素： 单张内联图片比带注释的截图、图库、图表、表格或图文框更为合适。
• 素材有效性： 来源存在，使用批准的格式和根相对路径，拥有经过验证的权利和来源。
• 隐私： 图片中不包含未经批准的客户数据、姓名、电子邮件地址、令牌、浏览器详情或位置线索。
• 裁剪和质量： 主体在渲染宽度和移动宽度下保持可辨，无变形、可避免的空白区域或破坏性压缩。
• 替代文本： alt 属性存在，且要么是上下文相关的信息性文本，要么是装饰性用途的有意空文本；不是文件名、说明文字副本或关键词列表。
• 说明文字： 存在时，以 5–30 个词增添识别、解读、日期、比例或来源信息。
• 尺寸： 固有宽度和高度匹配来源比例，并保留稳定的布局空间。
• 响应式交付： 候选尺寸匹配实际显示宽度；默认不向每个视口发送最大的源文件。
• 加载： 折叠下方的图片使用懒加载；初始可见的图片不使用；高获取优先级仅限于测量确定的主要候选。
• 移动端行为： 图片适应屏幕而无页面级水平滚动，其有意义的细节无需强制缩放即可阅读。
• 文本后备： 关键指令、警告、测量值和结论存在于页面文本中，而非仅存在于像素中。
• 结构化数据： 任何结构化数据属性都准确无误，有可见内容支持，并且为装饰性内容省略。
• 可移植一致性： Markdown、Hugo 和 WordPress 保留相同的来源、替代文本、尺寸、说明文字、来源信息和加载意图。
• 待捕获截图： 不存在渲染不存在的路径；当 screenshotsPending = true 时，每个请求的示例仍作为 SCREENSHOT 注释保留。

常见问题

学院模板渲染本页面 [[faq]] frontmatter 中存储的五个已审核问题。它们涵盖替代文本、懒加载、说明文字、尺寸以及移除无价值图片的决策。