像素密集型網頁往往需要使用雪碧圖作為資源，而壓縮素材是一種簡單的方式來優化您的網站加載速度。本文將介紹如何使用CSS將圖片壓扁，從而優化您的網頁性能。

.sprite {
background-image: url(path/to/sprite-image.png);
display: inline-block;
}
.logo {
width: 100px;
height: 50px;
background-position: -50px 0;
}

首先，您需要將所有需要壓縮的圖像合并為一個雪碧圖。接下來，將這個雪碧圖作為CSS背景，然后將每個圖像的坐標移動到左上角。這將創建一個透明的空間，使圖像變扁。

接下來，您需要為每個圖像創建一個CSS類，并將其應用于網頁元素中。然后，使用“background-position”屬性將每個圖像的位置設置為負相對于左上角的值。這將把每個圖像從雪碧圖中截取并顯示出來。

最后，您需要定義每個圖像的大小和位置。將每個元素的寬度和高度設置為雪碧圖中對應圖像的寬度和高度。這將確保每個元素都被正確地定位和縮放。

使用上面提供的CSS代碼，您可以輕松地將圖像壓扁化。這將優化您的網頁性能，提高加載速度。