Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the method of web picture replacement". In daily operation, I believe that many people have doubts about the method of web picture replacement. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "what is the method of web picture replacement?" Next, please follow the editor to study!

Preparatory work

Once again, this paper starts with the analysis of the web page. Use Firefox's built-in screenshot function to take screenshots of the entire page. You also need to install Inkscape with sudo:

$sudo dnf install inkscape

If you want to know how to use Inkscape, there are several ready-made articles in Fedora magazine. This article will only introduce some basic SVG optimization methods for use by Web.

Analysis.

Let's use the getfedora.org web page as an example.

The Getfedora page, tagging the pictures

This analysis is better done graphically, which is why it starts with a screenshot. The screenshot above marks all the graphical elements on the page. The Fedora team has replaced images in two situations (or maybe four, which is better). The social media icon becomes a font glyph, and the language selector becomes SVG.

We have several alternative options:

CSS3

Font

SVG

HTML5 Canvas

HTML5 Canvas

To put it simply, HTML5 Canvas is a HTML element that allows you to draw on it with the help of a scripting language (usually JavaScript), but it is not yet widely used. Because it can be drawn in a scripting language, this element can also be used for animation. Here are some examples of implementation using HTML Canvas, such as triangle mode, dynamic waves, and font animation. However, in this case, it does not seem to be the choice.

CSS3

With cascading stylesheets, you can draw graphics and even make them move. CSS is often used to draw elements such as buttons. However, more complex graphics drawn with CSS are usually only visible on the technical demo page. This is because using vision to make graphics is still faster than using code.

Font

Another way is to use fonts to decorate web pages, and Fontawesome is very popular in this area. For example, in this case you can replace the icons of "Flavor" and "Spin" with fonts. This approach has a negative effect, but it is easy to solve, which we will introduce in the next part of this series.

SVG

This graphics format has been around for a long time, and it is always used in browsers. Not all browsers supported it for a long time, but now it's a thing of the past. Therefore, the * method of graphic substitution in this example is to use SVG.

Optimize SVG for web pages

Optimizing SVG for Internet use requires several steps.

SVG is a dialect of XML. It uses nodes to describe components such as circles, rectangles, or text paths. Each node is a XML element. To keep the code concise, SVG should contain as few elements as possible.

The SVG example we chose is a round icon with a coffee cup. You have three options to describe it in SVG.

A circular element with a coffee cup and a circular path, and a coffee cup with a single path.

You should be able to see that the code is becoming more and more complex and requires more characters to describe it. Of course, the more characters the file contains, the larger the size.

Node cleanup

If you open the instance SVG in Inkscape and press F2, a node tool will be activated. You should see an interface like this:

Inkscape-activate Node tool

There are five unnecessary nodes in this example-the ones in the middle of the line. To delete them, you can use the active Node tool to select them in turn and press Del. Then, select the definition nodes of the line and use the tools of the toolbar to corner them again.

Inkscape-A tool for turning nodes into corners

If we don't fix these corners, we still have a way to define the curve, which will be saved, which will increase the file volume. You can clean up these nodes manually because it cannot be done automatically. Now, you are ready for the next stage.

Use the Save as feature and select optimized SVG. This will pop up a window in which you can choose which ingredients to remove or retain.

Inkscape-"Save as"optimized SVG"

Although this SVG instance is small, it has been reduced from 3.2KB to 920 bytes, less than 1/3 of the original.

Back to the getfedora page: the gray Voronoi map in the background of the main part of the page has been reduced from 211.12 KB to 164.1 KB after optimization in this series of articles.

The original SVG exported on the page is 1. 9 MB in size. After these SVG optimization steps, it has only 500.4 KB. It's too big? Well, the volume of the blue background now is 564.98 KB. There is only a small difference between SVG and PNG.

Compressed file $ls-lhinsgesamt 928K Murray RW Murray Rafael Murray. 1 user user 161K 19. Feb 19:44 grey-pattern.png-rw-rw-r--. 1 user user 160K 18. Feb 12:23 grey-pattern.png.gz-rw-r--r--. 1 user user 489K 19. Feb 19:43 greyscale-pattern-opti.svg-rw-rw-r--. 1 user user 112K 19. Feb 19:05 greyscale-pattern-opti.svg.gz

This is the output of a small test I did for the topic of visualization. You should probably see the raster graphics-PNG-- has been compressed and can no longer be compressed. SVG, which is a XML file, is just the opposite. It is a text file, so it can be compressed to less than 1/4. Therefore, it is now about 50 KB smaller than PNG.

Modern browsers can handle compressed files natively. As a result, many Web servers have mod_deflate (Apache) and gzip (Nginx) modes turned on. In this way, we can save space during transmission. You can check here to see if your server is enabled.

tool of production

First of all, no one wants to optimize SVG with Inkscape every time. You can run Inkscape from GUI on the command line, but you can't find the option to convert Inkscape SVG to optimized SVG. Only raster images can be exported in this way. But our substitute:

SVGO (it seems that the development process is no longer active)

Scour

In this example, we use scour to optimize. Let's install it first:

$sudo dnf install scour

To automatically optimize the SVG file, run scour, like this:

[user@localhost] $scour INPUT.svg OUTPUT.svg-p 3-create-groups-- renderer-workaround-- strip-xml-prolog-- remove-descriptive-elements-- enable-comment-stripping-- disable-embed-rasters-- no-line-breaks-- enable-id-stripping-- shorten-ids

This is the end of the second part. In this section you should learn how to replace a raster image with SVG and optimize it for use.

At this point, the study on "what is the method of web picture replacement" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.