x描述符按设备像素比选图，适合固定尺寸图片；w描述符按视口宽度选图，需配合sizes属性，适合响应式流体图片；二者不可混用，否则srcset失效。
srcset 里 x 和 w 描述符到底该用哪个
用 srcset 时，x 描述符按设备像素比（dpr）选图，w 描述符按视口宽度选图——二者不能混用，浏览器只认其中一种。混写会导致整个 srcset 被忽略，退化为只加载 src。
常见错误是给高 DPR 屏幕硬塞 1024w 这类宽度假设，结果在 iPhone 14 Pro（dpr=3）上仍加载低清图。真实场景中，x 更适合固定尺寸图片（如头像、图标），w 更适合响应式布局中的流体图片（如 banner、文章配图）。
-
srcset="avatar-1x.jpg 1x, avatar-2x.jpg 2x"—— 简单、可控，但无法适配 dpr=3 的设备（除非补全3x） -
srcset="banner-400.jpg 400w, banner-800.jpg 800w, banner-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw"—— 需配合sizes，否则浏览器按 100vw 估算，可能下错图 - Chrome DevTools 的 Network 面板里看实际加载的资源，别信 “Preview” 里的缩略图——它常缓存旧请求
CSS background-image 怎么响应不同 DPR
CSS 本身不支持 srcset 那种语法，得靠 @media 查询 + background-image 覆盖。关键不是写多少层 @media，而是覆盖逻辑是否可靠：必须从高 DPR 往低写，否则低 DPR 规则会覆盖高 DPR 的。
另外，background-size: cover 或 contain 在高 DPR 下容易放大模糊图，本质是用了低分辨率图源却拉伸渲染。解决办法不是调 CSS，而是换图源。
- 用
min-resolution: 2dppx比min-device-pixel-ratio: 2更稳妥，后者在 Safari 旧版本有兼容问题 - 避免写
background-image: url(img@2x.png);单独一行——没 fallback，dpr=1 设备就空白 - 推荐写法：
background-image: url(img.png); @media (min-resolution: 2dppx) { background-image: url(img@2x.png); }
img 标签和 background-image 的选择边界在哪
图片是内容还是装饰，直接决定用 <img> 还是 CSS background-image。搜索引擎索引、无障碍读屏、SEO alt 文本、预加载优先级——这些都只对 <img> 生效。CSS 背景图不会被爬虫抓取，也不能加 alt，也不参与页面内容流布局计算。
性能上，<img> 支持原生懒加载（loading="lazy"），而背景图只能靠 JS 监听滚动模拟，且无法利用浏览器预加载器提前 fetch。
- 产品页主图、用户上传头像、图文混排中的插图 → 必须用
<img>+srcset - 按钮 hover 状态的装饰性 icon、卡片遮罩层、重复平铺纹理 → 用 CSS
background-image - 想让背景图也参与 SEO？不行。真要兼顾，得用
<img>叠加position: absolute模拟背景效果，再用aria-hidden="true"
CDN 或构建工具怎么自动产出多倍图
手动维护 @2x、@3x 文件太容易漏，实际项目里应该交给工具链。关键是输出路径和命名规则要和前端引用方式对齐，否则 srcset 或 @media 查不到文件。
Webpack 的 image-minimizer-webpack-plugin 可以生成多倍图，但默认不改名；Vite 插件 vite-plugin-imagemin 同理。真正省心的是 CDN 方案：Cloudflare Images、Imgix、Cloudinary 都支持 URL 参数实时生成指定 DPR 的图，比如 https://xxx.com/photo.jpg?width=800&dpr=2。
- 本地构建出多倍图时，确保
srcset中的路径和实际文件名完全一致（大小写、下划线、@符号都不能错） - 用
picture标签做格式降级（WebP → JPEG）时，srcset里的每个source都要单独配 DPR 或 width 描述符，不能共用 - 测试时别只切浏览器窗口大小——真机连 USB 调试，用 Chrome 的 “Rendering” 面板强制设置 DPR，比响应式模式更准
事情说清了就结束。最常被忽略的其实是 sizes 属性的必要性：没有它，w 描述符基本等于白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
