浏览器里的图形③：位图为什么放大会糊（采样与矢量）
位图（bitmap / raster）用网格上的颜色采样描述图像；矢量（vector）用几何描述描述图像。
把一张小图拉到很大，常常出现马赛克或发糊。有人怪「分辨率不够」，有人怪「没开锐化」。更干净的说法是：你在放大一份有限的采样，系统只能重复或猜测中间的颜色。
本篇只讲原理，不谈修图软件按钮。
一、先说一个具体麻烦
一张 32×32 的图标，CSS 写成 width: 256px。边缘呈锯齿方块，细节消失。
同一图案若是 SVG 路径，放大后边缘仍相对干净。
差别不在「浏览器偏心」，在表示方式：一个存的是采样点，一个存的是可再渲染的几何。
二、位图本质是「采样表」
可以把位图想成一张测量记录：在规则网格上，每个格子记录一种颜色（以及可能的透明度）。
（1）网格越密，细节潜力越大
（2）一旦定稿，没有记录下来的细节就不存在于文件里
（3）显示时，屏幕也是另一套采样网格；两边对不齐时，要做重采样（resampling）
上一篇的 ImageData，正是这块采样表在内存里的一种样子：逐像素 RGBA。
三、放大时到底发生了什么
放大的核心操作，是把「少量源像素」映射到「更多屏像素」。
最近邻（nearest）：一个源像素变成一大块同色方块 → 马赛克感强，边缘硬。
双线性等插值：用邻近像素估计中间色 → 更平滑，但边缘也会发虚，像被抹过。
两种结果不同，共同点是：信息量没有凭空增加。插值不是「找回」相机没拍到的细节，只是用邻居做更顺眼的猜测。
所以「放大会糊」往往包含两层观感：
（1）块状：采样太稀，结构暴露
（2）发虚：插值把硬边做成过渡
锐化滤镜可以制造对比度，让人觉得「清楚一点」，仍然不是真正增加原始细节。
四、矢量为什么更能放大
矢量存的是点、线、曲线、填充规则等几何描述。显示时，按当前尺寸重新光栅化成像素。
放大等于「用更密的屏幕网格重新画一遍几何」，而不是「把旧像素撑大」。因此边缘可以继续对齐新分辨率（仍受屏幕像素极限约束，但不会出现源图那种放大色块）。
这也是图标与 logo 常用 SVG 的原因之一：要在多种尺寸下保持清晰。
代价同样存在：
（1）极复杂矢量，光栅化成本更高
（2）照片级纹理不适合靠矢量硬描
（3）最终上屏仍是像素；「矢量清晰」指的是可再采样，不是超越显示器件
五、和 Canvas / CSS 的直观联系
（1）Canvas 位图缓冲区固定时，用 CSS 拉大元素，等于拉伸那份采样 → 易糊（系列①提过）
（2）高 DPI 屏用更多设备像素画同一 CSS 像素，是在提高显示采样密度；源仍是小图的话，放大模糊依旧
（3）image-rendering 可选择偏「硬块」还是偏「平滑」，只改重采样策略，不创造细节
六、选型直觉
（1）照片、复杂纹理 → 位图；需要大图就准备够大的源，或接受裁切
（2）图标、UI 形状、logo → 优先矢量
（3）必须放大的位图 → 换更高分辨率源，比后期锐化更有效
（4）像素风游戏刻意要「块」→ 可用最近邻，那是风格不是缺陷
七、常见误区
（1）以为 AI 放大等于光学变焦拍到的细节
生成细节可能好看，不等于原始采样里有过。
（2）把所有糊都怪 JPEG
压缩会伤细节，但放大糊的主因仍是采样不足。
（3）矢量万能
照片转矢量往往更糟。
（4）只加 CSS 放大，不换资源
产品上最常见的偷懒，也最容易糊。
八、小结与专栏收束
位图是有限网格上的颜色采样；放大是把稀采样铺到密网格，只能重复或插值猜测，所以易糊。矢量保留几何，按尺寸重新画，所以更耐缩放。
「浏览器里的图形」三篇到这里收一条主线：Canvas 下指令 → ImageData 碰像素 → 理解采样与矢量的界限。之后做滤镜、图标、导出，都绕不开这条线。
（完）