知其然，须知其所以然

 

图像优化的前提是需要了解图像的基本原理。常规的图像格式分为矢量图和位图。

 

原理：

 

矢量图形使用线、点和多边形来表示图像。

 

光栅图形，也可以成为位图，通过对矩形格栅内的每个像素的值进行编码表示图像。

 

矢量格式适用于简单形状图形，并且变换颜色方便，仅通过 CSS 中的 fill 属性便可以改变颜色。并且在多大的缩放下都能保证清晰，矢量格式不能满足复杂的图像，例如照片，高清图。这时候我们就需要位图，位图的格式有很多：

 

GIF

 

PNG

 

JPEG

 

JPEG-XR

 

WebP

 

Bpg

 

其中 Webp 是比较流行的图像格式方案，目前移动端 Android 4.0 以上、PC 端 chrome 10+(14 ~ 16 有渲染 bug )、opera 11+ 均支持 webp 格式图片，相比 jpg 体积减少了 65%，但编码解码速度慢了很多，虽然 webp 会额外增加解码时间，但由于体积小了，缩短了加载时间，实际上文件的渲染速度反而快了。

 

以上就是网站图像的优化技巧。