Foreword
The first article, the younger brother do first introduce yourself ^ ω ^
name does not say, age 21 years, Wuhan University, a two session of 2016 graduates, from the summer before senior interested in the web front end and six months internship experience. frame on the tall ng, vue, react, and so fully understand, but also by the front-end Exchange Group and Baidu will accumulate some little experience. Say writing is more timid, afraid of understanding is not in place at the likely harmful to others. But after seeing nothing else to do in case of Daniel Which wave pointing in the comments, I do not earn big it ^ ω ^ hope you can take a look at my article holding dialectical point of view, there is nothing wrong with Please also let me know. ^ ω ^
Compare
Here the comparison is actually three together more reluctant, to distinguish the type of the image, img / background iconfont and a pair of reference, use to distinguish the image, and background IMG is a pair of reference. So one by one we see.
1.img with the background using the difference
The above link is a senior content for img insight and background. Very very powerful, I can not imagine how seo go here, according to the older generation, according to the browser resolution mechanism, html tag priority to resolve , such as the logo of the official website requires a very eye-catching iconic picture, it would be more appropriate to select img . Use img Another advantage is that the picture prompts. As we browse iQIYI site, sometimes too long because the text under the video, which are omitted, we will have a small mouse to pop the bubbles move to the picture, which shows the entire contents of the title of the video. This is conducive to aid reading.
The use background attribute to load the picture has a very useful trick is to map Sprite (css sprite). Of all the topics in site optimization, resource files are compressed account for a large proportion. If you can into a number of small images into big pictures, then you only need a http request to be able to get the resources we need, you can increase the page loading speed. Like the picture Link Baidu picture is used as backgeound-image presentation, and use css sprite merge. And relatively speaking, more background support adaptive layout, provided CSS3 background-size attribute, the image may be stretched to the desired scale size.
To summarize: When you need to load the priority, the need to provide more information when we choose img more appropriate; and some small icons such as user avatars, and other small and large quantity of picture, suitable for background to load. Generally speaking, if it is decorative images on the use of background-img, if the content is relevant to the style and use img .
Here is also a link to distinguish between a senior summary of both the use of the environment, let me see you and discretion.
2.iconfont use of the environment
iconfont Chinese font called icon, as the name suggests is a kind of fonts to the agreement on behalf of good code corresponding to the style, able to do without the use of pictures and showed pictures of effects corresponding to the summary has the following advantages:
Lightweight: the font icon than a series of images (especially the use of the double image in Retina screen) is smaller. Once loaded font icon, the icon will be rendered immediately, no need to download an image. Can be reduced HTTP request, it may also be stored offline to do with performance optimization HTML5.
Flexibility: Icon fonts can be used font-size property is set to any size, you can also add a variety of text effects, including color, Hover state, transparency, shadows and flip effects. It can be displayed on any background. Bitmap, you must have a different file for the output image for each of different sizes and different effects.
Compatibility: Web font support for all modern browsers, including IE low version. We can be found for its compatibility with major browsers in caniuse.com.
As long as support for web fonts you can use icon fonts.
In addition to the above advantages, of course, there are disadvantages:
Icon font can only be rendered monochrome or color gradients CSS3 due to this limitation so that it can not be widely used.
There are restrictions on the use of copyright, there are a lot of fonts for a fee. Of course, there are many fine free open source Fonts icon for download.
The creation of their own font icon is time-consuming, the cost of reconstruction of post-maintenance personnel is high.
Icon font to use here is not described, you are interested you can take a look at the link below.
Taobao for icon fonts are very supportive of that Taobao has developed a iconfont own library. If you need to show solid color pictures, use iconfont would be a good choice, also mentioned earlier the icon font with a lightweight characteristics, and can customize the color, size, font can be used to control the properties of the icon font control. For the mobile side is concerned, the more extensive use iconfont. Many icon on the page, such as thumbs, comments, favorites and other solid color icon will use iconfont, very convenient.
Epilogue
To sum up, I summed up a list:
| img | background | iconfont |
|---|---|---|
| Website logo | Carousel Images | Small solid color icon |
| Products / video / News list columns | The combined picture (css sprites) | |
| Priority loading picture |
Hope this help when you build a page.
This article is reproduced in: img / background / IconFont --- Who is best for you?