CSS和PNG圖標是現代網站設計中最重要的元素之一。CSS可以用于布局和樣式設計，而PNG圖標是用于顯示各種圖形元素，如菜單圖標，社交媒體圖標等等。

.icon {
background-image: url('icon.png');
width: 32px;
height: 32px;
}
.menu {
background-image: url('menu.png');
width: 20px;
height: 20px;
}
.social-icon {
background-image: url('social-icon.png');
width: 40px;
height: 40px;
}

為了使網站頁面更加優化，我們可以通過縮小PNG圖標的方式來減少網站的加載時間。PNG圖標可以使用Photoshop或任何其他圖像編輯軟件進行縮放。我們只需要確保在縮小PNG圖標時要選擇“保留透明度”選項，這樣可以避免圖標的周圍有白色顏色的邊框，同時還可以保留圖標的透明度和質量。

最后，我們可以使用CSS來將所有的圖標統一縮小。這樣做，可以使網站頁面的設計更加一致，而且也能減少圖標文件的大小，從而加快頁面的加載速度。

.icon, .menu, .social-icon {
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
margin-right: 10px;
transform: scale(0.8);
}

以上CSS代碼可以將所有的圖標縮小到原來的80%大小，并將它們作為塊級元素顯示在一起，以確保它們之間的間距保持一致。同時，我們還可以使用“background-size：contain”屬性，將圖標縮小到適應其包含元素的大小。