web前端优化之图片优化

开发前端也有几年了，一直很忙，课下看书，或者作一些笔记，看看别人的看法，也会作一些笔记记录，有时间就来刷刷掘金，逛逛技术网站，尴尬的事情是本身没有认真的总结过一些笔记和知识点，发出来你们共同窗习，最近也才开始作一些markdown，后续我会抽时间继续作这件事，有什么不对的知识点，麻烦你们指出批评，也算对本身的一个巩固。

不少的前端开发者都比较关心性能的优化的问题，今天主要讲一下图片优化的看法和总结，可能不少人大神都知道我列出的知识点，那么开始整理一下图片优化的笔记吧,可能废话有点多，语言组织不到位的地方，你们多担待

每一个前端网站都有可能引入不少的图片来达到酷炫或者展现的效果，有人会问？为何非要用图片，由于有些技术上达不到的效果展现，只能用图片来代替，好比淘宝天猫京东这些商城的酷炫的创意广告图
固然咱们也会用到不少的图标图片，图片越多请求次数越多，形成延迟的可能性也就越大

最开始作前端的时候，我都会把实现不了的效果切换成图片还有一些图标也会切成图片，这样就会下降前端页面展现的性能，增长页面资源HTTP的请求，甚至有的页面存在几十个img的http请求

总结优化的地方有几个地方：

• 一、下降图片的大小

首先咱们目前经常使用的图片格式有png,gif,jpg等，png又分png24和png8,关于图片的的知识点，我给你们两个网址你们能够了解一下，对于图片格式讲的很详细
www.cnblogs.com/xiangism/p/…
www.cnblogs.com/pqjzxq/p/57…

咱们的目的是下降图片的大小kb，有不少方法能够作，压缩图片，选择更小kb的图片格式，以达到最优的显示效果

好多人都推荐一个压缩图片的网站---智图：一个图片优化平台
用起来很简单的

如今百度一下不少在线压缩图的在线网站，好比TinyPNG:一个压缩PNG的神站

• 二、选择适当的图片宽度尺寸（即响应式图片）

不论是pc仍是移动端，都会有不少不一样尺寸的图片，若是你作的是响应式网站和移动端的话，那么你就更须要考虑图片尺寸的选择问题了

移动端的屏幕分辨率和尺寸太多，因此就可能须要不一样的尺寸加载不一样尺寸的图片，这样就节省了网站的访问流量，以及页面渲染的效率
先展现如今设备的分辨率等的图

若是想查看更多的话，就去devices

响应式图片方式有哪几种，

• 能够经过服务器图片资源配置命名规则来获取图片

  ps：<img src="bgimg-320.jpg" />或<img src="bgimg-480.jpg" />复制代码

• 经过css定义来加载不一样的背景bg图片

  @media only screen and (max-width : 480px) {
    .img {background-image: url(bg-480.jpg);}
  }
  @media only screen and (max-width : 360px) {
    .img {background-image: url(bg-360.jpg);}
  }复制代码

• Img的srcset和sizes的方法

  这两个img属性是html5的属性，有浏览器的兼容问题

  <img class="img"  src="imgbg-320.jpg"
     srcset="imgbg-320.jpg 320w, imgbg-360.jpg 360w, imgbg-480px.jpg 480w"
     sizes="(max-width: 480px) 480px, 320px">复制代码

  src:当设备不支持srcset，sizes属性时，使用这个图片
  srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点

  sizes="[media query] [length], [media query] [length] ... "复制代码

  对于srcset和sizes，详解点击查看

• picture标签实现

  经过媒体查询的方式，根据页面宽度（固然也能够添加其余参考项）加载不一样图片，具体picture详情点击查看

  <picture>  
    <source srcset="3.jpg" media="(min-width: 320px)">  
    <source srcset="2.jpg" media="(min-width: 480px)">  
    <img srcset="1.jpg">  
  </picture>复制代码

• 三、减小HTTP的网络资源请求

• CSSSprites(背景精灵图/雪碧图)

  一种网页图片应用处理方式，将一个页面涉及到的全部零星图片或者图标都包含到一张大图里面，这样就只须要加载这个一个图片，而不是不少个图片了，这样就减小了不少http的请求

  如何制做精灵图？

  本身经过ps制做，或者UI设计师制做的过程当中，作好这个精灵图，注意图片直接的间隔，以防css操做的时候出现显示的问题

  怎么使用精灵图？

  利用CSS的background-image，background- repeat，background-position的组合进行背景定位，background-position能够用数字精确的定位出背景图片的位置
  详细查看CSSSprites

