最近我們發現谷歌瀏覽器對圖片設置有一定的修改，它主要在圖像上進行設置width和設置height屬性，以防止佈局發生變化並改善網站訪問者的體驗。
Web性能倡導者經常建議開發者為圖像添加尺寸，以實現最佳性能，以便在下載圖像本身之前，以適當的圖像空間佈置頁面，這樣可以避免下載圖像時發生版式移位。
為什麼說給圖片設置寬度和高度是一個很好的建議呢？
一下圖是簡單例子：
h1>Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
以上例子分兩個階段進行渲染，首先是在下載HTML，然後再下載圖像。使用上面的代碼，這將導致主要內容在下載圖像後發生加載版式移位。
圖片未加載不留位置
佈局的變化對用戶造成很大的干擾，尤其是如果你已經開始閱讀文章，突然被一連串的動盪甩開了，然後你必須再次找到自己的位置。當每個圖像都通過Internet到達時，這還會在瀏覽器上進行額外的工作以重新計算頁面佈局。在包含大量圖像的複雜頁面上，這可能會在設備上要處理很多更好的事情時給設備帶來可觀的負擔！
避免這種情況的傳統方法是在標記中提供width和height屬性，因此即使瀏覽器只有HTML，它仍然能夠分配適當的空間。所以我們可以修改成以下內容：
Your title
Introductory paragraph.
Lorem ipsum dolor sit amet, consectetur…
然後進行渲染，如下所示，在到達圖像時為圖像留出適當的空間，並且下載圖像時文本不會發生劇烈的偏移：
預留空間給圖像
頁面內容不斷跳動對用戶造成煩人的影響，更是對服務器的CPU影響相當大，所以在頁面需要加載圖片時，可以考慮添加高寬度。
閱讀更多 SOWORD科技言 的文章
