应使用srcset提供多档图片尺寸、sizes定义不同视口下的显示宽度，二者协同让浏览器根据视口宽度与设备像素比自动选择最优资源，避免浪费带宽。
怎么用 srcset 和 sizes 应对不同设备的图片需求
单靠一个 <img src="photo.jpg"> 已经不够用了——它无法告诉浏览器“这张图在 2x 屏幕下该加载多大尺寸”或“在小屏上我只打算显示 300px 宽”。srcset 和 sizes 是 HTML 原生支持的响应式图片方案，不依赖 JS，兼容性好（Chrome 38+/Firefox 38+/Safari 9+）。
常见错误是只写 srcset 却漏掉 sizes，导致浏览器默认按 100vw 计算，选错资源；或者把像素密度描述（2x）和宽度描述（600w）混用。
-
srcset列出多个候选源，用逗号分隔，格式为："photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w" -
sizes告诉浏览器“这张图在不同视口宽度下会占多宽”，例如：sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" - 浏览器根据
sizes算出目标宽度，再从srcset中选最接近且不浪费带宽的资源
什么时候该用 <picture></picture> 而不是 <img>
<picture></picture> 不是“高级版 <img>”，它是为**内容适配（art direction）** 或 **格式降级** 设计的。比如：在桌面端展示裁剪过的宽幅图，在移动端换一张竖构图；或优先用 webp，老浏览器回退到 jpeg。
容易踩的坑是滥用 <picture></picture> 替代简单响应式场景——它增加 HTML 体积、影响可读性，且每个 <source></source> 都要手动维护 media 或 type，稍有疏漏就导致 fallback 失效。
- 必须包含一个
<img>作为兜底，否则无渲染（即使前面<source></source>全部不匹配） -
type属性值必须是 MIME 类型，如type="image/webp"，不能写.webp - 多个
<source></source>的顺序很重要：浏览器从上到下匹配，第一个满足条件的生效
预加载关键图片时为什么 crossorigin 经常被忽略
用 <link rel="preload" as="image"> 加载首屏大图能减少渲染延迟，但若图片路径跨域（包括同域但协议不同，如 http → https），且没加 crossorigin，浏览器会静默失败——既不报错，也不加载，DevTools 的 Network 面板里都看不到请求。
更隐蔽的问题是：某些 CDN 或图床返回的响应头缺失 Access-Control-Allow-Origin，此时即使写了 crossorigin，图片仍可能无法解码用于 Canvas 或 getImageData，但 <img> 标签本身还能显示。
- 只要图片 URL 不是同协议 + 同域名 + 同端口，就应加
crossorigin - 如果服务端明确支持 CORS，用
crossorigin="anonymous"；若需携带凭据（如 Cookie），用crossorigin="use-credentials" - 配合
fetchpriority="high"可进一步提示浏览器提升加载优先级（Chrome 107+）
本地开发时图片路径出错的三个典型表现
路径问题在部署前后行为不一致，尤其当项目走构建工具（Vite/Webpack）或托管在子路径（如 https://example.com/my-app/）时。最常被忽视的是相对路径的基准点——它取决于当前 HTML 文件位置，而非 JS 或 CSS 所在路径。
比如 index.html 在根目录，pages/detail.html 在子目录，两者里写 <img src="assets/logo.png">，实际请求路径完全不同。
- 404 错误但控制台无提示？检查 DevTools Network 面板里图片请求的真实 URL，对比文件系统真实路径
- 本地能打开，部署后空白？大概率是用了相对路径，而服务器没配置正确的
base或public目录映射 - Vite 项目中图片放在
src/assets下，必须用import或new URL(..., import.meta.url)，直接写字符串路径会被视为静态资源，构建后路径失效
图片源管理真正的复杂点不在语法，而在决策链路：你得先判断这张图是“响应式尺寸变化”还是“内容需要重构”，再决定用 srcset 还是 <picture></picture>；预加载前得确认跨域策略是否就位；路径写法得匹配构建工具的资产处理规则——每一步选错，都会在某个环境里悄悄失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