• css和css3制做简单的图标和动画（代替gif图片）

  随着技术的发展，css3能够实现的效果愈来愈多，好比箭头图标，三角形，梯形等图标，或者一些阴影效果，渐变的效果，因此能够用css制做一些简单的图标，并且具备多变性

  .sanjiaoxing {
    width: 0;
    height: 0;
    border-top: 2em solid #000;
    border-right: 1.8rem solid transparent;
    border-left: 1.8rem solid transparent;
  }复制代码

• SVG技术替换图片

  SVG 是使用 XML 来描述二维图形和绘图程序的语言,支持透明，缩放，动画
  什么是SVG？(摘自w3cschool)
  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  SVG 用来定义用于网络的基于矢量的图形
  SVG 使用 XML 格式定义图形
  SVG 图像在放大或改变尺寸的状况下其图形质量不会有所损失
  SVG 是万维网联盟的标准
  SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个总体

• html5 canvas绘画图形

  目前canvas应用不少，它可使用脚本javascript来绘制各类图表、动画等
  点击查看更多html5 canvas

• 四、字体图库代替图标

随着技术的更新和浏览器的更新，字体图库去代替一些图标我认为仍是极好的，使用字体图库你不只能够改变大小，并且还能够改变颜色
你们比较熟知的的字体图库有不少，这里就说一个吧，font-awesom,截图看看他的好处吧

有了他，根本不担忧图标的问题了，很简单的使用，只须要引入以后，按照规则写html标签便可

其实我们也能够自定义我们的图标选择，毕竟有的图标库咱们用不到这么多，所以我们能够自定义我们的字体图标库

目前我认为毕竟好的就是 Iconfont ,最近的几个react项目，我都在使用这个来定制本身的一些图标库，用起来也很简单

• 一、搜索本身想要的图标

二、在搜索结果页找到本身想要的图标，而后加入购物车

三、找完本身的图标以后点开购物车，会有一个添加到项目，点击它，若是你有项目就能够选择，若是没有就建立一个项目，点击肯定以后便可

四、在我的中心找到本身的项目，选择方式以后，点击下载便可使用

使用方式在这里就很少说了，和font-awesom基本上差很少的

• 五、微信小程序怎么使用字体图标

直接引入字体也能够，可是要把字体文件放在服务器上，而且容许跨域的状况下，在css文件里面远程地址引入字体文件便可

@font-face {font-family: "iconfont";
  src: url('https//examle.com/font/iconfont.eot?t=1494498562077'); /* IE9*/
  src: url('https//examle.com/font/iconfont.eot?t=1494498562077#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('https//examle.com/font/iconfont.woff?t=1494498562077') format('woff'), /* chrome, firefox */
  url('https//examle.com/font/iconfont.ttf?t=1494498562077') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('https//examle.com/font/iconfont.svg?t=1494498562077#iconfont') format('svg'); /* iOS 4.1- */
}复制代码

若是不想放在服务器上，还有一种方法可使用，这个时候咱们须要一个工具来辅助一下 transfonter,将解压出来的ttf字体文件转化成base64格式

生成的文件里面替换css里面的代码

@font-face {
    font-family: 'iconfont';
    src: url(data:font/truetype;charset=utf-8;base64,这里省略了) format('truetype');
    font-weight: 500;
    font-style: normal;
}复制代码

使用和直接引入字体图标是同样的

• 六、图片延迟加载（懒惰加载）（js/lazyload.js）

有个页面会很大很长不少的图片素材，这样所有加载就会变的很慢，所以须要修改一下加载方案，只加载窗口内的图片，咱们你们浏览网站的时候会常常看到会有默认图，图片加载成功以后会替换默认图
好比经常使用的lazyload.js用于图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，这是与预加载相反的，。

• 能有效的提升页面加载速度
• 有时候能够帮助减小服务器负载

用法：lazyload.js

还有一些优化的方式在上一篇文章已经列了，这里就很少说了

若有没有说到的地方，麻烦你们指出

后续抽时间会接着作笔记，你们共同窗习巩固分享

前端蜗牛blog传送：codehtml