必须用 <picture> 显式声明格式降级链（avif→webp→jpg），<source> 必带 type 属性，末尾 <img> 兜底且不可省略 src 和 alt；开发阶段需全局监听 error 事件并用 DocumentFragment 批量插入提升性能。
用 <picture> + <source type="image/webp"> 实现格式降级
直接写 <img src="x.webp"> 在 Safari 13.1 之前、旧版 Edge 或部分安卓 WebView 中会显示空白——浏览器不认识 WebP，也不自动 fallback。必须靠 <picture> 显式声明支持链。
关键点：
-
<source>必须带type属性，比如type="image/webp"，否则 Safari 会跳过该<source> - 多个
<source>按从现代到老旧顺序排列：avif → webp → jpg，最后必须有<img>兜底 -
<img>的src和alt不可省略，否则语义断裂、无障碍失效 - 不要只写一个
<source>，否则无降级能力；也不要漏掉<img>标签
监听 error 事件做加载失败兜底
开发时一堆小图标不显示，光看 alt 文字没法判断是路径错、图删了，还是 CDN 挂了。手动查太慢，得自动化。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 全局注册一次：
document.querySelectorAll('img').forEach(img => img.addEventListener('error', e => { e.target.src = '/assets/placeholder.svg'; })) - 开发阶段快速定位失败项：
Array.from(document.images).filter(i => i.naturalWidth === 0)，直接列出所有加载失败的<img> - 路径必须全用相对路径，且统一以 HTML 文件所在目录为基准；混用
./images/和images/在嵌套路由下必出问题 - 别用
onerror内联写法（如<img onerror="">），每次错误都要重新解析字符串，逻辑无法复用
给图片加语义标记再批量操作，别依赖 getElementsByClassName
用 getElementsByClassName('product-img') 或 getElementsByTagName('img') 容易出错：前者返回实时 NodeList，循环中增删 class 可能漏改；后者抓到所有 <img>（包括图标、装饰图），干扰逻辑。
正确姿势是加语义属性，再用 querySelectorAll 锁定目标集：
- HTML 中加
data-batch="product"等语义标记：<img data-batch="product" src="p1.jpg" alt="产品A"> - JS 中用
document.querySelectorAll('img[data-batch="product"]')一次锁定 - 遍历时先验证
src是否含有效后缀（.jpg、.webp），再赋值，避免静默失败 -
alt优先从配置数组映射，而不是硬写图${index + 1}，否则语义丢失、SEO 和无障碍都受损
用 DocumentFragment 批量挂载 <picture> 元素
手写一堆 <picture> 难维护；但 JS 生成时边建边插（appendChild）会触发多次重排，卡顿明显。
性能关键点：
- 新建
DocumentFragment，所有<picture>节点先 append 到它里面，最后一次性插入 DOM -
<source>必须显式写type（如image/avif）和sizes，Safari 不认没type的<source> - 容器结构要合理：
<picture>包裹多个<source>，最终<img>是必需的降级出口，不能省略
真正难的不是写对语法，而是让降级在各种边界场景下都“不露破绽”：老浏览器里不白屏、路径错时有占位图、批量操作时不漏图、语义信息不随降级丢失。这些细节堆起来，才是用户感知到的“稳”。
