前端关于图片的优化

在某些项目中须要加载大量的图片，会大大的影响加载速度。这里总结了几种前端关于图片优化的方法：

1 使用恰当的图片格式：

常见的图片格式有png\jpg\gif等，有的修饰图片或者有特殊要求的图片例如背景要求透明可能更适合无损压缩的png,而绝大多数的图片用jpg格式的就能够知足需求了。GIF格式的多用于动画，不过动画也建议用video标签或者视频形式，svg也可。

2 尽可能不用图片

好比在页面开发时某些图片或者修饰能够经过给特定的标签添加样式来实现，就省去了图片的引入。
 常见的例如 三角形，圆形，不规则放置的直线，半透明，阴影，边框，渐变等等。

3 图片的引入方式的选择

咱们知道前端页面的图片引入方式主要有两大类：
     1 经过img标签
     2 经过css的background属性
     3 应该还有其余的方法，有待探索 
这里能够根据实际状况来选择合适的引入方法。

4 图片压缩

图片的清晰度和大小可以知足通常的需求就能够了，不必太大，这个时候能够经过各类图片压缩器，将图片大小尽量的压缩，减少网站加载图片的容量大小，提升加载速度。
这里分享一款压缩工具：

5 资源的lazyload或postpone

lazyload：延迟到其余资源下载完成后再加载
 postpone：延迟到元素可见再加载。

针对某些须要大量同步加载的图片数据能够用延迟可见或加载的办法来使网页加载图片时更优化合理。可是这种策略，目前都须要对应的脚本。

6 字体图标

针对网页中须要实现的图标或者同种图标的不一样颜色，能够用字体图标的形式，使用方便简单

7 使用data url。

资源内嵌于CSS或HTML中，而没必要单独请求。注意，多个地方都要使用的资源不必定适合用此优化方式，由于图片数据重复多了，增长流量。另外许多浏览器对data url有长度限制，注意资源的大小。

8 css sprite

以上是我的在作项目时使用总结的东西，关于图片的优化方法还在继续探索中。。