CSS是網頁設計中非常重要的一部分，可以用來控制網頁的布局、字體、顏色等等。其中之一的功能就是壓縮圖片，可以提高網頁加載速度，提高用戶體驗。

CSS中使用背景圖時，圖片的大小會影響頁面的加載速度，而CSS可以通過壓縮圖片來減小圖片的大小，從而加快網頁的加載速度。下面介紹幾種壓縮圖片的方法。

/* 使用 base64 編碼壓縮圖片 */
.logo {
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFUlEQVQYlWNgYGBgYGBkoAAQAAhBs6RAAAAABJRU5ErkJggg==) no-repeat;
}
/* 使用 CSS Sprites 壓縮圖片 */
.sprite {
 background: url(images/sprite.png) no-repeat -50px 0;
 width: 50px;
 height: 50px;
}
/* 使用 image-webpack-loader 壓縮圖片（需要安裝 webpack 和 image-webpack-loader） */
{
 test: /\.(png|jpe?g|gif|svg)$/,
 loader: 'image-webpack-loader',
 options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75
}
 }
}

通過以上幾種方法，可以使圖片的大小減小很多，從而提高網頁的加載速度，同時也可以減少服務器的帶寬消耗。