img 加载 svg占位符

by José M. Pérez

由JoséM.Pérez

如何使用SVG作为占位符以及其他图像加载技术 (How to use SVG as a Placeholder, and Other Image Loading Techniques)

I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded yet.

我对图像性能优化和使图像快速加载到网络上充满热情。探索最有趣的领域之一是占位符：尚未加载图像时显示的内容。

During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.

在最后几天，我遇到了一些使用SVG的加载技术，我想在这篇文章中对其进行描述。

In this post we will go through these topics:

在本文中，我们将介绍以下主题：

Overview of different types of placeholders
不同类型的占位符概述
SVG-based placeholders (edges, shapes and silhouettes)
基于SVG的占位符(边缘，形状和轮廓)
Automating the process.
自动化过程。

不同类型的占位符概述 (Overview of different types of placeholders)

In the past I have written about placeholders and lazy-load of images, and also talked about it. When doing lazy-loading of images it’s a good idea to think about what to render as a placeholder, since it can have a big impact in user’s perceived performance. In the past I described several options:

过去，我写过关于占位符和图像的延迟加载的文章，并且也对此进行了讨论。在进行图像的延迟加载时，考虑作为占位符呈现什么是一个好主意，因为它可能会对用户的感知性能产生很大的影响。过去，我描述了几种选择：

Several strategies to fill the area of an image before it loads.

在加载图像之前填充图像区域的几种策略。

Keeping the space empty for the image: In a world of responsive design, this prevents content from jumping around. Those layout changes are bad from a user’s experience point of view, but also for performance. The browser is forced to do layout re calculations every time it fetches the dimensions of an image, leaving space for it.
保留图像的空白空间 ：在响应快速的设计世界中，这可以防止内容跳来跳去。从用户体验的角度来看，这些布局更改是不好的，而且对于性能而言也是如此。浏览器每次获取图像尺寸时都必须进行布局重新计算，从而留出空间。
Placeholder: Imagine that we are displaying a user’s profile image. We might want to display a silhouette in the background. This is shown while the main image is loaded, but also when that request failed or when the user didn’t set any profile picture at all. These images are usually vector-based, and due to their small size are a good candidate to be inlined.
占位符 ：假设我们正在显示用户的个人资料图像。我们可能要在背景中显示一个剪影。在加载主图像时，请求失败或用户根本没有设置任何个人资料图片时，都会显示此内容。这些图像通常基于矢量，并且由于其较小的尺寸，因此很适合内联。
Solid colour: Take a colour from the image and use it as the background colour for the placeholder. This can be the dominant colour, the most vibrant… The idea is that it is based on the image you are loading and should help making the transition between no image to image loaded smoother.
纯色：从图像中获取颜色，并将其用作占位符的背景色。这可能是占主导地位的颜色，也是最鲜艳的颜色……其想法是，它基于您正在加载的图像，并且应该有助于使无图像到图像加载之间的过渡更加平滑。
Blurry image: Also called blur-up technique. You render a tiny version of the image and then transition to the full one. The initial image is tiny both in pixels and kBs. To remove artifacts the image is scaled up and blurred. I have written previously about this on How Medium does progressive image loading, Using WebP to create tiny preview images, and More examples of Progressive Image Loading .
模糊图像 ：也称为模糊技术。您渲染图像的一个很小的版本，然后过渡到完整版本。初始图像的像素和kBs都很小。要消除伪影，请按比例放大和模糊图像。我之前已经写过有关媒介如何进行渐进式图像加载，使用WebP创建微小的预览图像以及更多渐进式图像加载示例的文章。

Turns out there are many other variations and lots of smart people are developing other techniques to create placeholders.

事实证明，还有许多其他变体，许多聪明人正在开发其他技术来创建占位符。

One of them is having gradients instead of solid colours. The gradients can create a more accurate preview of the final image, with very little overhead (increase in payload).

其中之一是使用渐变色而不是纯色。渐变可以创建最终图像的更准确的预览，而开销很少(有效负载增加)。

Another technique is using SVGs based on the image, which is getting some traction with recent experiments and hacks.

另一种技术是基于图像使用SVG，这在最近的实验和黑客攻击中获得了一定的吸引力。

基于SVG的占位符 (SVG-based placeholders)

We know SVGs are ideal for vector images. In most cases we want to load a bitmap one, so the question is how to vectorise an image. Some options are using edges, shapes and areas.

我们知道SVG非常适合矢量图像。在大多数情况下，我们希望加载一个位图，因此问题是如何对图像进行矢量化处理。一些选项使用边缘，形状和区域。

边缘 (Edges)

In a previous post I explained how to find out the edges of an image and create an animation. My initial goal was to try to draw regions, vectorising the image, but I didn’t know how to do it. I realised that using the edges could also be innovative and I decided to animate them creating a “drawing” effect.

