How to display pictures in html-----the difference between img and background

This chapter will introduce to you the difference between picture display method in html-----img and background, so that you can understand the difference between the two methods of displaying pictures in html. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. From the perspective of parsing mechanism

img belongs to the html tag, and background is the css method. A page consists of html, css, and js. According to the browser parsing mechanism, the html tag is parsed first. Everyone knows that the css file will be loaded in the head, but this does not mean that it will be executed immediately, but only after the html is loaded. Therefore, important elements such as logos should use img.

If it is just to display a picture, such as a banner, advertising picture, etc., it is recommended to use the background method. Because unimportant items are automatically queued to the back to avoid occupying bandwidth and causing data congestion.

If there are many pictures, a new problem arises here. Different browsers support different numbers of concurrent loads. (Latest test) IE is 10 and FF is 10. If there are many pictures, then There will be serious delays or 404s, because the slow loading of images will affect the presentation of the main data on the page, so all the users see is blank. Do you have the nerve to keep them waiting? Therefore, if you do not use lazyload, it is better to use background.

The advantage of the img tag is that it is self-closing and can avoid the appearance of empty tags (empty tags are also one of the contents verified by w3c). If you use the background method, empty tags will appear. The icons in bootstrap are all added with i tags, and the i tags have empty content, which results in empty tags (not that this is bad, the pros and cons will be discussed later).

2. From an SEO perspective

As I just said, the img tag is self-closing and cannot add text content. However, img There is an alt attribute, and this attribute is required in the w3c standard. There are still many advantages to this.

First, if the image is relatively large or the user’s internet speed is slow, the loading fails. At least there will be a text prompt telling the user what content the image is. If the user insists on seeing this picture, then swipe it several times to load it. In addition, the alt attribute is helpful for assisting reading, especially for blind friends who use readers to browse pages. If there is no text prompt, it would be too unkind.

Second, the alt attribute is beneficial to SEO. There is still a way to go before search engines can achieve good image recognition.

Of course there are also disadvantages:

First, the image loaded by Img is obtained through src. If the HTML code is not allowed to be modified, how to change the image? Only the file with the same name can be replaced, but It is possible to encounter a 304 status, and the server needs to make corresponding settings. At this time, the advantages of background come out, and changing the skin is this chestnut.

Second, if the image display area space size is reserved, then the image must be consistent with the reserved space, otherwise the image will either be stretched or compressed, which is not an equal-proportion operation. Of course, avoiding this problem requires front-end and visual designers to abide by certain norms.

3. Semantic perspective

Background has nothing to do with semantics. img is an HTML tag with clear semantics.

Suggestion: It is best to use img for important pictures that need to be loaded first. It is best to use background for unimportant pictures.

The most convenient way to do SEO is the background. The picture is placed on the background, and the content is written in the foreground, both of which are correct. If you don't want the content to be displayed, add text-indent, -99999, you know. (This method of play used to be used in the era when the search engine algorithm was single, and the higher the proportion of keywords, the higher the ranking).

I mentioned bootstrap’s background method just now. Bootstrap’s method is to use background to set icons. The use of icons is too flexible, so it must be modularized and semantics should be put aside first. You can’t have it both ways. PS: After bootstrap v3, icon font

is adopted. Secondly, the importance of icon is really not high. Loading it at the end also reduces the bandwidth usage and improves the PV speed.

The semantics of the img tag are very clear and cannot be used indiscriminately, so it is good for bootstrap to use the unsemantic i tag to set the icon. PS: When using semantic-less tags in your own projects, you must pay attention to whether they are forward compatible and pay attention to the definitions in HTML5

The above is the detailed content of How to display pictures in html-----the difference between img and background. For more information, please follow other related articles on the PHP Chinese website!