爲圖像指定圖像寬度和高度的原因<img />

Question

頁面速度建議爲圖像提供圖像高度和寬度，有人可以告訴我指定圖像的高度和寬度有什麼優勢。

通常情況下，我們總是在src標記中給出圖像的url，並始終忘記指定寬度和高度。

Answer 1

通過提前指定寬度和高度，瀏覽器會首先渲染頁面中所有元素的位置和大小。如果您不指定大小，則必須在知道它們之前下載該文件，然後必須重新呈現頁面上的所有組件，這需要時間。這也爲用戶帶來不太順暢的體驗。

Answer 2

如Google Pagespeed's pages themselves explain所示，在圖像加載之前給定圖像的尺寸時，瀏覽器可以在佈局中爲圖像保留必要的空間。

指定所有圖像的寬度和高度允許通過消除不必要的迴流和重新繪製的需要更快的呈現。

Answer 3

通過指定高度和寬度，它有助於瀏覽器不必計算它。