前端开发中，如何优化图像？图像格式的区别？

一、不用图片，尽可能用css3代替。 好比说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中均可以用CSS达成。

二、 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。如今主流浏览器都支持SVG了，因此可放心使用！

3.、使用恰当的图片格式。咱们常见的图片格式有JPEG、GIF、PNG。

基本上，内容图片多为照片之类的，适用于JPEG。

而修饰图片一般更适合用无损压缩的PNG。

GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。

四、按照HTTP协议设置合理的缓存。

五、使用字体图标webfont、CSS Sprites等。

六、用CSS或JavaScript实现预加载。

七、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，很是适合用于网络等图片传输。

 图像格式的区别：

矢量图：图标字体，如 font-awesome；svg 

位图：gif,jpg(jpeg),png

区别：

　　一、gif:是是一种无损，8位图片格式。具备支持动画，索引透明，压缩等特性。适用于作色彩简单(色调少)的图片，如logo,各类小图标icons等。

　　二、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于容许轻微失真的色彩丰富的照片，不适合作色彩简单(色调少)的图片，如logo,各类小图标icons等。

　　三、png:PNG能够细分为三种格式:PNG8，PNG24，PNG32。后面的数字表明这种PNG格式最多能够索引和存储的颜色值。

关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增长了8位（256阶）的alpha通道透明;

优缺点：

　　一、能在保证最不失真的状况下尽量压缩图像文件的大小。

　　二、对于须要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。