必须用 的场景只有两类：一是艺术指导，即不同设备需不同构图（如桌面宽景、手机特写）；二是现代格式降级（如优先 AVIF/WebP，兜底 JPG），因 的 srcset 和 sizes 仅支持尺寸切换，无法换内容或按 MIME 类型选源。

绝大多数情况下，用 就够了；只有明确需要「艺术指导」或「格式降级」时，才必须用 。

什么时候必须用 ？

不是“更高级就该用”，而是只有遇到以下两类真实场景才需要它：

• 同一张图在不同设备上要完全不同的构图：比如桌面端展示宽幅全景，移动端只保留人脸特写（ + fallback）
• 想优先加载 avif 或 webp，但又得保证 IE、老版 Safari 能显示 jpg（ + + ）

这两个需求， 的 srcset 和 sizes 无法满足——它只能切换同一张图的不同尺寸版本，不能换内容、也不能按 MIME 类型选源。

为什么 的 srcset + sizes 已经覆盖 90% 响应式需求？

它解决的是「分辨率适配」问题：小屏加载小图、大屏加载大图、高 DPR 设备加载 2x 图。浏览器根据视口宽度、设备像素比自动选最合适的资源，无需 JS 干预。

典型写法：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

@@##@@

注意：sizes 值必须和 CSS 中图片实际占用的宽度一致，否则浏览器选图会出错；src 是必填 fallback，不能省略。

误用 的常见坑

把 当成“更响应式的 ”来用，结果反而破坏性能或可访问性：

• 只写一个 + ，却没设 media 或 type——这和直接写 效果一样，还多一层 DOM 开销
• 在 里漏掉 标签——浏览器直接不渲染图，控制台报错 Failed to load resource
• 给 写了 media，但没覆盖所有断点（比如漏了 max-width: 767px），导致某些尺寸下无匹配源，回退到 可能尺寸错乱
• 以为 自带懒加载——其实它不继承 loading="lazy"，必须显式加在内部的 上

不能替代 的根本原因

本身不渲染任何内容，它只是个逻辑容器；真正起作用的是它包裹的 和最终的 。而 是语义完整、可独立使用的元素，自带 alt、支持原生懒加载、被屏幕阅读器正确识别。

复杂条件组合（比如「大屏 + AVIF」和「小屏 + WebP」同时存在）确实需要 ，但这类需求在实际项目中占比很低。多数团队卡在“要不要上”的纠结上，其实是没分清「分辨率切换」和「内容切换」这两条技术路径。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！