图像优化

2019-07-20

本文总阅读量次

桃花流水窅然去，别有天地非人间。

图像优化

web 性能优化是减少资源到客户端的延迟，但是我们在 HTTP1.0/HTTP1.1 协议中经常会遇到加载的图片太多或者太大导致页面加载完成慢的问题:图片太多导致向服务器请求的次数太多，图片太大导致每次请求的时间过长。

将图片服务和应用服务分离

对于服务器来说，图片始终是最消耗系统资源的，如果将图片服务和应用服务放在同一服务器的话，应用服务器很容易会因为图片的高 I/O 负载而崩溃，所以当网站存在大量的图片读写操作时，建议使用图片服务器.（图片服务器是专门为图片读写操作优化的独立服务器，运行网站的服务器称为应用服务器)
另外浏览器在同一时间对同一域名下的资源的并发请求数目是有限制的，一般在 2-6 之间，超过限制数目的请求就会被阻塞.一些主流浏览器对 HTTP1.1 和 HTTP 1.0 的最大并发连接数目，把图片服务器与应用服务器分开，图片服务器采用独立域名，css、js 和图片就可以并发请求了。

简单的压缩方案

借助一些第三方软件来进行压缩，比如https://tinypng.com/ ，压缩后分辨率不变，肉眼看不失真。

使用精灵图

图标整合在一个图片中，减少请求

图片懒加载

懒加载，简单来说就是在页面渲染过程中，图片不会一次性全部加载，会在需要的时候加载，比如当滚动条滚动到某一个位置时触发事件加载图片。

图片格式

使用较为广泛的 web 图片格式有：JPEG/JPG、PNG、WEBP、Base64、SVG。
在计算中，像素是采用二进制数来表示，不同的图片格式像素与二进制数的对应关系不同。像素对应的二进制位数越多，则表示的颜色种类越多，成像的效果越细腻，但是文件体积也越大。一个二进制表示两种颜色（0|1 对应黑白），一种图片格式对应的二进制位数有 N 个，那就可以呈现 2 的 N 次方种颜色。

1.JPEG/JPG：特点是有损压缩，体积小，加载快，不支持透明。

使用场景：JPG 适合用于呈现热菜丰富的图片，在日常的开发中，JPG 图片经常作为大的背景图、轮播图或是 Banner 图。比如两大电商网站对大图片的处理，就是对 JPG 图片应用场景的最佳写照。用 JPG 来呈现大图片，既可以保留图片的质量，又不会担心图片的体积，是一种比较广泛使用的方案。
缺点：在处理一些矢量图形和 logo 等这些线条感很强、颜色对比强烈的图片时，认为压缩就导致图片模糊非常明显。另外，JPG 图像不知此透明度处理，透明图片只能用 PNG 来呈现了。

2.PNG-8 和 PNG-24：无损压缩、质量高、体积大、支持透明

优点：无损压缩的高保真图片格式。8 和 24 都是二进制数的位数，8 位的 PNG 支持 256 中颜色，24 位的 PNG 可以支持 1600 万种颜色。在不考虑文件大小只在乎最佳的显示效果时，推荐使用 PNG-24。但是在适合使用 PNG 时会优先选择 PNG-8。
应用场景：主要用 PNG 来呈现小的 LOGO、颜色简单对比强烈的图片或是背景。

3.SVG：文本文件，体积小，不失真，兼容性好。

SVG 是一种基于 XML 语法的图像格式。SVG 对图像的处理不是基于像素，而是基于对图像的形状描述。
和 JPG、PNG 相比较，SVG 文件体积更小，可压缩性更强。SVG 作为矢量图最大的优点在于图片可以无限放大还不失真，一张 SVG 图片可以适配多种分辨率。另外 SVG 是文本文件，可以像写代码一样定义 SVG，放在 HTML 中称为 DOM 的一部分。也可以把对图像的描述写入以.svg 为后缀的文件中，在 img 标签中引入即可。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
      <circle cx="50" cy="50" r="50" />
    </svg>
  </body>
</html>

4.base64：文本文件、依赖编码、小图标解决方案

base64 不是图片格式，是一种编码方式，和雪碧图一样。
雪碧图（CSS Sprites）：把小图标和背景图像合并到一张图片上，再使用 css 定位来显示其中的每一部分，就是把多个小图标合成一个图像文件，相对于一个图标一个图像文件来说，单独的一张图片需要的 HTTP 请求次数更少。
而 base64 是为了减少加载网页图片时对服务器的请求次数，提升网页性能。base64 是一种用于传输 8Bit 字节的编码方式，通过对图片进行 Base64 编码，可以直接把编码结果写入 HTML 中或者是 CSS 中，减少 HTTP 请求次数。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOMAAADdCAYAAABJ/sWRAAAgAElEQVR4nO29B7gkVZk3/na8cXIehhlmiAIyIChBJauLiN+j64ooouhnWFddZdcVd10X9VnTKgpmV/8oBoy7EvyviwoiBlBAsqSJMIEJ987Nnes7v7fq7XvumVPVVdXVfe8d+jdPT3ffrjp10nvOe96YGhsbc…

这样浏览器直接把这段字符串解码为一张图片，就不用发送 HTTP 请求了。但是 Base64 编码后，图片文件体积变为原来的 4/3，文件体积变大，浏览器解析 Base64 的时间开销。这些因素在使用 Base64 时必须考虑的。所以在一张图片满足以下条件时可以大胆的使用 Base64 编码
1、图片实际尺寸很小
2、图片无法像雪碧图一样和其他小图标结合（雪碧图是主要的减少 HTTP 请求途径）
3、图片更新频率低（不需要重复编码和修改文件内容，维护成本很低）

5.WEBP：2010 年被提出，是 Google 专为 WEB 开发的一种旨在加快图片加载速度的图片格式，支持有损压缩和无损压缩。

WEBP 受到最大的限制就是浏览器的兼容性。