Using SVG as a Placeholder

SVG generation from images can be used for Placeholders.

I am engaged in the optimization of images and images for their quick download. One of the most interesting areas of research is Placeholders: what to show when the image is not loaded yet.
')
In recent days I have come across some boot methods that use SVG, and I would like to describe them in this post.

In this post we will cover the following topics:

• Overview of the various types of placeholders
• SVG based placeholder (contours, shapes, and silhouettes)
• Automate the process.

---

The translation was made with the support of the company EDISON Software , which is professionally engaged in the creation of corporate websites on WordPress , as well as the design of characters for corporate identity .

---

Overview of the various types of placeholders

In the last post I wrote about Placeholder and lazy loading of images, and also talked about it. When you do a lazy loading of images, it's a good idea to think about what to do as a Placeholder, as this can have a big impact on the user's perception. Recently, I described several options:



Several options for filling the image area before loading it.

Keeping image space empty : in the world of responsive design, this prevents content shifting. These layout changes are bad from the user's point of view, and for presentation. The browser is forced to perform layout calculations every time it retrieves image dimensions, leaving space for it.

• Placeholder : Imagine that we are showing a profile picture of a user. We could display the silhouette in place of the image. It is displayed not only when the main image is loaded, but also when the request fails or when the user has not installed a profile image at all. These images are usually based on vectors, and because of their small size, are a good candidate that should be embedded.
• Solid color : take the color from the image and use it as the background color for the Placeholder. This may be the dominant color, the brightest ... The idea is that it is based on the loaded image and should help make the transition between “no image” to image smoother.
• Blurred image : also called a blur technique. You create a small version of the image, and then go to the full. The initial image is small in both pixels and sizes. To remove artifacts, the image is scaled and blurred. I previously wrote about this in these articles, How Medium does progressive image loading , using images .
• It turns out that there are many other options, and many smart people are developing other methods for creating Placeholders.

One of them is the use of gradients instead of solid colors. Gradients can create a more accurate preview of the final image with minimal cost (payload increase).


Use gradients as a background. Screenshot from Gradify, which is no longer online. The code on github .

Another method is to use image-based SVG.

SVG-based placeholder

We know that SVG is ideal for vector images. In most cases, we want to load a bitmap image, so the question is how to vectorize the image. Some options use outlines, shapes, and areas.

Contours

In a previous post, I explained how to recognize the outlines in an image and create an animation. My initial goal was to try to draw areas, vectorizing the image, but I did not know how to do it. I realized that the use of contours can also be innovative, and I decided to revive them, creating the effect of "drawing."


Codepen

Drawing images using edge detection and SVG animation

Forms

SVG can also be used to draw areas from an image without using contours / borders. In a sense, we will vectorize the bitmap to create a Placeholder.

I once tried to do something similar with triangles. You can see the result in my conversations in CSSConf and Render Conf .



The codepen above is proof of the SVG-based Placeholder concept, consisting of 245 triangles. Triangle generation is based on the Delaunay triangulation using the Pissan polyserver. As expected, the more triangles used by SVG, the larger the file size.

Primitive and SQIP, SVG-based LQIP method

Tobias Baldauf is working on another method of poor image quality using SVG, called SQIP . Before digging into SQIP, I will give an overview of Primitive , the library on which SQIP is based.

Primitive is quite fascinating, and I definitely recommend you try it. It converts a raster image to an SVG, consisting of overlapping shapes. Its small size makes it suitable for imposing it directly on the page. Another good option as well as a meaningful placeholder in the initial HTML download.

Primitive generates an image based on such shapes as triangles, rectangles and circles (and several others). At each step, he adds a new one. The more steps, the resulting image looks closer to the original. If you have SVG output, it also means that the size of the output code will be larger.

To understand how Primitive works, I took it through a couple of images. I generated the SVG for artwork using 10 shapes and 100 shapes:



to pictures (Processing this image using Primitive, using 10 Shapes and 100 figures.)



When using 10 figures in the image, we begin to understand the original image. In the context of placeholder'a images, it is possible to use this SVG as a placeholder'a. In fact, the code for SVG with 10 figures is very small, about 1030 bytes, which drops to ~ 640 bytes when transferring the output via SVGO.

<path fill=”#817c70" d=”M0 0h1024v1024H0z”/><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"/>

Images generated with 100 figures are larger, as expected, weighing ~ 5K after SVGO (previously 8KB). They have a high level of detail with a small payload. The decision on how many triangles to use will depend largely on the type of image (for example, contrast, number of colors, complexity) and level of detail.

One could create a script similar to cpeg-dssim , which changes the number of figures used until the threshold of structural similarity is reached (or the maximum number of figures in the worst case).

These SVGs are also great for use as background images. Being limited in size and based on a vector, they are a good candidate for images of heroes and large backgrounds that would otherwise show artifacts.

SQIP

According to Tobias :

SQIP is an attempt to find a balance between these two extremes: using Primitive to generate an SVG consisting of several simple shapes that approximate the main objects visible inside the image optimizes the SVG using SVGO and adds a Gaussian Blur filter to it. This produces an SVG placeholder that weighs only ~ 800-1000 bytes, looks smooth on all screens and provides a visual replica of the image content.

The result is similar to using a tiny Placeholder image for blur technology (as Medium and other sites do ). The difference is that instead of using a bitmap, such as JPG or WebP, the Placeholder is an SVG.

If we run SQIP against the original images, we get the following:



Output images using SQIP for the first image and the second one .

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


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

<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 looked at using SVG for contours and primitive shapes. Another possibility is to vectorize images, “drawing” them. A few days ago, Mikael Ainalem shared a codepen'on, specifying how to use a 2-color silhouette as a placeholder. The result is very beautiful:



In this case, the SVGs were drawn manually, but the technique quickly generated integration with the tools for automating the process.

• Gatsby , a static site generator that uses React, supports these traced SVGs now. It uses the JS PORT potrace for image vectoring.
  
  
  
• Craft 3 CMS , which also added support for silhouettes. It uses PHP Port of potrace .
  
  
  
• image-trace-loader , a webpack loader that uses potrace to process images.
  
  
  

It is also interesting to see a comparison of the output between the Emil Webpack loader (based on potrace) and the hand-drawn SVG from Mikael.



I assume that the output generated by potrace uses default parameters. However, they can be customized. Check the parameters for the Image-trace-loader , which are mainly passed to the potrace .

Total

We considered various tools and methods for generating SVG from images and using them as a placeholder. Also WebP is a fantastic format for thumbnails , SVG is also an interesting format for use in place holders. We can control the level of detail (and, therefore, size), it is very compressed and easily controlled with CSS and JS.

Additional resources

• Geometrize is a port of Primitive, written in Haxe. There is also an implementation on JS , which you can try right in your browser .
• Primitive.js , which is the port of Primitive in JS. In addition, primitive.nextgen , which is a port of the Primitive desktop application using Primitive.js and Electron.
• There are several Twitter accounts where you can see examples of images created using primitive and geometry. See @PrimitivePic and @Geometrizer .
• imagetracerjs , which is a bitmap tracer and vectorizer written in JavaScript. There are also ports for Java and Android .