# HTML picture 参考

URL: https://caijiao.org/reference/html/picture
Source: docs/reference/html/picture.md
Description: HTML picture Reference，整理 source、media、type、srcset、响应式图片、可运行演示和常见错误。

`<picture>` 用于根据媒体条件或图片格式选择不同图片资源。它常见于响应式图片、WebP/AVIF 优先加载和移动端裁剪图。

## 语法

```html
<picture>
  <source media="(max-width: 640px)" srcset="/images/banner-mobile.webp">
  <source type="image/avif" srcset="/images/banner.avif">
  <img src="/images/banner.webp" alt="课程封面">
</picture>
```

## 常用属性

| 元素或属性 | 说明 |
| --- | --- |
| `<source>` | 定义候选资源 |
| `media` | 媒体查询条件 |
| `type` | 图片 MIME 类型 |
| `srcset` | 候选图片地址 |
| `<img>` | 必须保留，作为最终回退内容 |

## 可运行演示

[在线代码演示](/reference/html/demos/picture-responsive.html)

## 常见错误

- 只写 `<source>` 不写 `<img>`，导致没有回退内容。
- 把 `alt` 写在 `<source>` 上；替代文本应写在 `<img>`。
- `media` 条件重叠时顺序不清晰，浏览器会使用第一个匹配资源。
- 为同一图片提供过多候选，增加维护成本。

## 相关内容

- [HTML Reference](/reference/html/)
- [img 参考](/reference/html/img)
- [HTML 图片](/html/03-media/02-images)
- [HTML 响应式项目](/html/12-projects/04-responsive)
- [MDN picture element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture)