Front-end optimization-img and background

When IMG encounters background, the world is so small ~~~~~

1 from the perspective of the analytic mechanism

IMG is an HTML tag, and background is a CSS method. A page consists of HTML, CSS, JS, according to the browser parsing mechanism,HTML tags priority parsing. everyone knows that the CSS file will be placed in the head load, but this does not mean that it will be executed immediately, but only after the HTML is loaded. So important elements, such as logo should use IMG, I also made this mistake Ah, change ~ ~ ~.

If only to display a picture , such as banner, advertising map, etc., it is recommended to use the background method. Because it is not important to automatically go to the back row, avoid the use of bandwidth, resulting in data congestion.

If there is a lot of pictures, there is a new problem, different browsers support the number of concurrent loading is not the same, (the latest test) IE is 10, FF is 10, more pictures, there will be serious delay or 404, because the image loading slow will affect the main page data rendering, So let the user see is blank, you have the nerve to let him continue to wait!

The advantage of the IMG tag is that it is self-closing and avoids the appearance of empty tags (empty tags are also one of the content verified by the worlds). The use of background way will appear empty tags, bootstrap in the icon are added with the I tag, and I tag is empty content, so that the empty label generated (not to say that this is not good, the pros and cons will chat).

2 from the SEO point of view

Just said, the IMG tag is self-closing and cannot add text content, but IMG has an ALT attribute, and this attribute is required in the standard, and there are many benefits to this.

First, the picture is bigger, or the user network speed comparison Wohuo time, the load failed, at least also has the text hint to tell the user here is what content picture. If the user does not want to see this diagram, then brush several times to load. In addition, thealt attribute facilitates reading , especially for blind friends, who use the reader to navigate the page, which is too unkind if there is no text hint.

Second, thealt attribute is advantageous to SEO, the search engine realizes very good image recognition or has a certain way to go.

Third, to say the shortcomings, IMG loaded images are obtained through SRC, if the HTML code is not allowed to modify, then how to change the diagram, only the same name file replacement, but it is possible to encounter the 304 state, the server side to do the corresponding settings. At this point the advantages of background out, for the skin is the chestnut. Another drawback of IMG is that the display area space size reservation, the picture must be consistent with the reserved space, otherwise the picture is either stretched or compressed, is not proportional operation, the designer saw the spitting blood, a pixel difference can be found, hurt. Of course, the problem is that front-end and visual designers must follow certain specifications. Rasterization floats over ~~~~~~

Do SEO is the most convenient or background, the picture is placed on the background, the foreground write content, two not mistaken. If you don't want content to appear, add text-indent,-99999 you understand. (previously there is this play, is the search engine algorithm single era, the keyword proportion of high ranking on the front).

Just mentioned a bit bootstrap background method, bootstrap practice is to use background set Icon,icon used too flexible, so must be modular, semantic first step aside, fish and bear can not be both. Second, the importance of the icon is really not high, put in the last load also reduces the bandwidth consumption, improve the PV speed. IMG Tag semantics is very clear can not be used, so bootstrap using the non-semantic I tag to set the icon is also very good, but to note that no semantic tags are forward-compatible, you should pay attention to the definition of HTML5.

3 Semantic point of view

Background and semantics are not the same, IMG is an HTML tag, the semantics are clear.

Recommendation: Important images that require priority loading are best used img. images that are not important are best used background.

The above belongs to personal humble opinion, welcome correct.

Front-end optimization-img and background