整頁CSS背景圖片

Question

如果我有一個大圖像作爲background-image用於我的html頁面，如何使整個頁面加載速度更快？擁有大型背景圖像的最佳做法是什麼？

謝謝

Answer 1

最好的做法是有一個小的背景圖像。如果您有重複的背景圖像，請嘗試將其限制爲最小的重複單位; CSS會自動在x和y方向無限重複圖像。 '

如果你有一個不重複的背景圖像，那麼你顯然不能裁剪圖像使其變小。在這種情況下，您可能需要設置background-size:cover和background-repeat:no-repeat，以便整個圖像不會重複地填充整個圖像。這裏的最佳做法可能是使用一些高壓縮文件，如JPEG而不是PNG。

Answer 2

儘可能壓縮圖像。你的瓶頸是通過線路傳輸數據 - 頁面等待CSS完成加載以「準備就緒」，因此需要傳輸的字節越少越好。或者，您可以將您的靜態資產存儲在Akamai這樣的CDN上，這樣可以在距離用戶更近的位置快速提供服務。