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

tinyq 發(fā)布于2019-08-01 15:23 / 593人閱讀

摘要：在所有的網(wǎng)站優(yōu)化話題中，資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現(xiàn)的，并使用進行合并。可以減少請求，還可以配合離線存儲做性能優(yōu)化。創(chuàng)作自已的字體圖標(biāo)很費時間，重構(gòu)人員后期維護的成本偏高。

前言

第一篇文章，小弟先做一番自我介紹^ω^
姓名不說，年齡21歲，湖北武漢一所二本大學(xué)2016屆本科畢業(yè)生，大四前的暑假起對web前端產(chǎn)生興趣并有半年實習(xí)經(jīng)驗。ng、vue、react等等高大上的框架完全不懂，卻也靠前端交流群和百度積攢下了一些小小心得。說來寫文章也是比較心虛，怕有理解不到位之處還可能禍害別人。可是萬一哪位大牛看到之后閑來無事在評論里指點一波，我不就賺大了么^ω^希望各位能抱著辯證的觀點看看我的文章，有什么錯誤之處還請不吝賜教。^ω^

比較

在這里將三者放在一起比較其實比較勉強，根據(jù)圖像類型來區(qū)分，img/background和iconfont是一對參照物，根據(jù)圖像使用方式來區(qū)分，img和background是一對參照物。那么我們一個一個看吧。

1.img與background使用區(qū)別

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

上面的鏈接內(nèi)容是一位前輩對于img和background的見解。很好很強大，我是怎么也想不到seo這里去的，根據(jù)前輩所述，按照瀏覽器解析機制，html標(biāo)簽優(yōu)先解析，像官網(wǎng)的logo這種需要非常醒目的標(biāo)志性圖片，選擇img會更合適。使用img的另外一個好處就是圖片提示。就像我們在瀏覽愛奇藝網(wǎng)站的時候，有時視頻下的文字由于太長而被省略，我們將鼠標(biāo)移動到圖片上時會有一個小的氣泡彈出，里面顯示該視頻的標(biāo)題全部內(nèi)容。這樣有利于輔助閱讀。

而使用background屬性來加載圖片有一個非常好用的技巧就是雪碧圖(css sprite)。在所有的網(wǎng)站優(yōu)化話題中，資源文件的壓縮都是占很大比重的。如果能將若干張小圖片合并成一張大圖片，那么只需要一次http請求就能取到我們所需要的資源，可以提高頁面載入速度。像百度圖片中的友情鏈接所使用的圖片就是作為backgeound-image呈現(xiàn)的，并使用css sprite進行合并。并且相對來講，background更加支持自適應(yīng)布局，css3中提供了background-size的屬性，可以將圖片拉伸、縮放至需要的大小。

總結(jié)一下：當(dāng)需要優(yōu)先加載、需要提供詳細信息的時候，我們選擇img更合適；而一些小圖標(biāo)比如用戶頭像、等數(shù)量繁多且體積小的圖片，則適合用background來加載。一般來說，如果是裝飾性的圖片就使用background-img，如果和文體內(nèi)容很相關(guān)就使用img。
下面一則鏈接同樣是一位前輩總結(jié)的兩者使用環(huán)境的區(qū)分，各位且看且斟酌。

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

2.iconfont的使用環(huán)境

iconfont中文名為圖標(biāo)字體，顧名思義是一類字體，以約定好的代碼來代表對應(yīng)相對應(yīng)樣式，能夠做到不使用圖片而呈現(xiàn)圖片的效果，總結(jié)有以下優(yōu)點：

輕量性：一個圖標(biāo)字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標(biāo)字體加載了，圖標(biāo)就會馬上渲染出來，不需要下載一個圖像。可以減少HTTP請求，還可以配合HTML5離線存儲做性能優(yōu)化。

靈活性：圖標(biāo)字體可以用過font-size屬性設(shè)置其任何大小，還可以加各種文字效果，包括顏色、Hover狀態(tài)、透明度、陰影和翻轉(zhuǎn)等效果。可以在任何背景下顯示。使用位圖的話，必須得為每個不同大小和不同效果的圖像輸出一個不同文件。

兼容性：網(wǎng)頁字體支持所有現(xiàn)代瀏覽器，包括IE低版本。我們在caniuse.com可以查到其對于主流瀏覽器的兼容性。

只要支持網(wǎng)頁字體就能使用圖標(biāo)字體。

除了以上優(yōu)勢之外，當(dāng)然也有劣勢：

圖標(biāo)字體只能被渲染成單色或者CSS3的漸變色，由于此限制使得它不能廣泛使用。

使用版權(quán)上有限制，有好多字體是收費的。當(dāng)然也有很多免費開源的精美字體圖標(biāo)供下載使用。

創(chuàng)作自已的字體圖標(biāo)很費時間，重構(gòu)人員后期維護的成本偏高。

圖標(biāo)字體使用方法這里就不多敘述了，有興趣的各位可以在下面鏈接看看。

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

淘寶對于圖標(biāo)字體是非常支持的，以至于淘寶自己開發(fā)了一套iconfont庫。如果需要展示純色圖片，使用iconfont會是不錯的選擇，前面也提到了圖標(biāo)字體具有輕量的特性，并且可以自定義顏色、大小，可以使用控制字體的屬性對圖標(biāo)字體進行控制。對于移動端來講，iconfont的使用更加廣泛。許多頁面上的icon如點贊、評論、收藏等純色圖標(biāo)都會使用iconfont，非常方便。

結(jié)語

綜上所述，我總結(jié)了一個列表：

img	background	iconfont
網(wǎng)站logo	輪播圖片	小型純色圖標(biāo)
產(chǎn)品/視頻/新聞列表欄目	合并圖片(css sprites)
需要優(yōu)先加載的圖片