缩略图本质是普通标签，需通过width/height属性控制尺寸、srcset/sizes实现响应式、decoding="async"优化解码、loading="lazy"延迟加载，并服务端生成小图以提升性能。
缩略图本质就是 ![HTML5怎样插入缩略图_HTML5插入缩略图操作【预览】]()
HTML5 没有专门的“缩略图标签”，所谓缩略图只是尺寸较小、用于预览的普通图片。直接用
常见错误是试图找 width、height 和 CSS。
- 优先用
width和height属性（带单位）设定初始尺寸，避免布局偏移（layout shift） - 不要只靠 CSS 缩放原图，否则仍会下载完整尺寸资源，浪费带宽
- 若缩略图来自用户上传，必须服务端生成对应小图，前端无法“压缩”文件体积
用 srcset + sizes 实现响应式缩略图
移动端常需不同尺寸缩略图，硬写多个 srcset 是标准解法，浏览器按设备像素比和视口宽度自动选最合适的资源。
@@##@@
-
src是降级 fallback，必须提供，且建议为最小常用尺寸 -
srcset中每个项格式为"路径 尺寸w"，w表示该图源的固有宽度（非显示宽度） -
sizes告诉浏览器“在什么条件下，这张缩略图将显示多宽”，影响选图逻辑 - 漏掉
sizes会导致浏览器默认按 100vw 选图，可能加载过大资源
点击缩略图预览大图：别用
- 给缩略图加
![HTML5怎样插入缩略图_HTML5插入缩略图操作【预览】]()
- 监听
data-large-src，阻止默认行为，动态插入 
- 务必添加
click，避免首屏外缩略图提前加载
- 键盘用户需要支持
loading="lazy" 触发，否则可访问性不达标
性能陷阱：缩略图加载慢 ≠ 图片太大，可能是未启用缓存或缺少 Enter
![HTML5怎样插入缩略图_HTML5插入缩略图操作【预览】]()
data-large-src，阻止默认行为，动态插入 click，避免首屏外缩略图提前加载loading="lazy" 触发，否则可访问性不达标Enter
即使缩略图只有 20KB，滚动时仍卡顿？常见原因是浏览器默认同步解码图像，阻塞主线程。尤其在列表页大量缩略图场景下明显。
立即学习“前端免费学习笔记（深入）”；
- 强制异步解码：
Space，Chrome/Firefox/Edge 均支持 - 检查 HTTP 响应头是否含
decoding="async"，静态缩略图应强缓存一年 - 避免在
Cache-Control: public, max-age=31536000同时又没设style="max-width:90%"属性——导致重排+重绘 - WebP 格式缩略图比 JPEG 小 25–35%，但需确认目标浏览器支持（IE 不支持）
缩略图的核心矛盾从来不在“怎么插”，而在“怎么让浏览器少做无用功”。尺寸、格式、加载时机、解码方式，四者缺一不可。漏掉任意一项，都可能让“小图”拖垮整个页面。
