万物皆二进制，图片的
jpeg/bmp/png/webp

图片属性要素

一张图片的组成部分，通常有

• 图片格式 （jpeg/bmp/png/webp）
• 图片大小（大小和尺寸是不一样的）
• 像素（也叫尺寸，像素可以理解为像素点，无论图片怎么放大缩小，图片的像素点是不变的）
• dpi（每英寸的像素，也叫扫描精度，web上大部分的图片都是72dpi，也就是每英寸72个像素。但是打印照片时，比如一张46英寸的照片，扫描精度必须大于300dpi，那么文件的尺寸应该是（4*300）（6*300）= 1200 * 1800 像素）
• 颜色模式（RGB，RGBA...）
  
  

前端应用

1、gif埋点

百度统计的埋点方式是在首屏引入一个三方的js，然后这个三方的js会种下一个三方的uuid cookie在他们的域下，标识一个用户，每到一个页面会new一个image对象，请求这张图片时会带上前面的cookie，并带上页面数据。那么为什么要使用gif来上报埋点参数呢？
大致原因如下：

• image.src天然支持跨域
• 图片请求优先级低，不占用ajax请求限额，不阻塞页面加载
• 相对ajax GET请求较为轻量
• 1x1像素是最小的合法图片，而且图片最好是透明的，不影响页面显示效果，而jpeg是不支持透明色的，jpeg的颜色模式是rgb可以直接排除，剩下bmp，png，gif。因为任何一张图片二进制编码都有一些必要的结构体标头，来标识图片信息，最后通过比对，同等条件下gif的必须标头仅43个字节，png67个，bmp74个，因此gif才是最佳选择

2、图片压缩

在使用图片时，我们常常要对图片进行一次压缩，不同的图片类型，压缩方式，都会影响图片的压缩效果。

png

png图片颜色模式rgba，web应用中通常使用的是png8，也就是8位深度的png图片，位深度是每个像素所需要的像素大小。

位深度越大，图片的细腻程度越高，当位深度是1，那么每个像素都由0和1来表示，那么也就只能表示黑白的图片了
不同的位数其像素计算的规则不同
8位： 2^8 = 2^2(B) 2^3(G) 2^3(R) = 256 (256色) 可以总共显示256种颜色
16位：2^16 = 2^5(B) 2^6(G) 2^5(R) =  65536    可以总共显示65536种颜色
24位：2^24 = 2^8(B) 2^8(G) 2^8(R) =  16777216    可以总共显示16777216种颜色
32位：Alpha透明度 + 24位
用图片像素乘上图片位数即为这张原始图片所占的字节数，当然可以经过一层压缩。
png的压缩属于无损数据压缩，在保持图片质量的同时，还减少了图片的体积，8位支持alpha透明（只有透明和不透明），而32位有2^8种透明程度。png现常用于web上的logo，icon等图片中

jpeg&jpg

jpeg其实就是jpg，在web应用中不太常见，采用的是有损压缩方式，可能会导致图片失真，颜色规则rgb，不支持透明色，位深度现在也只有24位，但是相比于png-24，jpeg的无损压缩可以移除人的肉眼无法识别的图片细节，对色彩丰富的图片有更好的压缩效果

bmp

bmp原始图片，通常不采用压缩，图片质量也是最高的

webp

webp支持有损和无损压缩两种压缩形式，将jpeg和png转为webp之后，实际体积会大幅缩小，webp通过分块和帧内预测的方法，对原有图片进行处理，比jpeg上使用的Huffman encoding表现得更为出色，唯一的缺点就是浏览器兼容性不好。

通用图片选择方法

总结

前端在埋点上对图片的选择缘由
前端常见图片格式的分别
现在公司使用的kano系统应该是根据ua来判断当前浏览器对webp的支持程度，统一返回webp的图片了~