## 图片优化总结 > - 选择合适的图片格式和压缩大图，可从根源上截图大图加载过慢的问题。 > - 使用雪碧图，iconfont，base64，css 代替图片等可减少图片 http 请求，提高页面加载速度。 > - 使用 CDN 图片可达到分流的效果，减少服务券压力。 > - 图片懒加载，预加载，渐进式图片等可不同程度减少白屏时间，提高产品体验。 ## 如何优化图像，图像格式的区别 ## 优化图像 1、不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。 2、 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！ 3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。 基本上，内容图片多为照片之类的，适用于JPEG。 而修饰图片通常更适合用无损压缩的PNG。 GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。 4、按照HTTP协议设置合理的缓存。 5、使用字体图标webfont、CSS Sprites等。 6、用CSS或JavaScript实现预加载。 7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。 ## 图像格式区别 矢量图：图标字体，如 font-awesome；svg 位图：gif,jpg(jpeg),png 区别： 　　1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。 　　2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。 　　3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。 关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明; 优缺点： 1、能在保证最不失真的情况下尽可能压缩图像文件的大小。 2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。 ## png、jpg、gif 这些图片格式 1. png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。 2. jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。 3. gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果. 4. webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。