优先用srcset而非@media控制高清图加载，因为srcset在html解析阶段就决策下载哪张图，而@media+background-image会导致所有设备下载最大图。
大屏幕用srcset还是@media？别混着用
直接说结论：CSS媒体查询本身不加载图片，只控制显示；真正决定“是否下载高清图”的是HTML的srcset和sizes，或者JS动态换图。纯靠@media + background-image会强制所有设备都下载最大图——这是最常踩的坑。
常见错误现象：background-image: url(/img/banner@2x.jpg);写在@media (min-width: 1200px)里，但小屏用户打开页面时仍会下载那张4MB的banner@2x.jpg。
- 使用场景：需要视觉清晰度（如Banner、产品主图）且资源体积可控时，优先走
srcset - 如果必须用CSS背景图（比如渐变叠加、伪元素装饰），就用
image-set()，但注意兼容性 -
image-set()在Safari 16.4+、Chrome 110+才稳定支持，老版本会直接忽略整条声明
image-set()怎么写才不白写
image-set()是CSS原生方案，但它不是“智能选图”，而是浏览器按自己判断选一个最匹配的源，你得给它靠谱的选项。
典型错误：background-image: image-set(url(img.jpg) 1x, url(img@2x.jpg) 2x);——这在Retina Mac上可能选2x，但在高DPR的Windows平板上可能直接跳过，回退到background-image初始值（甚至空白）。
- 必须提供至少两个明确DPR层级，比如
1x、2x、3x，不能只写2x - 推荐加
type限定格式：url(img.avif) type("image/avif") 2x，避免不支持AVIF的浏览器卡住 - 永远配一个基础
background-image兜底：background-image: url(img.jpg); background-image: image-set(...);
为什么srcset比CSS更可靠
因为srcset让浏览器在HTML解析阶段就决策加载哪张图，不依赖CSS渲染流程，也不受JS阻塞影响。
错误用法：<img src="img.jpg"> + 后续JS根据window.innerWidth换src——首屏仍会加载默认图，还可能触发两次请求。
- 正确写法：
<img src="img-400.jpg" srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w" sizes="(max-width: 480px) 400px, (max-width: 960px) 800px, 1200px"> -
sizes不是可选的：没它，浏览器只能按100vw猜，大概率下错图 - 大屏关键图建议单独设
fetchpriority="high"，尤其在<picture></picture>里
高清图体积失控怎么办
分辨率翻倍，体积常涨3–4倍。不压缩就上@2x，大屏体验反而更差——滚动卡顿、内存爆掉、LCP延迟。
常见错误：导出一张6000×4000的PNG丢进image-set()，以为“大屏就要大图”。其实人眼在2米外根本分不清4K和2K细节。
- 实测建议：桌面端主图宽度超过1920px后，每增加400px分辨率，体积增幅应≤15%
- 优先用
avif或webp，<picture></picture>里用<source type="image/avif"></source>兜底<img> - CDN开启
Accept协商自动转码，比前端硬切格式更稳
真正难的不是写对@media，是搞清“这张图到底要不要在大屏加载”——有时候删掉@2x，用CSS缩放+锐化滤镜，体验反而更顺。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
