1. 矢量图与位图。

•  矢量图：缩放、扭转不失踪真的图像名目，不管你离多近去看都看不到图形的最小单元。存储的文件较小，可是很难默示色彩条理丰硕的传神图像效不美观。你可以理解成完美的圆型、抛物线等外形。
•  位图：又叫栅格图、像素图，最小单元由像素组成，缩放、扭转会失踪真。举个例子来说，位图就好比十字绣，远看时画面细腻多彩，近看时能看到每一针的色彩过渡。

为侍趵磙损压缩的图也会有失踪真的？因为他的压缩事理是经由过程索引图像上不异区域的颜色进行压缩和还原，也就是说只有在图像的颜色数目小于我们可以保留的颜色数目时，才能真实的记实和还原图像，否则就会丢失踪一些图像信息。例如，PNG-8和GIF名目：

在网站优化中，如不美观图片优化得好，不单可以提高页面的加载速度，晋升网站的用户体验，而且还可以经由过程图片优化来节约网站的带宽。那么作为页面构建工程师应该采用什么体例滥暌古化图片，既能保证UI的还原度，又使图片最精简呢？下面我就小我经验，来简单介绍一下图片优化的体例，首先我们领幻突皓图片方面的常识： 

• 无损压缩：操作数据的统计冗余进行压缩，真实的记实图像膳缦憧个像素点的数据信息。他的事理是先判定哪些颜色不异，哪些分歧，将不异颜色的数据信息进行压缩记实，把分歧的数据此外保留。多次存储后图片的品质不会下降。

下表为矢量图和位图的对比：

十字绣                                                                                    十字绣放年夜

2.有损压缩、无损压缩。

• 有损压缩：特点是连结颜色的逐渐转变，按照人眼不雅察看现实世界的 俄然转变, 然后使用四周的颜色经由过程渐变或其他形式进行填充。因为素点的数据信息，所以存储量会降低，还不会影响图像的还原度质会有所下降。JPG是有损压缩名目，在存储图像时会把图像分化成8*8像素的网格单零丁优化。举个例子：白色小块为8*8px，黑色底色块为32*32px，当小白块已经不是纯白色了，它四周的小白块却很尖锐，如下图所示：

右上角的白色格子刚好没有在8*8像素的网格单元中，所以保留时会跟四周的8*8的网格单元颜色融合，下图的效不美观：

这就是日常平常保留JPG图片时图像会恍惚的原因，下面是几张彩色图的局部对比效不美观：

而PNG24为真彩色所以颜色表为空，不会失踪真。