2015-09-22 44 views
0

我知道這個問題之前問。 他們大多數都是5-6歲,所以在最新的瀏覽器中添加或不添加原始img大小的高度和寬度?性能明智做或不加寬度和高度img標籤

<img class="stars-img" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/star-128.png" height="128px" width="128px"> 

<img class="stars-img" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/star-128.png"> 

的IMG的大小調整仍然會用CSS實現,所以它不是關於從HTML

回答

1

tl; dr:它對加載時間沒有影響。

將寬度和高度添加到圖片標籤的好處是,瀏覽器將根據圖片大小放置浮動文本,並避免在圖片準備好加載時「跳躍」文本。

因此,如果您瞭解它們,那麼添加尺寸是有意義的。如果你只是添加虛擬值,那麼它是無用的,不應該這樣做。

速度明智這實際上沒有影響。 A 合理width="1000px" height="800px"有29個字節。

下行速率爲24.0 Mbit/s,延遲爲9.667 microseconds(此時光線傳播距離爲2898米)。使用56kbit調制解調器時,每張圖片的時間爲4.143毫秒。

即使您在一頁上有10.000張圖片,延遲也只會是96.67毫秒(56kbit爲41.43秒)。並且花費更多時間來加載所有圖像。

0

如果你仍然要風格與分離造型CSS,首先添加它有什麼好處?

如果您擔心性能,最好將圖片作爲上傳所需的大小,這樣您就不會加載比您需要的圖片更大的圖片。

+0

有時當你在桌面上時,img的大小需要與手機相比不同 – Ivo

+0

那麼爲什麼不在CSS中使用媒體查詢呢? – n8udd

+0

當然,我將使用媒體查詢,但這是CSS的樣式,我想知道如果性能明智的是最好告訴瀏覽器的原始高度和寬度在HTML – Ivo

0

如果可能的話,您應該指定imgages的大小,以便瀏覽器知道圖像需要多少空間。這可以防止瀏覽器需要移動元素來爲出現的圖像騰出空間。

通常,如果您在HTML或CSS中設置尺寸,但將其設置在CSS中可能允許您爲多個圖像指定相同的尺寸,這並不重要。另外,隨着CSS被緩存,移動樣式以減小HTML大小是有意義的。

相關問題