在上一篇文章中，我解释了如何找出图像的边缘并创建动画。我的最初目标是尝试绘制区域，对图像进行矢量化处理，但我不知道该怎么做。我意识到使用边缘也可能是创新的，因此我决定对它们进行动画处理，以产生“绘画”效果。

Drawing images using edge detection and SVG animationBack in the days SVG was barely used and supported. Some time after we started using them as an alternative to classic…medium.com

使用边缘检测和SVG动画绘制图像 在过去，SVG几乎没有被使用和支持。 在我们开始将它们用作经典替代品之后的一段时间。

形状 (Shapes)

SVG can also be used to draw areas from the image instead of edges/borders. In a way, we would vectorise a bitmap image to create a placeholder.

SVG还可以用于从图像而不是边缘/边界绘制区域。在某种程度上，我们将对位图图像进行矢量化处理以创建占位符。

Back in the days I tried to do something similar with triangles. You can see the result in my talks at CSSConf and Render Conf.

过去，我曾尝试对三角形进行类似的处理。您可以在CSSConf和Render Conf的演讲中看到结果。

The codepen above is a proof of concept of a SVG-based placeholder composed of 245 triangles. The generation of the triangles is based on Delaunay triangulation using Possan’s polyserver. As expected, the more triangles the SVG uses, the bigger the file size.

上面的代码笔是对由245个三角形组成的基于SVG的占位符的概念证明。三角形的生成基于Possan的polyserver的 Delaunay三角剖分。如预期的那样，SVG使用的三角形越多，文件大小越大。

Primitive和SQIP，一种基于SVG的LQIP技术 (Primitive and SQIP, a SVG-based LQIP technique)

Tobias Baldauf has been working on another Low-Quality Image Placeholder technique using SVGs called SQIP. Before digging into SQIP itself I will give an overview of Primitive, a library on which SQIP is based.

Tobias Baldauf一直在研究另一种使用称为SQIP的SVG的低质量图像占位符技术。在深入研究SQIP本身之前，我将概述Primitive ，这是SQIP所基于的库。

Primitive is quite fascinating and I definitely recommend you to check it out. It converts a bitmap image into a SVG composed of overlapping shapes. Its small size makes it suitable for inlining it straight into the page. One less roundtrip, and a meaningful placeholder within the initial HTML payload.

Primitive非常吸引人，我绝对建议您检查一下。它将位图图像转换为由重叠形状组成的SVG。它的小尺寸使其适合直接插入页面。往返次数减少了一个，并且在初始HTML有效负载中具有有意义的占位符。

Primitive generates an image based on shapes like triangles, rectangles and circles (and a few others). In every step it adds a new one. The more steps, the resulting image looks closer to the original one. If your output is SVG it also means the size of the output code will be larger.

图元基于三角形，矩形和圆形(以及其他一些形状)生成图像。在每一步中，它都会添加一个新的。步骤越多，生成的图像看起来就越接近原始图像。如果您的输出是SVG，这也意味着输出代码的大小将更大。

In order to understand how Primitive works, I ran it through a couple of images. I generated SVGs for the artwork using 10 shapes and 100 shapes:

为了了解Primitive的工作原理，我通过几个图像对其进行了介绍。我使用10种形状和100种形状为艺术品生成了SVG：

When using 10 shapes the images we start getting a grasp of the original image. In the context of image placeholders there is potential to use this SVG as the placeholder. Actually, the code for the SVG with 10 shapes is really small, around 1030 bytes, which goes down to ~640 bytes when passing the output through SVGO.

当使用10个形状的图像时，我们开始掌握原始图像。在图像占位符的上下文中，有可能使用此SVG作为占位符。实际上，具有10种形状的SVG的代码确实很小，大约1030字节，当通过SVGO传递输出时，该代码减少到640字节左右。

<svg xmlns=”http://www.w3.org/2000/svg" width=”1024" height=”1024"><path fill=”#817c70" d=”M0 0h1024v1024H0z”/><g fill-opacity=”.502"><path fill=”#03020f” d=”M178 994l580 92L402–62"/><path fill=”#f2e2ba” d=”M638 894L614 6l472 440"/><path fill=”#fff8be” d=”M-62 854h300L138–62"/><path fill=”#76c2d9" d=”M410–62L154 530–62 38"/><path fill=”#62b4cf” d=”M1086–2L498–30l484 508"/><path fill=”#010412" d=”M430–2l196 52–76 356"/><path fill=”#eb7d3f” d=”M598 594l488–32–308 520"/><path fill=”#080a18" d=”M198 418l32 304 116–448"/><path fill=”#3f201d” d=”M1086 1062l-344–52 248–148"/><path fill=”#ebd29f” d=”M630 658l-60–372 516 320"/></g></svg>

