首頁  >  文章  >  web前端  >  html中圖片顯示方式-----img與background的差異

html中圖片顯示方式-----img與background的差異

青灯夜游
青灯夜游原創
2018-09-13 15:34:552838瀏覽

本章介紹給大家html圖片顯示方式-----img與background的差異,讓大家可以了解在html中讓圖片顯示的兩種方法的差異。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一、從解析機制看

img屬於html標籤,background是css方法。一個頁面由html、css、js組成,依照瀏覽器解析機制,html標籤優先解析。大家都知道css檔案會放在head加載,但這並不代表它會立即執行,而是在html載入完後才執行的。所以重要的元素,如logo就應該使用img。

如果只是為了顯示一張圖片,例如banner、廣告圖等,建議採用background方式。因為不重要的自動往後排,避免佔用頻寬,造成資料阻塞。

如果圖片很多,這裡又出現一個新的問題,不同的瀏覽器支援的並發載入數量是不一樣的,(最新測試)IE是10個,FF是10個,圖片多,就會出現嚴重的延遲或404,因為圖片載入慢會影響到頁面主要資料呈現,那麼讓使用者看到的都是空白,你好意思讓他繼續等下去嗎!所以,如果不採用lazyload還是採用background比較好。

img標籤優點是自閉和,可以避免空標籤出現(空標籤也是w3c驗證的內容之一)。採用background方式就會出現空標籤,bootstrap中的icon都是用i標籤加入的,而i標籤中是空內容,這樣就產生了空標籤(並不是說這樣做不好,利弊等會聊)。

二、從SEO角度看

#剛才說了,img標籤是自閉和的,不能加入文字內容,但是,img有一個alt屬性,而且這個屬性在w3c標準中,要求必須有,這樣做的優點還是很多的。

第一,圖片比較大,或是用戶網速比較窩火的時候,載入失敗了,至少還有文字提示告訴用戶這裡是個什麼內容的圖片。如果使用者非要看這個圖,那就多刷幾次去載入。另外,alt屬性有利於輔助閱讀,尤其是對盲人朋友,他們使用閱讀器瀏覽頁面,如果沒有文字提示,就太不厚道了。

第二,alt屬性有利於SEO,搜尋引擎實現很好的圖片辨識還是有一段路要走。

當然缺點也是有滴:

第一,Img載入的圖片是透過src拿到的,如果HTML程式碼不允許修改,那怎麼換圖,只有同名檔案替換,但是有可能遇到304狀態,需要伺服器端做對應的設定。這時background的優點就出來了,換皮膚就是這個栗子。

第二,如果圖片顯示區域空間大小是預留的,那麼圖片必須和預留的空間一致,否則圖片要麼被拉伸要麼被壓縮,都不是等比例操作。當然,要避免這種問題就需要前端和視覺設計師遵守一定的規範。

三、語意化角度

background和語意化不沾邊了,img是HTML標籤,語意明確。

建議:重要的需要優先載入的圖片最好採用img。不重要的圖片最好採用background。

做SEO是最方便的還是background,圖片是放在背景上的,前景寫內容,兩不誤。如果不想讓內容顯示出來,就加text-indent, -99999你懂的。 (以前有這種玩法,是搜尋引擎演算法單一的年代,關鍵字比重高 排名就靠前)。

剛才提了一下bootstrap的background方法,bootstrap的做法是用background設定icon,icon的使用太靈活了,所以必須模組化,語意化先靠邊站,魚與熊掌不可兼得。 PS:bootstrap v3之後採用了icon font

其次icon的重要性真不高,放在最後加載還減少了頻寬佔用量,提高PV速度。

img標籤語意很明確不能亂用,所以bootstrap採用無語意的i標籤來設定icon也挺好。 PS:自己專案中使用無語意標籤要注意是否向前相容,要注意HTML5中的定義


以上是html中圖片顯示方式-----img與background的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn