应优先用x描述符适配固定尺寸图片，w描述符必须配合sizes使用；混用会导致srcset失效，浏览器只认一种描述符。

srcset 用 x 描述符还是 w 描述符？

简单适配就用 1x/2x，别碰 390w 这类 w 描述符——除非你同时写了 sizes 并精确计算了物理像素宽度。iPhone 14 视口 CSS 宽是 390px，DPR=3，但写 srcset="a@1x.jpg 390w, a@2x.jpg 780w"，浏览器只会按 390px 匹配，永远加载 @1x。

• 直接写 srcset="a@1x.jpg 1x, a@2x.jpg 2x, a@3x.jpg 3x"，浏览器按 window.devicePixelRatio 直接选图，不依赖视口宽度
• 混用 1x 和 780w？浏览器会忽略所有带 x 的部分，只认 w
• src 是兜底项，IE 全系不支持 srcset 时才生效，别省略

image-rendering 设置后还是糊？先看图源有没有换

image-rendering 不负责选图，只控制已加载图片的渲染方式。如果 Network 面板里看到请求的是 a@1x.jpg，那再设 crisp-edges 也没用——它只是把一张被拉伸的 1x 图“锐化显示”，不是变高清。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• Safari/iOS 最稳的是 -webkit-optimize-contrast，Chrome/Firefox 用 crisp-edges 作 fallback
• Tailwind 或重置样式表可能悄悄注入 image-rendering: smooth，必须显式覆盖
• 别留空或设 smooth，那是默认双线性插值，正是模糊源头

background-image 模糊？media query + background-size 缺一不可

background-image 完全不响应 srcset 和 image-rendering。只写 @media (min-resolution: 2dppx) 加载 bg@2x.jpg，但没设 background-size，高分辨率图仍会被二次插值拉伸。

• 必须复合写媒体查询：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)，单写任一条件都会漏掉旧版 Safari 或新版 Chrome
• background-size 要写具体值，比如设计稿宽 750px 就写 750px auto，别用 cover 或 100% 100%
• 文件名严格对应：bg.jpg / bg@2x.jpg / bg@3x.jpg，路径、大小写、扩展名全一致

Vite/webpack 构建后 srcset 路径 404？构建工具不处理 srcset

Webpack 的 file-loader、Vite 的 asset 处理默认只重写 src、href 等白名单属性，srcset 里的路径不会被解析——开发时能跑，上线后 a@2x.jpg 404，回退到 @1x，自然糊。

• 手动确保 a@2x.jpg 文件真实存在，且路径与 srcset 中完全一致（含 @ 符号）
• 某些 CDN 或构建插件会过滤带 @ 的文件名，需检查静态资源是否被拦截
• 更稳妥的做法是用 <picture></picture> + <source type="image/webp"></source>，配合现代格式压缩，减少对多倍图的强依赖

实际项目里最容易被忽略的，是父容器有 transform、scale 或 flex/grid 布局偏差时，max-width: 100% 算出的渲染尺寸 ≠ 图片原始像素尺寸，此时 image-rendering 也救不了。

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