网站性能优化-图片

影响网站性能最主要的优势就是网络请求的延迟，在大多数网站中都有大量的图片使用，优化网站中图片的使用可以快速有效的提升网站性能。图片优化主要分为是以下两个方向：

减少图片使用，包括请求合并、延迟加载和使用 IconFont、SVG 等替代方案
使用正确的图片，使用适当尺寸、格式的图片，对图片进行适量的压缩，可以大幅提升网站性能

减少在网页中图片的使用

方式一：合并请求

为了实现一些页面效果，例如一个更加形象的按钮，一些指示箭头灯，设计师往往会设计一些小的 ICON。在早期我们需要使用图片来实现这些效果，这些图片往往很小，但是在页面中有大量的应用，所以就产生了大量的 HTTP 请求，影响页面性能。这种问题的优化方案有以下两种：

雪碧图：将多张小图片合并成一张大图片，使用 CSS 背景尺寸和定位展示
DataURL，将图片编码内嵌到样式文件中注意：base64 编码图片可以用来减少 HTTP 请求，但是对流量的优化是起反作用的，因为经过获得编码要比原图片大，适用于图片较小(2KB 以下)，页面上图片输了较少；进一步优化，也可以将编码字符串存储的本地缓存

方式二：延迟加载

在页面可见或即将可见的时候加载图片，避免没必要的加载，个人认为这个特性应该由浏览器默认支持处理。

方式三：替代方案

使用 CSS3 制作简单的图标和动画

IconFont：Iconfont 是矢量的，可以改变大小和颜色，因为本质是文字，在作为图标使用有以下缺点

所以只支持单色
定位布局受 font-size line-height 等 CSS 属性影响，调试不方便
字体库整合维护麻烦，单个页面加载只用到几个图标也需要加载整个字体库，容易造成浪费

SVG：使用 XML 来描述的矢量图片，支持动画和透明，IE8 以上浏览器均支持,SVG 的替代方案 SVG 的使用方法：

和图片一样使用<img>标签引入或进行 base64 转码内嵌到 HTML 或 CSS 中
Inline SVG：直接把 SVG 写入 HTML 中
SVG Sprite

canvas：

使用正确的图片

选择合适的图片格式

选择合适的图片尺寸

移动端设备的屏幕尺寸有很多，可以对不同尺寸的设备加载不同尺寸的图片，节省网站流量

实现方案一：通过媒体查询，不同设备加载不同的样式

@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);}
}

实现方案二：使用 HTML5 新标签<picture>， <img>新属性srcset和sizes

<!-- src:当设备不支持srcset，sizes属性时，使用这个图片 -->
<!-- srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点 -->
<img class="img"  src="img-320.jpg"
   srcset="img-320.jpg 320w, img-360.jpg 360w, img-480px.jpg 480w"
   sizes="(max-width: 480px) 480px, 320px">

实现方案三：后端 CDN 配合，根据终端的特性(版本、分辨率)返回合适的规格

4.图片资源优化