南通web前端培训干货：web前端图片优化

南通web前端培训干货：web前端图片优化

当页面有大量图片的时候就会直接影响到页面的加载速度，如果图片半天都没有加载，那么会很影响用户的体验感，进而导致用户的流失。

        下面给大家介绍几种进行图像优化的方法。

        1、能不用图像则不用图片，能用css完成的部分尽量减少页面使用图片。

如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS3达成。

        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页面上。

作为专注培养web前端人才的南通科迅教育，立足于社会需求，以企业人才需要为基点，坚持打造全程面授的高品质教学模式，不断与时俱进的去升级课程内容，积极拓展课外项目活动，以实践来驱动教学，助力学员掌握好过硬设计技能和提升实际运用经验，所以，如果你也想改变目前的工作状态；如果你也想进名企、拿高薪；如果你也想突破自我，南通科迅教育的大门随时为你敞开！欢迎和期待广大学员们来校进修！