CSS 是網(wǎng)頁(yè)樣式設(shè)計(jì)的重要組成部分，可以通過(guò)它來(lái)解決圖片太大的問(wèn)題。下面將介紹幾種方法。

方法一：縮小圖片大小

img {
max-width: 100%;
height: auto;
}

通過(guò)設(shè)置圖片寬度的最大值為100%，高度自動(dòng)適應(yīng)，可以縮小圖片大小，減少頁(yè)面加載時(shí)間。

方法二：懶加載圖片

img {
display: none;
}
img.lazy {
display: block;
}

通過(guò)設(shè)置圖片樣式 display:none，然后再為圖片添加一個(gè)帶有懶加載類(lèi)名的特殊類(lèi)樣式，在圖片出現(xiàn)在瀏覽器可視范圍內(nèi)時(shí)再顯示圖片，可以減少頁(yè)面加載時(shí)間。

方法三：使用 sprite 技術(shù)

.sprite {
background-image: url("sprite.png");
background-repeat: no-repeat;
}

通過(guò)將多張圖片合并為一張 sprite 圖片，然后通過(guò) css 中的 background-position 屬性，展示需要的部分圖片，可以減少圖片請(qǐng)求次數(shù)，提高頁(yè)面性能。