HTML img 参考

<img> 用于在页面中嵌入图片。开发时要同时关注图片语义、尺寸、懒加载、响应式和性能。

语法

html

<img
  src="/images/avatar.webp"
  alt="用户头像"
  width="160"
  height="160"
  loading="lazy"
  decoding="async"
>

常用属性

属性	说明
`src`	图片地址
`alt`	替代文本，图片不可见或读屏时使用
`width` / `height`	图片显示尺寸，有助于减少布局偏移
`loading="lazy"`	懒加载非首屏图片
`decoding="async"`	异步解码图片
`srcset` / `sizes`	响应式图片候选

常见错误

装饰性图片写了干扰性的 alt；可使用空 alt：alt=""。
重要内容图片没有 alt，读屏用户无法理解。
不写 width 和 height，图片加载后造成布局跳动。
大图直接用 CSS 缩小，浪费带宽。

相关内容