Currently the front page displays pictures of the way with two categories, one is to use the img tag introduced pictures, one is using the background attribute to set the background picture, then there is the difference between these two methods do? In the end what should be used background , what should be used img do? Today a number of ways to share with you how to recognize the two labels, and how to use
< Body > < IMG the src = "./ A.png" Alt = "" style = "display: none;" > // IMG tag element display: none requested image < IMG the src = "./ B.png" Alt = "" style = "display: hidden;" > // IMG tag element display: hidden image request < div style = "background: URL ( './ c.png'); the display: none" > </ div > // background element display: none request image < div style = "background: URL ( './ d.png'); the display:hidden"></div> // background element display: hidden request Picture < div class = "Father" style = "display: none;" > // img tag parent element display: none Request Pictures < img src = "./ a1.png" alt = "" > </ div > < div class = "father" style = "display: hidden;" > // parent element IMG tag display: hidden image request < IMG the src = "./ b1.png" Alt = "" > </ div > <div class="father" style= "display: none;" > // parent element background element display: none no image request < div style = "background: URL ( './ c1.png');" > </ div > </ div > < div class = "father" style = "display: hidden;" > // background element parent element display: hidden request image < div style = "background: URL ( './ d1.png');" > </ div > </ div > </ body >
result
The first aspect: from the perspective of the loading speed
img tag page belongs to, attributes belonging background element, the front page in accordance with the loading sequence, loading img tag priority, when the loaded HTML tags will execute the stylesheet element.
Many people would think that style labels loaded in the body so the background will precede img display pictures, in fact, does not immediately go to the page and execute it in style After loading the label, but only to carry out the CSS style structure when the page finishes loading.
Therefore, from the loading speed point of view img faster than background.
The second aspect: From the user's perspective
Picture img tag displays the user can save to a local right, and the user can not save the background display.
When the image is loaded error, img alt can use words to tell what the user page of this image area to be displayed, but the background can not be done.
D barcode image img tag can phone two-dimensional code recognition Press
The background image is not in the two-dimensional code by phone two-dimensional code recognition Press
Use img alt tab and set up a text that can help visually impaired readers can learn the main content of the page with a screen reader, including picture content, but the use of background can not be achieved.
The third aspect: from SEO point of view
In order for search engines to our site as much as possible of the front display in search results, we need search engines can read the content of our web page. We are now search engines are unable to obtain a direct image content as described in, img alt attribute can well let search engines know the information of the picture, and background so that search engines can not do directly read pictures.
The fourth aspect: Semantically
img represents the part of the page content, and background is just a style, the style of play is a modification, so when we want to display the picture you want to show to the content of the website is the user part of the time, such as: product introduction, news picture, according to the United States and so on, we need to use img. When this picture only play a decorative role, we can use the background.
Although the same effect as a final display of both, but depending on the purpose of use we need flexibility to adjust our final choice of which method to go.