真正提升效率的是建立可复用、可验证、可批量操作的图片管理流程：用data-属性精准选中元素，JS生成带type/sizes的picture结构，DocumentFragment批量挂载，error事件全局降级，CSS Grid布局并固定宽高比。
直接用 HTML 标签硬写一堆 <img> 不仅难维护，还会在换图、适配、加载失败时反复踩坑——真正提升效率的不是“快写”，而是建立可复用、可验证、可批量操作的图片管理流程。
用 querySelectorAll 批量选中带语义标记的图片元素
手动改每个 <img> 的 src 或 alt 是低效且易错的。关键在于提前约定标记规则，让 JS 能一次锁定目标。
- 别用
getElementsByClassName：它返回实时 NodeList，循环中增删 class 可能跳过或重复处理元素 - 推荐写法：
document.querySelectorAll('img[data-batch="gallery"]')或document.querySelectorAll('[data-role="hero-image"]')，靠data-属性精准锚定用途 - 修改前先校验路径：
if (el.src.includes('.jpg') || el.src.includes('.webp')) { el.src = newSrc; }，避免静默赋值失败
用 JS 驱动生成 <picture>，而非手写冗余 <source>
手写 <picture> 容易漏掉 type 或 sizes，尤其 Safari 会直接忽略没设 type 的 <source>。JS 生成能强制校验结构，还能统一降级逻辑。
- 配置数组必须包含：
src（JPG）、webp、avif、sizes；缺一不可 -
<source>插入顺序要严格：AVIF → WebP → JPG，浏览器按顺序匹配，现代浏览器才真正用上 AVIF - 避免在循环里反复
appendChild：先用DocumentFragment收集所有<picture>，最后一次性挂载，防止重排
全局监听 error 事件 + 控制台快速排查未加载图片
开发阶段大量图片显示为小图标，不是靠肉眼点开检查，而是靠自动化定位。
立即学习“前端免费学习笔记（深入）”；
- 全局兜底降级：
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/在嵌套路由下极易失效
用 CSS Grid 布局图片容器，别用 Flex 做网格
Flex 布局做图片网格时，不同尺寸图片容易断行错位、间隙不均，Grid 才是批量展示的合理选择。
- 声明式控制列数：
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))，自动适配容器宽度 - 固定图片容器宽高比：
aspect-ratio: 4/3+object-fit: cover，防止拉伸变形 - 慎用
onerror内联写法（如<img onerror="">），每次错误都重新解析字符串，逻辑无法复用
最常被忽略的其实是路径基准和 type 属性——前者导致本地开发一切正常、上线后全白屏；后者让 <source> 在 Safari 里形同虚设。这两个点不卡死，其他优化都容易白忙活。
