图片的 Alt 和 “说明文本” 有什么区别？该怎么正确使用它们？

图片的 Alt 和 “说明文本” ，虽然它们看起来都像是“描述图片的文字”，但它们在网页中扮演的角色完全不同：一个是给“机器”和“特殊需求”看的，一个是给“普通读者”看的。

以下是它们的详细区别：

1. Alt 文本 (Alternative Text) —— “替身”

• 它是给谁看的？ * 搜索引擎（如 Google）： 爬虫看不懂图片内容，它通过 alt 里的文字来判断这张图是在讲什么（对 SEO 至关重要）。
  • 视障人士： 屏幕阅读器会朗读 alt 文本，帮助他们“听”懂图片。
  • 网络极差时： 如果图片加载失败，浏览器会在原本图片的位置显示这行文字。
• 视觉表现： 正常情况下，用户在网页上是看不见它的。
• 编写原则： 必须准确描述图片内容（例如：alt="一只穿着宇航服在月球上走路的橘猫"）。

2. 说明文字 (Caption / figcaption) —— “注解”

• 它是给谁看的？ * 所有普通读者： 它是网页排版的一部分，就在图片下方。
• 它的作用： * 提供背景信息（比如：这张照片是谁拍的？拍摄于哪一年？）。
  • 引导读者理解（比如：图 1-2 所示为实验数据的对比结果）。
• 视觉表现： 始终可见，通常字号略小，颜色略淡，位于图片正下方。
• 编写原则： 侧重于补充信息或点题（例如：这是 2024 年 NASA 发布的合成艺术图）。

3. 对比总结表

使用方法：

1. 使用 HTML5 标签（代码实现）

如果你是在编写代码或使用支持 HTML 的编辑器，最标准的方法是使用 <figure> 和 <figcaption> 标签。这种方式不仅视觉上整齐，对搜索引擎（SEO）也最友好。

<figure>
  <img src="your-image.jpg" alt="图片描述 - 给搜索引擎看的">
  <figcaption>这是图片的说明文字，是让读者看到的说明，通常会居中或使用较小的字体。</figcaption>
</figure>

小技巧：

如果你懒得写两次，可以用图片名同时填充两者。但如果你追求完美：

• Alt 可以写：一只金毛在草地上跑。
• Caption 可以写：图1：我家狗狗在公园撒欢，摄于2023年秋。