何時使用img標籤，何時使用background-image背景圖像

在什麼情況下更適合使用HTML IMG標籤來顯示一個圖像,而不是一個CSS有背景圖像,反之亦然?     如下場景使用img標籤比較合適：     

1、如果圖像是等內容的一部分或圖表或人(真正的人,而不是股票圖人)，使用Img標籤加上alt屬性。     

2、如果你想打印頁面並且你想要的圖像包括默認情況下使用IMG。     

3、使用IMG(alt文本)圖像有一個重要的語義時,比如一個警告圖標。這將確保圖像的意義可以很好的和user-agents溝通,包括屏幕閱讀器。     

4、如果你依賴於瀏覽器縮放圖像比例並且可以呈現不錯的效果時使用IMG。    

5、如果配合 z - index 伸展背景圖像來填補它的整個窗口時使用IMG。     

6、使用img代替有背景圖像可以顯著提高性能的動畫背景。     

7、IMG會首先加載因爲src在html文件本身中而在有背景圖像源是樣式表中引入的圖像，加載樣式表加載後,延遲加載的網頁。     

如下場景使用background-image屬性比較合適：     

1、如果圖像不是內容的一部分時使用backgrond-image。     

2、當圖像代替文本使用時使用backgrond-image。    

3、如果你想打印頁面並且你不想要的圖像包括默認情況下使用backgrond-image。     

4、如果需要縮短下載時間通過CSS sprites 時使用backgrond-image。     

5、如果你只需要展示圖像的一部分通過CSS sprites，時使用backgrond-image。     

6、如果你需要爲不同的屏幕分辨率展示不同的圖像使用 media查詢時使用backgrond-image。