图片优化

JPEG

WebP

Image Delivery

图片是网站的不可或缺的部分，其能够大大提升网站的表现力与视觉效果，而目前平均大小为 2406KB 的网页中就有 1535KB 是图片资源，可见图片占据了静态资源多么大的一个比重，这也是我们需要重点优化的部分。

WebP

WebP 是面向现代网页的高压缩低损失的图片格式，通常会比 JPEG 小 25%左右。然后 WebP 目前被很多人忽视，也不常使用。截止到本文撰写的时候，WebP 目前只能够在Chrome, Opera and Android (大概占用户数的 50%)这些浏览器中使用，不过我们还是有办法以 JPG/PNG 来弥补部分浏览器中不支持 WebP 的缺憾。

picture标签

使用 picture 标签可以方便的对于 WebP 格式不支持的情况下完成替换:

<picture>
  <source type="image/webp" srcset="image-l.webp" media="(min-width: 640px)">
  <source type="image/webp" srcset="image-m.webp" media="(min-width: 320px)">
  <source type="image/webp" srcset="image-s.webp">
  <source srcset="image-l.jpg" media="(min-width: 640px)">
  <source srcset="image-m.jpg" media="(min-width: 320px)">
  <source srcset="image-s.jpg">
  <img alt="Description of the image" src="image-l.jpg">
</picture>

这里我们使用了 picturefill by Scott Jehl作为 Polyfill 库来保证低版本的浏览器中能够支持 picture 标签，并且保证跨浏览器的功能一致性。并且我们还使用了 img 标签来保证那些不支持 picture 的浏览器能够正常工作。

图片多格式生成

现在我们已经可以通过设置不同的图片尺寸、格式来保证图片的分发优化，不过我们总不希望每次要用一张图片的时候就去生成 6 个不同的尺寸/实例。我们希望有一种抽象的方法可以帮我们自动完成这一步，为我们自动生成不同的格式/尺寸，然后自动插入合适的 picture 元素，在我们的静态网站生成器中是这么做的：

• 首先是要gulp responsive来生成不同尺寸的图片，该插件同样会输出 WebP 格式的图片
• 压缩生成好的图片
• 用户只需要在 MarkDown 中编写![Description of the image](image.jpg)即可
• 我们自定义的 MarkDown 渲染引擎会在处理过程中自动使用 picture 元素替换这些 img 标签

SVG Animation

我们的网站中也存在着很多的 Icon 以及动画性质图片，这里我们是选择 SVG 作为 Icon 与 Animation 的格式，主要考虑有下:

• SVG 是矢量表示，往往比位图文件更小
• SVG 自带响应式功效，能够根据容器大小进行自动缩放，因此我们不需要再为了 picture 元素生成不同尺寸的图片
• 最重要的一点是我们可以使用 CSS 去改变其样式或者添加动画效果，关于这一点可以参考CodePen 上的这个演示。