1.使用<img/>有一個好處是,用戶可以很方便的右鍵保存或者復(fù)制圖片的鏈接
2.圖片作為背景,在圖片沒有加載的時候或者加載失敗的時候,不會有個圖片的占位標(biāo)記,不會出現(xiàn)紅叉
PS：一般圖片下載站會希望訪客炬守、用戶去下載站內(nèi)的圖片，一般的企業(yè)或者站長其實并不希望同行或者競爭對手下載并盜用網(wǎng)站上的圖片。第二點出現(xiàn)紅叉應(yīng)該是古老的IE瀏覽器才會出現(xiàn)，而且隨著寬帶網(wǎng)速的提升，這種情況并不多見塔拳。
3.在網(wǎng)頁加載的過程中,以css背景圖存在的圖片會等到結(jié)構(gòu)加載完成(網(wǎng)頁的內(nèi)容全部顯示以后)才開始加載,而HTML中的<img>標(biāo)簽是網(wǎng)頁結(jié)構(gòu)的一部分會在加載結(jié)構(gòu)過程中加載,換句話說,網(wǎng)頁會先加載img標(biāo)簽的內(nèi)容,再加載背景圖片,如果你用img引入了一個很大的圖片,那么再這個圖片下載完成前,img之后的內(nèi)容都不會顯示,而用css來引用同樣的圖片,網(wǎng)頁結(jié)構(gòu)內(nèi)容加載之后,才開始加載背景圖片,不會影響你瀏覽網(wǎng)頁內(nèi)容,這是比較大的區(qū)別之一
4.如果是裝飾性的圖片就寫在css里面,如果是內(nèi)容性的圖片就寫再html里面,打個比方,你要做一個漂亮邊框相冊,那么修飾邊框圖片就寫在css里面,相框里面的內(nèi)容照片就寫在htmll里面
如下場景使用img比較合適
1,使用img alt(文本)圖像有一個重要的語義時,比如一個警告圖標(biāo),這將確保圖像的意義可以很好的和user-agents溝通,包括屏幕閱讀器
2.如依賴與 瀏覽器縮放圖像比例并且可以呈現(xiàn)不錯的效果時使用img
3、如果配合 z - index 伸展背景圖像來填補它的整個窗口時使用IMG。
4撞羽、使用img代替有背景圖像可以顯著提高性能的動畫背景。
5衫冻、IMG會首先加載因為src在html文件本身中而在有背景圖像源是樣式表中引入的圖像诀紊，加載樣式表加載后,延遲加載的網(wǎng)頁。
如下場景使用background-image屬性比較合適：
1隅俘、如果圖像不是內(nèi)容的一部分時使用backgrond-image邻奠。
2笤喳、當(dāng)圖像代替文本使用時使用backgrond-image（避免出現(xiàn)無語義化標(biāo)簽）。
3碌宴、如果需要縮短下載時間通過CSS sprites 時使用backgrond-image杀狡。
4、如果你只需要展示圖像的一部分通過CSS sprites贰镣，時使用backgrond-image呜象。
5、如果你需要為不同的屏幕分辨率展示不同的圖像使用 media查詢時使用backgrond-image碑隆。
