在網頁設計中，圖片是不可或缺的元素。使用CSS可以對圖片進行美化和布局，使其更加吸引人的注意力。下面我們來介紹一下如何使用CSS來對圖片進行優化。

/* 圖片居中顯示 */
img {
display: block;
margin: 0 auto;
}
/*設置圖片大小*/
img {
width: 100%;
height: auto;
}
/* 設置邊框 */
img {
border: 1px solid #ccc;
}
/* 圓角圖片效果 */
img {
border-radius: 50%;
}
/* 陰影效果 */
img {
box-shadow: 0 0 10px rgba(0,0,0,.5);
}
/* 淡入淡出效果 */
img {
transition: opacity .5s ease-in-out;
}
img:hover {
opacity: .7;
}
/* 網格布局 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.container img {
width: 100%;
}
/* 圖片懸浮效果 */
img {
transition: transform .5s ease-in-out;
}
img:hover {
transform: translateY(-5px);
}

以上是常見的圖片優化效果，我們可以根據需求在實際項目中進行具體應用。使用CSS對圖片進行優化可以增加網頁的美觀度和用戶體驗度，從而提升網站的質量和知名度。