你一定遇到过这种情况：一个 logo 放大后就变成马赛克，而另一个无论放多大都边缘锐利。前者是位图，后者多半是矢量图。理解这两类图像的本质差异，能让你在导出、压缩、做网站时少踩无数坑。
一、位图：用像素点阵记录画面
位图（也叫栅格图）把图像拆成密密麻麻的"小格子"，每个格子记录一个颜色，也就是像素。JPG、PNG、WebP、GIF 都属于这一类。它的特点是：信息量由分辨率决定——一张 1000×1000 的图，就是一百万个颜色点。
位图的优点是能表现复杂的连续色彩和照片级的细节；缺点也很明显：放大到超过原始分辨率，软件只能"猜"中间该填什么色，于是出现模糊和锯齿。文件体积也随分辨率线性增长。
二、矢量图：用数学公式画形状
矢量图不记录像素，而是记录"从哪里画一条怎样的线、填充什么颜色"。比如一个圆，矢量文件存的是"圆心、半径、描边色"，而不是一圈像素。无论你把它放大到海报还是缩到图标，渲染器都按公式重新计算，边缘永远清晰。
最常用的矢量格式是 SVG，它本质就是一段 XML 文本，可以直接嵌进网页、用 CSS 改颜色、被搜索引擎读懂。缺点是不擅长表现照片那种细腻渐变和噪点——你很难用公式描述一张人脸照片。
三、怎么选：看内容类型
简单经验法则：
- logo、图标、插画、图表、文字类图形 → 优先矢量（SVG）。它们由清晰的线条和色块组成，矢量天然擅长，且任意缩放不失真、体积常更小。
- 照片、复杂渐变、写实图像 → 位图（JPG/WebP）。这类内容矢量无能为力，位图才是归宿。
网站上线时，把图标做成 SVG、照片压成 WebP，是兼顾清晰与速度的标准做法。
四、工作流里的实用技巧
很多时候你拿到的图尺寸不对，先别硬拉。用图片缩放按目标分辨率先定尺寸，避免后续拉伸失真；需要换格式时用图片格式转换在 PNG/JPG/WebP 之间切换，不必装笨重的桌面软件。
做网站或 App 时，别忘了 favicon——那个显示在浏览器标签上的小图标。用图标生成器把一张图批量导出成多种尺寸（包括 SVG 和 .ico），省去手工裁切的麻烦。
五、一个常见误区
有人以为"SVG 一定比 PNG 小"。不一定。如果一个矢量图包含了成千上万个精细路径（比如把照片转成的矢量），它的文本体积可能比同等效果的 PNG 还大。格式选择终究要回到"内容适合谁"这个原点，而不是一刀切。
小结
矢量与位图不是谁取代谁，而是各司其职：矢量管"形状清晰、任意缩放"，位图管"色彩真实、表现照片"。记住"logo 用 SVG、照片用位图"这条主线，再配合合适的缩放与格式转换工具，你产出的图像就能既好看又轻快。