我热衷于图像性能优化，并使图像在网络上快速上传。最有趣的探索领域之一是占位符：当图像尚未加载时显示的内容。
在过去的几天里，我遇到了一些使用SVG的加载技术，我想在这篇文章中描述它们。
在这篇文章中，我们将通过以下主题：
- 不同类型的占位符的概述
- 基于SVG的占位符（边缘，形状和轮廓）
- 使过程自动化。
不同类型的占位符的概述
以前我写过关于占位符和图片的懒惰，也谈过。在进行图片延迟加载时，最好考虑以占位符的形式呈现什么内容，因为这会对用户的感知性能产生很大的影响。过去我介绍了几个选择：
在加载之前填充图像区域的几种策略。
- 保持图像空间为空：在响应式设计的世界里，这可以防止内容跳动。从用户的体验角度来看，这些布局的变化是不好的，但是对于性能来说也是如此。每次获取图像的尺寸时，浏览器都会被迫进行布局重新计算，从而留下空间。
- 占位符：想象一下，我们正在显示用户的个人资料图像。我们可能想要在后台显示剪影。这是主图像加载时显示，但也是当这个请求失败，或者当用户没有设置任何配置文件图片。这些图像通常是基于矢量的，而且由于它们的尺寸小，所以是一个很好的候选内联。
- 纯色：从图像中获取一种颜色，并将其用作占位符的背景颜色。这可以是主色调，最有活力…这个想法是，它是基于你正在加载的图像，并应该有助于使没有图像之间的过渡更加平滑的图像。
- 模糊的图像：也称为模糊技术。您渲染图像的一个微小的版本，然后转换到完整的版本。最初的图像在像素和kB中都很小。为了去除伪影，图像被放大并模糊。我之前已经写过关于如何使用渐进式图像加载，使用WebP创建微小的预览图像以及渐进式图像加载的更多示例 。
结果还有很多其他的变化，许多聪明的人正在开发其他技术来创建占位符。
其中之一是有渐变，而不是纯色。渐变可以创建最终图像的更准确的预览，只需很少的开销（有效负载的增加）。
另一种技术是使用基于图像的SVG，这是最近的实验和黑客获得一些牵引力。
基于SVG的占位符
我们知道SVG是矢量图像的理想选择。在大多数情况下，我们要加载一个位图，所以问题是如何矢量化图像。一些选项正在使用边缘，形状和区域。
边缘
在之前的文章中，我解释了如何找出图像的边缘并创建动画。我最初的目标是试图绘制地区，矢量图像，但我不知道该怎么做。我意识到，使用边缘也可以是创新的，我决定创造一个“绘画”效果的动画。
