跳转至

HTML 图片

img 将图片嵌入文档。正确实现需要同时考虑替代文本、固有尺寸、加载性能和来源安全， 而不只是让图片在屏幕上可见。

学习目标

  • 使用 src、alt、width 和 height 嵌入图片。
  • 根据图片用途编写替代文本。
  • 了解懒加载、响应式图片和不可信资源的风险。

核心概念

<img
  src="images/request-flow.png"
  alt="浏览器发送请求，服务器返回 HTML 文档"
  width="960"
  height="540">

src 是资源 URL。width 与 height 提供图片固有比例，帮助浏览器预留空间，减少加载时布局跳动； CSS 仍可使用 max-width: 100% 让图片适应容器。

替代文本

alt 描述图片在当前上下文中的信息或功能，不必罗列所有像素：

  • 信息图片：简洁传达关键内容。
  • 装饰图片：使用空替代文本 alt=""，让辅助技术忽略。
  • 链接中唯一的图片：alt 描述链接目的，而不是文件外观。
  • 图表：正文中提供结论和必要的数据说明。

不要写“图片：”或重复紧邻正文。缺少 alt 与空 alt 含义不同，不能互相替代。

图注与响应式图片

<figure>
  <img src="images/dom-tree.png" alt="文章元素包含标题和两个段落" width="800" height="450">
  <figcaption>简化的 DOM 树结构。</figcaption>
</figure>

figure 可组织可独立引用的内容，figcaption 提供可见图注。需要为不同屏幕或分辨率提供候选资源时， 可进一步使用 srcset、sizes 或 picture，但必须保证候选图表达等价信息。

加载与安全

长页面中的非关键图片可使用 loading="lazy"；首屏主图通常不要懒加载。远程图片会向对方服务器 暴露请求信息，也可能被替换或用于追踪。应使用可信来源、HTTPS 和合适的资源策略。

用户上传图片必须在服务端限制大小与格式，生成安全文件名，存放于不可执行位置，并按业务风险扫描。 文件扩展名和浏览器的 accept 提示都不能代替内容验证。

常见错误

  • 省略 alt，或用文件名代替有意义描述。
  • 给装饰图片写冗长说明，制造读屏噪声。
  • 不提供尺寸，导致内容加载时明显跳动。
  • 把重要文字只放在图片中，没有等价正文。
  • 对所有图片无差别启用懒加载，包括首屏关键内容。

相关链接