在網頁設計中，經常需要使用圖片來增加頁面的視覺效果。然而，有時候圖片的大小可能會影響頁面的加載速度和布局效果。這時，我們可以使用CSS來縮小圖片的顯示大小。 首先，我們需要在HTML中添加一個標簽來引入圖片。例如：

<img src="image.jpg" alt="圖片說明">

接著，在CSS中通過設置圖片的寬度和高度來實現縮小顯示。例如：

img {
width: 50%; /*50%縮小顯示*/
height: auto; /*保持圖片縱橫比*/
}

在這個例子中，我們將圖片的寬度設置為原來的50%，同時將高度設置為自適應，保持圖片的縱橫比。這樣，圖片就被縮小了一半顯示在頁面上。 另外，我們也可以通過設置max-width屬性來限制圖片的最大顯示寬度。這樣可以保證圖片不會超出屏幕寬度導致布局錯亂。例如：

img {
max-width: 100%; /*最大寬度為屏幕寬度*/
height: auto; /*保持圖片縱橫比*/
}

在這個例子中，我們將圖片的最大寬度設置為屏幕寬度，在圖片縮小時保持縱橫比。這樣，無論在不同設備上訪問頁面，圖片都會根據屏幕大小自適應縮放。 總之，在網頁設計中，使用CSS縮小圖片的顯示大小是一種非常實用的技巧。它可以優化網頁加載速度、布局效果，提升用戶體驗。