PC端网页页面优化实践———图片资源优化

页面优化策略中第一条就是减少请求数，在我们实际开发中，真正占用了大量网络传输资源的，并不是代码文件，而是图片，如果你对图片进行了优化工作，你能立刻看见明显的效果。所以我们本文的重点就是对图片资源进行优化

对图片资源进行优化

采用正确的图片尺寸，在PC端我们还是强烈建议使用1倍图，例如需要100 * 100 的图片就别使用我们通常在移动端使用的 2倍图 200 * 200。因为 1倍图和 2倍图压缩后的大小比通常达到 1 ： 4 左右。当数量达到一定程度时，两者加载的时间会有显著的差距。

类型大小传输时间

1倍图 300KB 200ms

2倍图 1.2M 2S

所以，当你需要用多大的图片时，就在服务器上准备好多大的图片，尽量固定图片尺寸。
适时使用雪碧图（CSS Sprite），在页面中存在大量小图标的时候，例如合作伙伴的公司logo，一些解决方案的logo等等，这时候就推荐大家使用雪碧图来将这些小图标拼成一个大图。这里给大家推荐一个自动化生成雪碧图的工具：CSS Sprite。

采用雪碧图的方式，能有效减少http请求数。

类型	大小	传输时间
1倍图	300KB	200ms
2倍图	1.2M	2S

响应式页面中使用雪碧图

由于现代页面大多都是响应式页面，雪碧图的原理又是通过在一张大图中使用不同的 background-position 数值来实现的如果不进行一些特殊处理，我们的图片很有可能会出错。

这里 background 家里的事情就让 background 自己来解决吧。

在传统页面中，大图片大小是固定的，每张小图片在大图片中的位置是固定的，所以我们可以使用px单位来进行定位使用

// 每张小图片的公共类
.img {
    width: 48px; 
    height: 48px;
    display: inline-block;
}

// 小图片1
.one-img {
    background: url('css_sprites.png') -10px -10px;
}

// 小图片2
.two-img {
    background: url('css_sprites.png') -10px -68px;
}

而在响应式页面中，这里我是使用插件把 px 转成 rem ，像上图这样使用就会出问题了，为什么呢？因为现在大图片大小是固定的，还是原来多大就是多大（使用px来计算大小），但是每张小图片在大图片中的位置就不固定了（使用rem来计算位置），所以我们现在要在 .img 这个公众类上加点东西，即也让大图片的大小不固定（即使用rem来描述大图片的大小）。

// 每张小图片的公共类
.img {
   width: 48px; 
   height: 48px;
   display: inline-block;
   background-size: 68px 600px !important; //定义了大图片的大小，大家一起被转成rem

}

// 小图片1
.one-img {
   background: url('css_sprites.png') -10px -10px;
}

// 小图片2
.two-img {
   background: url('css_sprites.png') -10px -68px;
}

End

这只是页面优化的一小步，我们将继续探索...（未完ing