# HTML img 参考

URL: https://caijiao.org/reference/html/img
Source: docs/reference/html/img.md
Description: HTML img Reference，整理 src、alt、width、height、loading、decoding、srcset、sizes、可访问性和常见错误。

`<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 缩小，浪费带宽。

## 相关内容

- [HTML Reference](/reference/html/)
- [picture 参考](/reference/html/picture)
- [HTML 图片](/html/03-media/02-images)
- [JavaScript 如何实现图片懒加载](/how-to/javascript/intersection-observer-lazyload)
- [MDN img element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img)