浏览器未加载指定高分辨率图，主因是srcset中w描述符与原图真实宽度不符或sizes未匹配实际渲染宽度；需用devtools禁用缓存后验证加载源，并确保sizes媒体查询与css布局完全对齐。
img 标签的 srcset 和 sizes 不起作用时怎么办
浏览器没加载你指定的高分辨率图，或者响应式图片完全退化成单张图——大概率是 srcset 里写了错误的像素密度描述符，或 sizes 没匹配当前视口宽度。比如写成 sizes="(max-width: 768px) 100vw, 50vw"，但页面实际容器被 CSS 限制为 max-width: 600px，这时浏览器可能永远选不到小图。
实操建议：
- 用 Chrome DevTools 的 Network 面板勾选「Disable cache」，刷新后看实际加载的是哪张图，右键图片 → 「Copy」→ 「Copy response」可确认返回尺寸
-
srcset中的宽度描述符（如320w）必须和原图真实宽度一致，不能写估算值；否则sizes计算出的“目标尺寸”会错位 - 如果只支持现代浏览器，优先用
srcset+sizes；若需兼容 IE 或老 Android，就得靠<picture></picture>+<source></source>降级
picture 元素里 source 的 media 属性不触发
写了 <source media="(min-width: 768px)" srcset="large.jpg"></source>，但桌面端还是加载了 fallback 的 <img src="small.jpg">——常见原因是 media 查询未生效，比如页面没设 viewport meta，或 CSS 中有 transform: scale() 干扰了视口计算。
实操建议：
- 确保
里有<meta name="viewport" content="width=device-width, initial-scale=1"> -
<source></source>必须写在<img>标签之前，且所有<source></source>都必须有srcset或src，空值会被跳过 - IE 完全不支持
<picture></picture>，哪怕加了 polyfill（如 picturefill），也要检查是否在 DOM ready 后手动调用picturefill()
img 的 alt 文本被当成降级内容显示出来
当图片 404 或路径错误时，alt 文字直接撑开布局、挡住按钮——这不是降级，是失败表现。真正的降级应该静默兜底，比如用占位色块或 SVG 占位符，而不是让用户读到一串开发写的调试文字。
实操建议：
-
alt只用于无障碍场景，不要塞“图片加载失败”，而应描述图像本意，如alt="产品主图：黑色无线耳机，带银色充电盒" - 需要视觉降级效果，用 CSS 的
img:not([src]), img[src=""]选择器控制样式，例如设background: #f0f0f0+border: 1px dashed #ccc - 更稳妥的做法是监听
onerror，动态替换src到一个最小 SVG 占位符：<img src="real.jpg" onerror="this.src='data:image/svg+xml,<svg xmlns=" http: style="max-width:90%" style="max-width:90%"><rect width="100%" height="100%" fill="#eee"></rect><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="12" fill="#999">no image</text>';"
WebP 图片 fallback 到 JPEG 时颜色异常
Chrome 加载 WebP 正常，Safari 却显示偏色的 JPEG——不是编码问题，而是 WebP 原图用了非标准色彩空间（如 CMYK 或带 ICC Profile），而 JPEG fallback 没做色彩管理转换，导致 sRGB 渲染失真。
实操建议：
- 生成 WebP 时强制输出 sRGB，例如用 ImageMagick：
convert input.jpg -colorspace sRGB -define webp:lossless=true output.webp - 用
<picture></picture>时，确保所有<source></source>的图片都经过统一色彩空间校验，别让 WebP 是 sRGB、JPEG 是 Adobe RGB - 如果项目用 webpack，可通过
image-minimizer-webpack-plugin的loaderOptions统一指定quality和colorspace参数，避免人工漏处理
真正难的不是写对语法，而是让每张图在各种网络、设备、缓存状态下，都稳定走通它该走的那条降级路径。尤其要注意 onerror 在某些安卓 WebView 里不会触发，得配合 Service Worker 拦截图片请求做兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
