缩略图本质是带尺寸控制的<img>标签，非独立HTML组件；替换需改src并同步更新srcset/sizes、确保服务端生成多尺寸图、保留width/height防布局偏移。
缩略图不是独立组件，只是带尺寸控制的 <img>
HTML5 没有 <thumbnail> 或 <figure thumbnail> 这类标签。所谓“新闻列表缩略图”，本质就是普通 <img> 标签，靠 width、height 和 CSS 控制显示大小。很多人卡在第一步：翻遍模板代码想找“缩略图模块”，结果只看到一堆 <img src="..."> —— 这就是它。
替换时直接改 src 属性即可，但要注意三点：
- 别只用 CSS 缩放原图（比如
style="width: 120px; height: 80px;"），否则仍会下载整张大图，拖慢加载 - 务必确认新图文件已上传到对应路径，且尺寸合理（建议 320×240 或 480×360，兼顾清晰与体积）
- 如果模板用的是 CMS 动态生成（如 WordPress 的
the_post_thumbnail()），替换需进后台媒体库或修改主题函数，不能只改 HTML 静态文件
批量替换时，优先检查 srcset 和 sizes 是否同步更新
现代模板常为响应式缩略图配 srcset，例如：
<img src="thumb-320.jpg"
srcset="thumb-320.jpg 320w,
thumb-480.jpg 480w,
thumb-640.jpg 640w"
sizes="(max-width: 480px) 100vw, (max-width: 640px) 50vw, 320px"
alt="新闻配图">
只换 src 里的 thumb-320.jpg，却不更新 srcset 中的其他尺寸，会导致小屏设备仍加载旧图；漏掉 sizes，浏览器可能误判显示宽度，选错资源。
立即学习“前端免费学习笔记（深入）”；
- 新图必须按相同命名规则提供多尺寸版本（如
thumb-320.jpg、thumb-480.jpg） -
sizes值要和实际布局匹配：若新闻卡片在桌面端固定宽 320px，就别写成100vw - 用浏览器 DevTools 的 Network 面板验证：切换设备尺寸，看加载的是哪个
srcset地址
用户上传场景下，前端无法“压缩”图片，必须服务端生成缩略图
如果你的模板支持后台上传新闻配图（比如企业站 5.0 多语言版），千万别指望前端 JS 或 CSS 把上传的大图“变小”——那只是视觉缩放，文件体积没变，首屏加载照样卡。
- 真正有效的缩略图，必须由服务端（PHP/Node.js/Python 等）读取原图，用 GD、Sharp、Pillow 等库生成新文件并保存
- 前端只负责调用那个已生成的小图 URL，例如
/uploads/thumbs/news-123-480x360.jpg - 检查模板中图片路径是否硬编码了尺寸后缀（如
-480x360），替换时得保持一致，否则 404
点击缩略图预览大图？别用 <a href="big.jpg"><img></a>
这种写法会让整个页面跳转，体验断裂。新闻列表里每张缩略图都应绑定 JS 事件，点开后用模态框或全屏 overlay 展示大图。
- 给
<img>加个自定义属性存大图地址：data-large-src="news-123-full.jpg" - 用
addEventListener('click', ...)拦截点击，动态创建<div class="modal"><img src="..."></div> - 务必加
loading="lazy"，让非首屏缩略图延迟加载，减少初始请求量
最常被忽略的是：缩略图尺寸属性 width 和 height 必须保留（带单位），否则浏览器无法预留空间，滚动时发生布局偏移（CLS），影响 Core Web Vitals 评分。