The images generated with 100 shapes are larger, as expected, weighting ~5kB after SVGO (8kB before). They have a great level of detail with a still small payload. The decision of how many triangles to use will depend largely on the type of image (eg contrast, amount of colours, complexity) and level of detail.

如预期的那样，使用100个形状生成的图像较大，在SVGO之后权重约为5kB(之前为8kB)。它们的细节水平很高，有效载荷仍然很小。使用多少个三角形的决定将在很大程度上取决于图像的类型(例如，对比度，颜色数量，复杂性)和细节级别。

It would be possible to create a script similar to cpeg-dssim that tweaks the amount of shapes used until a structural similarity threshold is met (or a maximum number of shapes in the worst case).

可以创建类似于cpeg-dssim的脚本，该脚本可调整使用的形状数量，直到满足结构相似性阈值(或在最坏的情况下，最大数量的形状)。

These resulting SVGs are great also to use as background images. Being size-constrained and vector-based they are a good candidate for hero images and large backgrounds that otherwise would show artifacts.

这些生成的SVG也非常适合用作背景图像。由于尺寸受限制且基于矢量，因此它们是英雄图像和大背景(否则会显示伪影)的理想选择。

品质保证计划 (SQIP)

In Tobias’ own words:

用托比亚斯自己的话说：

SQIP is an attempt to find a balance between these two extremes: it makes use of Primitive to generate a SVG consisting of several simple shapes that approximate the main features visible inside the image, optimizes the SVG using SVGO and adds a Gaussian Blur filter to it. This produces a SVG placeholder which weighs in at only ~800–1000 bytes, looks smooth on all screens and provides an visual cue of image contents to come.
SQIP试图在这两个极端之间找到平衡：它使用基本体生成由几个简单形状组成的SVG，这些形状近似于图像内部可见的主要特征，使用SVGO优化SVG并为其添加高斯模糊滤镜。 这样就产生了一个SVG占位符，该占位符仅重约800-1000字节，在所有屏幕上看起来都很平滑，并提供了即将出现的图像内容的可视提示。

The result is similar to using a tiny placeholder image for the blur-up technique (what Medium and other sites do). The difference is that instead of using a bitmap image, eg JPG or WebP, the placeholder is SVG.

结果类似于使用微小的占位符图像进行模糊处理( Medium和其他站点执行的操作)。区别在于，占位符是SVG，而不是使用位图图像(例如JPG或WebP)。

If we run SQIP against the original images we’ll get this:

如果我们对原始图像运行SQIP，则会得到以下信息：

The output SVG is ~900 bytes, and inspecting the code we can spot the feGaussianBlur filter applied to the group of shapes:

输出的SVG约为900字节，通过检查代码，我们可以发现应用于形状组的feGaussianBlur滤波器：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><filter id="b"><feGaussianBlur stdDeviation="12" /></filter><path fill="#817c70" d="M0 0h2000v2000H0z"/><g filter="url(#b)" transform="translate(4 4) scale(7.8125)" fill-opacity=".5"><ellipse fill="#000210" rx="1" ry="1" transform="matrix(50.41098 -3.7951 11.14787 148.07886 107 194.6)"/><ellipse fill="#eee3bb" rx="1" ry="1" transform="matrix(-56.38179 17.684 -24.48514 -78.06584 205 110.1)"/><ellipse fill="#fff4bd" rx="1" ry="1" transform="matrix(35.40604 -5.49219 14.85017 95.73337 16.4 123.6)"/><ellipse fill="#79c7db" cx="21" cy="39" rx="65" ry="65"/><ellipse fill="#0c1320" cx="117" cy="38" rx="34" ry="47"/><ellipse fill="#5cb0cd" rx="1" ry="1" transform="matrix(-39.46201 77.24476 -54.56092 -27.87353 219.2 7.9)"/><path fill="#e57339" d="M271 159l-123–16 43 128z"/><ellipse fill="#47332f" cx="214" cy="237" rx="242" ry="19"/></g></svg>

SQIP can also output an image tag with the SVG contents Base 64 encoded:

SQIP还可以输出带有SVG内容Base 64编码的图像标签：

<img width="640" height="640" src="example.jpg” alt="Add descriptive alt text" style="background-size: cover; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw…<stripped base 64>…PjwvZz48L3N2Zz4=);">

剪影 (Silhouettes)

We just had a look at using SVGs for edges and primitive shapes. Another possibility is to vectorise the images “tracing” them. Mikael Ainalem shared a codepen a few days ago showing how to use a 2-colour silhouette as a placeholder. The result is really pretty:

