web前端常用图片类型及压缩方式
图片类型：位图 、矢量图
什么是位图？
也叫做点阵图像或栅格图像，是由一个一个的像素点组成，我们生活中的照相机的图片就是位图图片。
什么是矢量图？
矢量图使用直线和曲线来描述图，和分辨率无关，不会因为放大缩小影响清晰度。和位图相比保存了较少的信息，文件较小。
有损压缩（lossy compression）和无损压缩（Lossless Compression）
有损压缩会将一些人眼看不到的细节忽略掉，保留重要的信息，牺牲质量减少数据量，jpg就是一种有损压缩。无损压缩则是保留所有的细节，png 和 gif 都是无损压缩。
常见位图类型：jpg png gif
jpg： 是一种图片影像而广泛使用的有损压缩的标准方法，最常见的扩展名格式为.jpg。其他常用的扩展名还有 .jpeg .jpe .jfif .jif 。不可重复压缩，不支持透明度
png: 是一种无损压缩的位图图形格式，支持Alpha通道也就是透明/半透明特性，支持存储附加文本信息，比如图片的名称、作者、著作权等。可多次重复压缩。ps制图软件可以选择以 png-32，png-24, png-8多种方式导出，默认是以png-32。 其中png-8是将图片中的每一种颜色存储在调色板中（PLTE），该调色板只有255种颜色，每个像素就只是需要8bits来表达对应的颜色，相比之下png-8使用更少的空间来存储颜色。png-24 与 png-32 最大的区别在于png-24 没有透明通道。所以不支持透明的图片。
gif：是一种无损压缩的位图图形文件格式，打开一张动图会发现它是以多张图片组成的压缩文档。gif只支持256种颜色。只要图像不多于256种颜色，则可以减少图片的大小，保正图片的质量。
常见矢量图类型： svg canvas
SVG: 以下是svg格式的图片
image
<svg t="1561385862969" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1563" width="200" height="200"><path d="M621.67 408.025c16.623-74.241 28.228-127.936 34.837-161.196 16.641-83.742-26.57-161.496-112.207-161.496-77.237 0-116.01 38.382-138.886 115.095l-0.582 2.248c-13.725 62.048-34.72 110.155-62.511 144.577-29.397 36.41-73.174 57.97-119.733 58.965l-21.904 0.468c-52.244 1.117-94.017 44.131-94.017 96.81v317.837c0 64.802 52.11 117.334 116.392 117.334h412.522c84.739 0 160.38-53.563 189.123-133.922l85.697-239.587c21.805-60.96-9.54-128.196-70.012-150.177a115.556 115.556 0 0 0-39.48-6.956H621.67z m-77.41-258.692c39.258 0 59.498 36.474 49.884 84.925-7.57 38.148-21.987 104.43-43.217 198.67-4.511 20.026 10.565 39.097 30.907 39.097h218.657c6.11 0 12.172 1.07 17.92 3.162 27.446 9.991 41.673 40.553 31.776 68.262l-85.57 239.587c-19.638 54.982-71.316 91.63-129.21 91.63H223.494c-29.176 0-52.827-23.877-52.827-53.333V503.495c0-17.86 14.142-32.444 31.83-32.823l21.87-0.468c65.088-1.394 126.285-31.576 167.38-82.551 34.347-42.605 59.146-99.315 74.865-169.877 15.487-51.444 32.941-68.443 77.649-68.443z" fill="#000000" p-id="1564"></path></svg>
通过代码可以看出svg是一种标记语言，svg不依赖分辨率,放大缩小都不会影响他的清晰度。还可以修改它的高度宽度等图片属性，你还可以给其中的元素添加js事件。
Canvas: 是通过js来绘制的，是逐像素进行渲染的。一但图像被绘制完成。如果位置发生改变。需要重新绘制。不支持js的事件处理。
