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