[TOC] ## 前言 本篇主要介绍web中不同的图片种类以及每种的特点，我们在什么情况下使用何种图片的建议。有些图片格式比如psd等不会出现在web应用中，不做说明。 ## 图片分类 ### jpg * 基本介绍 JPEG是有损的、采用直接色的、点阵图。JPEG图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息，也即是进行了有损压缩。JPEG的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。 * **使用建议** 色彩丰富的、大的图片切成jpg的； ### png（png8 png24） * **PNG-8介绍** PNG全称Portable Network Graphics，PNG-8是PNG的索引色版本，都最多只能展示256种颜色。PNG-8是无损的、使用索引色的、点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。 现在，除非需要动画的支持，否则我们没有理由使用GIF而不是PNG-8。当然了，PNG-8本身也是支持动画的，只是浏览器支持得不好，不像GIF那样受到广泛的支持。可以看到PNG-8具有更好的透明度支持。 结论：适合做图标的格式，色彩较简单的 * **PNG-24介绍** PNG-24是PNG的直接色版本，最多可展示的颜色数量多大1600万。PNG-24是无损的、使用直接色的、点阵图。无损的、使用直接色的点阵图，听起来非常像BMP，是的，从显示效果上来看，PNG-24跟BMP没有不同。PNG-24的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。虽然PNG-24的一个很大的目标，是替换JPEG的使用。但一般而言，PNG-24的文件大小是JPEG的五倍之多，而显示效果则通常只能获得一点点提升。所以，只有在你不在乎图片的文件体积，而想要最好的显示效果时，才应该使用PNG-24格式。另外，PNG-24跟PNG-8一样，是支持图片透明度的 * **8与24的核心区别** 1 存储方式不同，一个是8位索引存储，一个是24位索引存储 2 8只能透明或者不透明，而24可以设置半透明，因为不二存储通道里8只有1位，而24的有8位 * **使用建议** 尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的； 半透明的切成png24。 ### SVG * 基本介绍 SVG全称Scalable Vector Graphics，是无损的、矢量图。SVG跟上面这些图片格式最大的不同，是SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图片的时候，你看到的还是线和曲线，而不会出现像素点。这意味着SVG图片在放大时，不会失真，所以它非常适合用来绘制企业Logo、Icon等。SVG是很多种矢量图中的一种，它的特点是使用XML来描述图片。借助于前几年XML技术的流行，SVG也流行了很多。使用XML的优点是，任何时候你都可以把它当做一个文本文件来对待，也就是说，你可以非常方便的修改SVG图片，你所需要的只需要一个文本编辑器。SVG并非只能绘制简单的Logo类的图片，它可以绘制出精致的图片的。 * **使用建议** 使用场景最多的还是使用svg可以生成批量的图标字体或者说样式 ### WebP * 基本介绍 WebPWebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。想象Web上的图片之多，百分之几十的提升，是非常非常大的优化。只可惜，目前只有Chrome浏览器和Opera浏览器支持WebP格式，所以WebP的应用并不广泛。为了使用更先进的技术，比如WebP图片格式，来压缩互联网上传输的数据流量，谷歌甚至提供了Chrome Data Compression Proxy，设置了Chrome Data Compression Proxy作为Web代理之后，你访问的所有网站中的图片，在经过Proxy的时候，都会被转换成WebP格式，以降低图片文件的大小。 * **使用建议** 有一定的兼容问题 ，不建议大范围使用 ### GIF * 基本介绍 全称Graphics Interchange Format，采用LZW压缩算法进行编码。是无损的、采用索引色的、点阵图。GIF是无损的，采用GIF格式保存图片不会降低图片质量。但得益于数据的压缩，GIF格式的图片，其文件大小要远小于BMP格式的图片。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但，GIF格式仅支持8bit的索引色，即在整个图片中，只能存在256种不同的颜色。 * **使用建议** 对色彩要求不高同时需要文件体积较小的场景，比如企业Logo、线框类的图等。 支持动画以及透明度要求的 ### BMP * 基本介绍 BMP（全称Bitmap）是Windows操作系统中的标准图像文件格式，可以分成两类：设备相关位图（DDB）和设备无关位图（DIB），使用非常广。它采用位映射存储格式，除了图像深度可选以外，不采用其他任何压缩，因此，BMP文件所占用的空间很大。BMP文件的图像深度可选lbit、4bit、8bit及24bit。BMP文件存储数据时，图像的扫描方式是按从左到右、从下到上的顺序。由于BMP文件格式是Windows环境中交换与图有关的数据的一种标准，因此在Windows环境中运行的图形图像软件都支持BMP图像格式。 * **使用建议** ## 参考资料 * [图片的区别](https://www.zhihu.com/question/20028452/answer/142593276)