给产品经理讲技术｜五分钟理解技术名词：位图与矢量图
【相关推荐】
给产品经理讲技术丨如何适配iOS屏幕
给产品经理讲技术 | 互联网的黄金矿工：爬虫
给产品经理讲技术｜撩妹技术三部曲之“设计模式”
给产品经理讲技术丨没线，并不可怕？
给产品经理讲技术丨提需求的正确姿势是什么
骚年，拿出你的手机，打开相册，找一张照片，然后将这张照片放大放大再放大，看下效果呢。也许在你想象中，放大后的效果应该是这样的：
结果你看到的却是这样的：
说好的高清无马呢，怎么变成这样了，太坑爹了吧。
图片为什么会变糊了呢？这个要从图片的格式说起，如果你看过「说说常见的图片格式」这篇旧文，知道JPG、PNG、WEBP这些常用图片格式，它们都有一个共性，就是都是用像素点阵来描述一张图片，我们把这种图片称之为「位图」。
在一张分辨率为20&215;20的「位图」图像中，是一个点表示一个像素，如果你将这张照片放大到40&215;40尺寸，但是图像中仍然只有400个像素点，那么就会变成4个点表示一个像素。如果你将它放得更大，那么只可能是在更大的区域内显示一个像素点，这样你在视觉上就会更容易看清每个孤立的像素点，从而觉得它糊了。所以在位图上，你想放大一张图片，需要找到对应分辨率更高的同一张图片，否则它只是物理尺寸变大了，内容却看上去更糊了。
与「位图」对应的另一种图片格式叫做「矢量图」，「矢量图」是由点、直线或者多边形等几何图元构成的图像，这些点、线和多边形都是可以用数值和方程式描述出来的。所以说，「矢量图」是不受图片大小限制的，一旦描述它内容的方程式确定了，无论这张图片缩放到多大，它到内容都可以等比例的计算出来，不会存在多个物理点表示一个像素点的情况。它的缩放效果就和第一张图片一样。常见的「矢量图」格式是以SVG为后缀的文件。
既然「矢量图」可以做到缩放不失真，为什么不把所有图片都做成「矢量图」呢？答案是，做不到。你想一下，一张普通的图片里面，有人物也有风景，这些是无法用数学方程式来描述每一个细节的，只有按照点对点的映射做成一张「位图」，而这张「位图」的分辨率就取决于镜头的分辨率了。
可是，如果这张图片是我们自己通过想象灵感创造出来的，那就有机会将它做成「矢量图」了。毕竟我们是用点、线的组合来完成的这次创作，如果在创作过程中，用软件将这些点、线的数学表达式记录下来，那么最终就可以生成一张「矢量图」了。
「矢量图」都可以转换成为某一个尺寸的「位图」，所以，我们见到的很多网站的LOGO都有不同大小，这并不是设计师做了N张图片，而是将同一张「矢量图」导出了N个尺寸。
由于「位图」的格式简单粗暴，它在各种系统平台上都得到了良好的支持，而「矢量图」的需要特定的软件才能打开，这个也限制了「矢量图」的广泛使用。
欢迎添加微信公众号：给产品经理讲技术
关键字：产品经理, 位图, 矢量图, 图片
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
