网站开发 关于图片压缩 以及图片使用

1. 图片格式

　　我就简单介绍一下我经常使用的三中图片格式 ( 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-width: ;根据布局来设置。

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

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

　　　　    我在切一张 png的 2.63MB 压缩以后856KB（iParta）固然这是背景图片。通常咱们用jpg 有所压缩 由于比较大。

 

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

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

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