应使用 而非 的核心场景是需按媒体条件或格式切换完全不同的图片资源；仅适配分辨率时用 srcset 即可。 必须包含带 src 和 alt 的 作为兜底，否则不渲染且影响 SEO 与无障碍。
什么时候该用 ![html5的picture标签怎么用_html4响应式图片怎么做【操作】]()
srcset
核心判断点：是否需要「根据媒体条件切换完全不同的图片资源」（比如横屏用宽图、竖屏用裁剪后的特写图；或桌面显示高清 PNG，移动端降级为 WebP 或 JPEG）。
- 仅需适配不同分辨率/设备像素比 → 用
- 需要按
media查询切换图片（如(max-width: 768px)）、或强制指定格式（type="image/webp"）→ 必须用 -
media和/或type的项，匹配即停，不继续往下看
它本身不渲染内容，只是容器；最终展示靠内部的 src 和 alt，否则语义失效、SEO 受损、无障碍不可用。
@@##@@
- 没有
-
srcset可以包含逗号分隔的多尺寸（如"hero-400w.jpg 400w, hero-800w.jpg 800w"），配合sizes属性做精确控制 - 多个
HTML4 环境下“假装”响应式图片的现实做法
HTML4 没有 srcset、sizes，连 data- 属性都得小心兼容 IE6–8。真要兼容，只有两条路：
立即学习“前端免费学习笔记（深入）”；
- 服务端根据
User-Agent或屏幕宽度（需 JS 获取后发请求）返回不同图片，前端仍用固定 - 用 JS 库（如
picturefill）来 polyfillsrcset—— 但它要求你先写出 HTML5 的标签结构，只是让老浏览器能解析执行 - 纯 CSS 方案（如
background-image+@media）可行，但失去alt文本、无法被爬虫识别为图片、打印时可能不显示
注意：picturefill 在现代项目中已基本淘汰，因为所有主流浏览器（包括 Edge 16+）都原生支持
容易被忽略的细节和坑
这些地方出错不会报错，但图片就是不按预期加载：
-
media是 CSS 媒体查询语法，不能写成max-width:768px（少空格）或(min-width: 768)（缺单位） -
src必须是有效地址，哪怕只是占位符，否则整个 - Chrome DevTools 的 Network 面板里，右键图片 → “Copy link address” 复制的是
src，不是实际加载的 - 使用
object-fit控制图片缩放时，必须给width: 100%; height: 200px;），否则object-fit无效
