img/background/iconfont---誰最適合你？

前言

第一篇文章，小弟先作一番自我介紹^ω^
姓名不說，年齡21歲，湖北武漢一所二本大學2016屆本科畢業生，大四前的暑假起對web前端產生興趣並有半年實習經驗。ng、vue、react等等高大上的框架徹底不懂，卻也靠前端交流羣和百度積攢下了一些小當心得。說來寫文章也是比較心虛，怕有理解不到位之處還可能禍害別人。但是萬一哪位大牛看到以後閒來無事在評論裏指點一波，我不就賺大了麼^ω^但願各位能抱着辯證的觀點看看個人文章，有什麼錯誤之處還請不吝賜教。^ω^

比較

在這裏將三者放在一塊兒比較其實比較勉強，根據圖像類型來區分，img/background和iconfont是一對參照物，根據圖像使用方式來區分，img和background是一對參照物。那麼咱們一個一個看吧。

1.img與background使用區別

http://blog.sina.com.cn/s/blog_6722ab160101bnn7.html

上面的連接內容是一位前輩對於img和background的看法。很好很強大，我是怎麼也想不到seo這裏去的，根據前輩所述，按照瀏覽器解析機制，html標籤優先解析，像官網的logo這種須要很是醒目的標誌性圖片，選擇img會更合適。使用img的另一個好處就是圖片提示。就像咱們在瀏覽愛奇藝網站的時候，有時視頻下的文字因爲太長而被省略，咱們將鼠標移動到圖片上時會有一個小的氣泡彈出，裏面顯示該視頻的標題所有內容。這樣有利於輔助閱讀。

而使用background屬性來加載圖片有一個很是好用的技巧就是雪碧圖(css sprite)。在全部的網站優化話題中，資源文件的壓縮都是佔很大比重的。若是能將若干張小圖片合併成一張大圖片，那麼只須要一次http請求就能取到咱們所須要的資源，能夠提升頁面載入速度。像百度圖片中的友情連接所使用的圖片就是做爲backgeound-image呈現的，並使用css sprite進行合併。而且相對來說，background更加支持自適應佈局，css3中提供了background-size的屬性，能夠將圖片拉伸、縮放至須要的大小。

總結一下：當須要優先加載、須要提供詳細信息的時候，咱們選擇img更合適；而一些小圖標好比用戶頭像、等數量繁多且體積小的圖片，則適合用background來加載。通常來講，若是是裝飾性的圖片就使用background-img，若是和文體內容很相關就使用img。
下面一則連接一樣是一位前輩總結的二者使用環境的區分，各位且看且斟酌。

http://my.oschina.net/u/1162572/blog/137403

2.iconfont的使用環境

iconfont中文名爲圖標字體，顧名思義是一類字體，以約定好的代碼來表明對應相對應樣式，可以作到不使用圖片而呈現圖片的效果，總結有如下優勢：

1. 輕量性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會立刻渲染出來，不須要下載一個圖像。能夠減小HTTP請求，還能夠配合HTML5離線存儲作性能優化。

2. 靈活性：圖標字體能夠用過font-size屬性設置其任何大小，還能夠加各類文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。能夠在任何背景下顯示。使用位圖的話，必須得爲每一個不一樣大小和不一樣效果的圖像輸出一個不一樣文件。

3. 兼容性：網頁字體支持全部現代瀏覽器，包括IE低版本。咱們在caniuse.com能夠查到其對於主流瀏覽器的兼容性。

只要支持網頁字體就能使用圖標字體。

除了以上優點以外，固然也有劣勢：

1. 圖標字體只能被渲染成單色或者CSS3的漸變色，因爲此限制使得它不能普遍使用。

2. 使用版權上有限制，有好多字體是收費的。固然也有不少免費開源的精美字體圖標供下載使用。

3. 創做自已的字體圖標很費時間，重構人員後期維護的成本偏高。

圖標字體使用方法這裏就很少敘述了，有興趣的各位能夠在下面連接看看。

http://www.tuicool.com/articles/B32uYj

淘寶對於圖標字體是很是支持的，以致於淘寶本身開發了一套iconfont庫。 若是須要展現純色圖片，使用iconfont會是不錯的選擇，前面也提到了圖標字體具備輕量的特性，而且能夠自定義顏色、大小，可使用控制字體的屬性對圖標字體進行控制。對於移動端來說，iconfont的使用更加普遍。許多頁面上的icon如點贊、評論、收藏等純色圖標都會使用iconfont，很是方便。

結語

綜上所述，我總結了一個列表：

img	background	iconfont
網站logo	輪播圖片	小型純色圖標
產品/視頻/新聞列表欄目	合併圖片(css sprites)
須要優先加載的圖片

但願本文對你們搭建頁面時有所幫助。