真實尺寸圖像或<img>寬度屬性？

Question

假設我具有不同尺寸的兩個相同的圖像： test_small.jpg（150像素X 150像素）和test_medium.jpg（500像素X 500像素）

我想顯示150像素寬的圖像。

1）哪種用法更適合瀏覽器加載？哪個更快？

<img src="test_smal.jpg"/> 
or 
<img src="test_medium.jpg" width="150px"/> 

2）是否第二使用將加載整個圖像然後調整圖像寬度？

編輯：</img>標籤去除

Answer 1

由於幾個原因，加載較小的圖像速度更快。

1. 文件大小更小，更要下載

2. 不必須調整文件瀏覽器，它只是顯示爲是。

但是，時差的數量將會非常小。

而且img標籤是自閉< />

Answer 2

這裏是你如何使用

<img src="test_small.jpg" /> 

顯然使用較小的文件會更快的圖像標籤，所以使用較小的文件，而不是

Answer 3

你不應該指定的寬度與實際圖像寬度不同，作爲大圖像下載和瀏覽器動態調整大小。

如果你想調整一個圖像的大小，你應該在它被加載到瀏覽器之前做它的服務器端。指定圖像寬度實際上很少需要。

Answer 4

第二個比較慢，因爲你在第二個問題中問了，它會首先下載整個圖像。由於圖像較大，速度較慢。

調整大小也需要更多時間。

您應該很少使用圖像寬度屬性，並嘗試先將圖像保存在服務器上需要的大小上。