必须分离展示尺寸与加载资源：缩略图用独立小图（如thumb-120x90.jpg），data-fullsrc存大图地址，点击时用new image预加载再赋值src；大图需配srcset/sizes、object-fit及显式容器约束，禁用loading="lazy"。
直接用 <img> 实现缩略图切换大图，必须分离“展示尺寸”和“加载资源”，否则缩略图卡顿、大图空白、响应式失效三连击几乎不可避免。
缩略图必须用真实小图，不能靠 CSS 缩放原图
常见错误是只有一张 2000×1500 的原图，然后对所有 <img> 统一写 width: 100px; height: 75px;。浏览器仍会下载完整大图，首屏慢、带宽浪费、移动端卡死。
- 缩略图应单独生成并存放，如
thumb-120x90.jpg，体积控制在 10–30 KB 内 - 每个缩略图
<img>的src必须指向这张小图，不是原图 -
data-fullsrc存放大图地址（如full-1200x900.jpg），仅在点击时触发加载 - 别给缩略图加
loading="lazy"—— 它们本就该优先加载，懒加载反而延迟交互
大图区域不能用 loading="lazy"，得手动预加载
动态切换的 <img id="main-img"> 上设 loading="lazy" 是无效的。浏览器无法预判哪张图会被点中，src 改变后不会重新触发 lazy 加载逻辑，结果就是白屏或长时间 loading 状态。
- 点击缩略图时，先创建
new Image()实例，用onload/onerror控制状态 - 成功后再赋值给
document.getElementById('main-img').src，避免 DOM 频繁重绘 - 快速连点需防并发：可加节流（如 300ms 内忽略后续点击）或取消前一个
Image实例（需保存引用） - 初始
src设为空字符串或占位图路径，防止页面加载时无意义请求
大图自适应显示必须组合 max-width + object-fit + 显式容器约束
只写 max-width: 100%; height: auto; 对大图区域往往不够 —— 它能防溢出，但无法解决“固定高宽容器里怎么填满又不失真”这个高频场景。
- 如果大图容器有固定尺寸（如
width: 800px; height: 600px;），必须配object-fit: contain或cover，且<img>要设width: 100%; height: 100% - 若容器宽度不固定（如响应式卡片），优先用
max-width: 100%; height: auto;，再加min-width: 0防 flex 布局下失效 - 别在
<img>标签里写width="800" style="max-width:90%"行内属性，它会覆盖height: auto - IE 不支持
object-fit，fallback 方案只能用background-image，但会丢失alt和 SEO —— 若需兼容 IE，提前评估成本是否值得
srcset 和 sizes 不是可选项，是上线必配项
即使你已用 max-width 和 object-fit 控制了显示效果，没配 srcset + sizes 就等于让用户在手机上硬载 4K 图。这不是“优化”，是基础交付红线。
-
srcset列的是图片源固有宽度，单位是w（如"photo-400.jpg 400w, photo-800.jpg 800w"） -
sizes必须和 CSS 中该大图容器的**实际显示宽度逻辑一致**，比如sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" - 漏掉
sizes，浏览器默认按100vw估算，小屏也载大图；写错（如写成50%）会导致选图完全失准 -
src应作为降级 fallback，不能省；WebP 格式建议同步提供，现代浏览器基本支持
最易被忽略的一点：缩略图和大图的尺寸策略本质不同——缩略图要「小而快」，靠独立小图 + 静态 src；大图要「按需加载 + 按需渲染」，靠 data-fullsrc + Image 预加载 + srcset/sizes + object-fit。混用或跳步，问题立刻浮现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
