我就简单介绍一下我常用的三中图片格式 ( png jgp webP  )

　 A）png 可以储存透明，完爆gif的地方在于失真小，没锯齿；劣势是不支持动画；采用无损压缩，在多数情况下都可以保留图片里所有像素。PNG无损压缩算法，简单地说，就是把图片里出现的每一个颜色都记录下来。通过记录这些颜色相对应的值记录一张图片。png分为两种，一种是Index，一种是RGB。Index记录同一种颜色的值和出现的位置（简单地说，比如一个2px*2px的超级小图，从左往右从上往下依次的颜色是红，白，白，红，那么记录的方法就是“红-1,4；白-2,3”）；而RGB图则把所有像素的色值依次记录下来（即“红，白，白红”）。对于相同的图片，Index格式的尺寸总是小于RGB。

　　   一般来说我们使用网页小图标的时候 这个用的比较多。因为需要透明。我们使用CSS Sprite。顺便提一下我们可以使用font-famliy来替换 淘宝天猫都是使用这样的技术。

　 B) jpg 适用于摄影图片，以及色彩丰富的图片。它采用压缩算法，会对图片上每8px*8px的像素进行处理，通过强制渐变的方法来减小文件尺寸，因此无论选择的储存质量多高，还是会多多少少失真一些，但对于摄影之类的图片来说，jpg格式就会比png小很多了。

　　比如背景介绍图片。百度的自定义背景设置就是这个jpg格式。

    C)webP google新的图片格式。一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。

2. 介绍一般css背景图片的百分比平铺。

　　

　　　这里的代码取自 百度官网的代码。因为背景图片是自己设置 所有用js自己设置。我们自己写的时候也需要用background-image: url(....);

　　设置position: absolute;来定位图片。以及 backgrouns-position: center center.这是图片位置居中。 background-repeat: no-repeat;

　　background-size:cover; 加前缀-weibikt- -o- 以及必要的响应式的话就只需要100%宽度 如果不需要就 设置min- ;根据布局来设置。

3.接下来我们来实际操作一下 jpg 和 png的大小 以及压缩之后的 jpg 和png

　　第一步  我先切一张 1900*1000的 jpg背景图。大小是523KB。我在压缩之后 300kb(https://www.jpeg.io/)

　　　　    我在切一张 png的 2.63MB 压缩之后856KB（iParta）当然这是背景图片。一般我们用jpg 有所压缩 因为比较大。

　第二步  接下来压缩一下小图标png

　　　　　我使用的是项目的精灵图片 原35KB 压缩之后12KB。

　　　　　最好是 一个个压缩之后再放上去。