【WPO】图片优化

[dongtong]

当发现页面渲染变慢时，可以先观察页面使用的图片是否比较多，这些图片是否从远程服务器下载下来的。因为页面上使用的图片因为需求场景可能需要经常变更，在上传图片的时候没有经过压缩，也没有自动化压缩机制，所以导致图片过大，拖慢页面下载和渲染。

用户在上传图片的时候可以在后台处理图片时进行压缩。最终得到一个合理大小，密度适中，适合的图片格式。

有时候一张图片可能需要适配不同分辨率的设备，可以使用CSS3的Media-Query来检测设备特性

max-device-width
min-device-width
max-height
max-width
color
color-index

@media not | only mediatype and (media feature) {
  CSS规则
}

例如:

@media screen and (max-width: 960px) {
  #header {
    background-image: url("small.png");
  }
}

使用Media Query问题就是开发者无法预测所有设备的分辨率以及设备展示行为，设备是否是Retina显示屏等等，另外一个问题就是浏览器渲染图片延迟，因为一开始需要先检测设备参数，然后查找适合的CSS规则运用。

可以使用响应式图片(使用srcset属性)，让浏览器渲染在运行时选择适合的图片。

<img src="default.png" srcset="small.png 320w, medium.png 640w, large.png 960w" />

在改变浏览器大小时会发起网络请求。

密度适中主要是关注分辨率密度，它是单位空间中有多少像素。通过这种方式可以针对不同的网络情况，使用不同分辨率的图片。可以使用srcset属性实现

<img src="default.png" srcset="normal.png 1x, retina.png 2x" />

图片的大小以及存储内容使用大小都是成倍增长(2x使用4倍大小和存储空间)。

使用适合的图片格式是因为不同的图片格式的压缩率，高保证不同。但是可以通过data uri实现图片内联。支持到IE8以上。

在生产环境中，需要准备多份不同版本的图片，如果有Retina设备的，还需要准备正常图片以及针对Retina设备的图片。

响应式图片picture元素文章

• 使用datauri

可以减少网络请求; 避免了图片重新上传，清理缓存的问题; 减少Round-Trip。但是无法重复利用。img虽然是一个请求数，但是加载完后，如果还有N次引用，那还1，而DataURI却必须是N次了；图片等资源转换为DataURI所用的Base64编码之后，文件大小增加了好多（通常50%-300%），如果服务器端不做Gzip压缩的话，压缩后倒是跟原本的差不多大小；加载、解码后渲染，消耗内存和CPU，手机上还得耗电池；浏览器支持到IE8。

mobify最新的测试数据：DataURI要比简单的外链资源要慢6倍

格式:

data:[<MIME type>][;charset=<charset>][;base64],<encoded data>

使用方式：

<img src="data:image/gif;base64,xxxxxx" />

所以sprite能用还得用啊，DataURI的方法要慎用，对于Webapp，还是研究各种缓存技术；个别不能sprite且质量小的图片可以用DataURI。

推荐一个转Base64的在线工具: Base64。直接将图片拖进去即可获得图片Base64编码。

• 使用Sprite

俗称"雪碧图"。是一种将图片排列在一起的CSS手段。经常用在一个图片有多重状态，或者button之类零碎的图片当中。使用Sprite可以减少Round-Trip。

使用Sprite需要用到CSS中的background和background-position规则。

例如:

ul.sprite-image {
  list-style-style: none;
}

ul.sprite-image li a {
  height: 90px;
  /*...*/
 background: url("images/sprite.png") no repeat; /*一张整图作为所有需要用到元素的背景图*/
}

ul.sprite-image li a {
  background-position: 0 0;
}

ul.sprite-image li a:hover {
  background-position: 0 -98px;
}

• 图片压缩

有损压缩： 针对摄影图片，允许范围内的丢失像素图片格式是: WebP, JPEG-XR, JPEG 2000。用来去除一些图片中的冗余信息，在转换的过程中会丢失数据，但是在丢失数据力度以及转化后文件大小之间平衡。

无损压缩： PNG, GIF是比较常用的丢失较少数据的文件格式。有些格式例如TIFF, WebP都支持有损压缩和无损压缩。有些场景需要无损压缩，例如医疗，艺术，摄影。

• 使用WebP, JPEG-XR, JPEG 2000图片格式

GIF: 使用PNG8将GIF转化成PNG, PNG8支持透明，尽可能使文件达到最小，可以使用optiPNG工具转化。

JPEG 2000: 基于wavelet压缩技术的新的JPEG格式，更好的像素表现以及较小的文件大小。支持有损压缩和无损压缩。在Safari和iOS Safari上支持。

JPEG XR: JPEG扩展简称。是微软针对高清摄影图片开发的，支持有损和无损压缩，最好的压缩率达到30%以上，更好的透明颜色精准性（alpha通道）。支持在IE9, Edge上。

WebP: Google针对web设计的一种图片格式，支持有损和无损压缩。无损可以减少0~25%大小，有损减少 0 ~ 30%大小，在Chrome, Android Chrome, Android, Opera, Opera Mini上。iOS可以自定开发图片解码库。

如何衡量图片质量？

使用SSIM(Structural Similarity Index) : 在图片转化前后使用此技术观察图片转化效果。

• 图片优化工具

智图