<link>标签不能引入自适应图片集，因其无srcset/sizes属性；真正实现需用<img>的srcset+sizes或<picture>；<link>仅能辅助预加载单图或声明多尺寸favicon。
<link> 标签本身不能直接引入“自适应图片集”——它不处理图片内容，只负责关联外部资源（如 CSS、图标、预加载资源）。真正实现图片自适应的，是 <img> 的 srcset + sizes 属性，或 <picture> 元素。但 <link> 可在特定场景下**辅助**图片响应行为，比如预加载关键自适应图片、声明高分辨率 favicon，或通过 rel="preload" 提前拉取某张条件匹配的图。
为什么不能用 link srcset 引入图片集
HTML 规范中，<link> 没有 srcset 或 sizes 属性。你可能会看到类似写法，但那是无效的：<link rel="preload" href="photo.jpg" as="image" srcset="..."> —— 浏览器会忽略 srcset，只按 href 加载单个资源。自适应逻辑必须由渲染引擎在图片渲染阶段介入，而 <link> 是资源发现/预加载阶段的声明，不参与 layout/paint。
link rel="preload" 配合 as="image" 能做什么
它能提前触发某一张**确定尺寸**的图片加载（比如首屏大图），但无法替代 <img> 的响应式选择逻辑。适用于已知设备像素比或视口宽度的静态预加载场景。
- 必须指定
as="image"，否则浏览器不会以图片优先级解码 -
href只能是单一 URL，不能是逗号分隔的列表或srcset字符串 - 若想预加载 DPR=2 下的图，得手动写：
<link rel="preload" href="photo@2x.jpg" as="image" crossorigin> - 不带
crossorigin时，跨域图片预加载可能失败（尤其带 CORS 请求头时）
favicon 多尺寸声明才是 link 的“自适应图片”正经用法
这是 <link> 唯一原生支持“多图适配”的场景：通过多个 rel="icon" 标签 + sizes，让浏览器按设备能力自动选最合适的图标。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须每个尺寸单独一个
<link>，例如：<link rel="icon" href="icon-16.png" sizes="16x16" type="image/png"> -
sizes="any"对rel="icon"无效，仅适用于rel="mask-icon"（Safari 固定标签页） - .ico 文件虽可打包多尺寸，但 Chrome/Firefox 仍倾向读取第一个或最小尺寸，不保证自适应
- 移动端 PWA 添加
rel="apple-touch-icon"时，也需明确sizes，否则 iOS 可能拉伸模糊
真正该用 img 或 picture 实现自适应图片集
如果你目标是让一张图在不同屏幕宽度/DPR 下自动切换源文件，<link> 不是工具，而是干扰项。正确路径是：
- 用
<img src="fallback.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"> - 复杂艺术指导（裁剪/构图变化）用
<picture>：<source media="(min-width: 1200px)" srcset="hero-desktop.jpg"> - 所有图片路径都应为相对或根路径（
/images/xxx.jpg），避免file://协议下失效 - 别指望
<link rel="stylesheet">里的 CSS 能“接管”srcset行为——CSSbackground-image不支持响应式源集，且无法被搜索引擎索引
容易被忽略的一点：即使你写了完美的 srcset，如果服务器对 WebP/AVIF 等新格式返回了错误的 Content-Type（比如 text/plain），图片照样不显示——这和 <link> 是否写对无关，但排查时常常误以为是 HTML 写错了。
