网页上的几种图片格式

总结下前端页面上可能碰见的图片格式，方便记忆和日后查询

无压缩格式

在这种格式下，图片不会进行压缩，能准确地呈现原图片。
BMP格式
Bitmap（位图）的简写，无损格式、既支持索引色也支持直接色的、点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常具有较大的文件大小。所以在一般开发中不常见。

压缩格式

对比于无压缩格式，压缩格式的图片通过压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的体积。
同时也区分为无损压缩和有损压缩，区别在于压缩的过程中是否丢失了图片信息。

无损压缩

GIF格式
优点：采用LZW压缩算法进行编码，文件体积小。有两种颜色模式，支持8bit（256种颜色）的索引色模式以及1600W色的直接颜色模式，从直接颜色模式转换到索引色模式会出现图片失真的情况
不适用于高色彩还原场景，同时只支持透明，不存在渐变透明
PNG格式
是一种无损压缩的位图片形格式，其设计目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。可以分为8位、24位、32位3种格式

1. PNG8
   PNG-8是非常好的GIF格式替代者，同样也是最多256种颜色，PNG-8具有更小的文件体积，同时支持Alpha透明，即渐变透明。和GIF唯一的区别就是不支持动画，如果不是非必须动画，在GIF和PNG-8选择PNG-8最好。但是当支持Alpha透明的情况下对IE6支持不好
2. PNG24和PNG32
   这两个子格式放在一起，是因为，24和32位的区别在于，PNG24不支持透明，但是PNG32支持Alpha透明，就是相当于在PNG24上增加了透明层，同样Alpha情况下对IE6支持不好，不过PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

SVG
是矢量图，由直线和曲线以及绘制它们的方法组成。当放大的时候不会出现像素点，不会出现失真，所以它非常适合用来绘制企业Logo、Icon等。

有损压缩

常见的有损压缩手段是按照一定的算法将临近的像素点进行合并。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的体积。例如jpg格式的图片使用的就是有损压缩。

JPG/JPEG
最常用的图片存储格式，网上经常能看见，采用了直接色，得益于更丰富的色彩，JPEG 非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。十分适合照片、图片banner等需要优质图片的地方。
不支持动画，以及不适合存储Logo、线框、纯色类的图（压缩会导致图片模糊）。

WebP格式

WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。

•在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
•在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
•WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。
不过目前兼容性一般

如何判断是否支持WebP格式图片

1. 宽高判断法
   通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格式的图片。
2. canvas判断方法
   可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断返回值中是否含有image/webp字段，如果包含则说明支持WebP，反之则不支持。

如何选择格式

图片来源：每个前端工程师都应该了解的图片知识

参考资料：

1. 前端开发中常用图片格式
2. 每个前端工程师都应该了解的图片知识
3. PNG8 Alpha 透明图片