我们只是看看如何将SVG用于边缘和原始形状。另一种可能性是矢量化图像以“跟踪”它们。 Mikael Ainalem几天前分享了一个Codepen，展示了如何使用2色轮廓作为占位符。结果非常漂亮：

The SVGs in this case were hand drawn, but the technique quickly spawned integrations with tools to automate the process.

在这种情况下，SVG是手工绘制的，但是该技术很快催生了与工具的集成，以使过程自动化。

Gatsby, a static site generator using React supports these traced SVGs now. It uses a JS PORT of potrace to vectorise the images.
Gatsby是使用React的静态站点生成器，现在支持这些跟踪的SVG。它使用potrace的JS PORT对图像进行矢量化。

Craft 3 CMS, which also added support for silhouettes. It uses a PHP port of potrace.
Craft 3 CMS ，还增加了对轮廓的支持。它使用potracePHP端口。

image-trace-loader, a Webpack loader that uses potrace to process the images.
image-trace-loader ，一个Webpack加载器，使用potrace处理图像。

It’s also interesting to see a comparison of the output between Emil’s webpack loader (based on potrace) and Mikael’s hand-drawn SVGs.

看到Emil的webpack loader(基于potrace)和Mikael的手绘SVG之间的输出比较也很有趣。

I assume the output generated by potrace is using the default options. However, it’s possible to tweak them. Check the options for image-trace-loader, which are pretty much the ones passed down to potrace.

我假设potrace生成的输出使用默认选项。但是，可以对其进行调整。检查image-trace-loader的选项，这些选项几乎是传递给potrace的选项。

摘要 (Summary)

We have seen different tools and techniques to generate SVGs from images and use them as placeholders. The same way WebP is a fantastic format for thumbnails, SVG is also an interesting format to use in placeholders. We can control the level of detail (and thus, size), it’s highly compressible and easy to manipulate with CSS and JS.

我们已经看到了用于从图像生成SVG并将其用作占位符的不同工具和技术。与WebP是用于缩略图的奇妙格式一样，SVG也是在占位符中使用的有趣格式。我们可以控制细节级别(从而控制大小)，它的高度可压缩性并且易于使用CSS和JS进行操作。

额外资源 (Extra Resources)

This post made it to the top of Hacker News. I’m very grateful for that, and for all the links to other resources that have been shared in the comments on that page. Here are a few of them!

这篇文章登上了Hacker News的顶部。对此，以及该页面评论中共享的其他资源的所有链接，我深表感谢。这里有几个！

Geometrize is a port of Primitive written in Haxe. There is also a JS implementation that you can try out directly on your browser.
Geometrize是用Haxe编写的Primitive的一部分。还有一个JS实现，您可以直接在浏览器上试用。
Primitive.js, which is a port of Primitive in JS. Also, primitive.nextgen, which is a port of the Primitive desktop app using Primitive.js and Electron.
Primitive.js ，它是JS中Primitive的一部分。另外， primary.nextgen ，它是使用Primitive.js和Electron的Primitive桌面应用程序的端口。
There are a couple of Twitter accounts where you can see examples of images generated with Primitive and Geometrize. Check out @PrimitivePic and @Geometrizer.
有几个Twitter帐户，您可以在其中查看使用Primitive和Geometrize生成的图像的示例。查看@PrimitivePic和@Geometrizer 。
imagetracerjs, which is a raster image tracer and vectorizer written in JavaScript. There are also ports for Java and Android.
imagetracerjs ，这是用JavaScript编写的光栅图像跟踪器和矢量化器。还有用于Java和Android的端口。
Canvas-Graphics, a partial implementation of the JS Canvas API in PHP around GD.
Canvas-Graphics ，是GD中PHP的JS Canvas API的部分实现。

If you have enjoyed this post, check out these other posts I have written about techniques loading images:

如果您喜欢这篇文章，请查看我写的有关加载图像技术的其他文章：

How Medium does progressive image loadingRecently, I was browsing a post on Medium and I spotted a nice image loading effect. First, load a small blurry image…medium.comUsing WebP to create tiny preview imagesFollowing with the image optimization topic, I am going to have a deeper look to Facebook’s technique to create preview…medium.comMore examples of Progressive Image LoadingIn a past post I dissected a technique used by Medium to display images, transitioning from a blurry image to the final…medium.com

Medium如何进行渐进式图像加载 最近，我在Medium上浏览了一篇文章，发现了很好的图像加载效果。 首先，加载一个小的模糊图像… medium.com 使用WebP创建微小的预览图像 在讨论图像优化主题之后，我将对Facebook的创建预览 图像 的技术进行更深入的研究 。过去的帖子中，我剖析了Medium用于显示图像的技术，从模糊的图像过渡到最终的图像。

You can read more of my articles on jmperezperez.com.

您可以在jmperezperez.com上阅读我的更多文章。