图片优化

返回目录

图片优化

JPEG

WebP

Image Delivery

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

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 上的这个演示