CSS是網頁設計中非常重要的一環，其可以幫助我們實現豐富多彩的網頁布局效果。然而，在使用CSS時，我們也經常會遇到一些問題，比如加載圖片時會感到卡頓。

導致這種情況的原因是，瀏覽器在加載CSS文件時，會同時加載其中的所有圖片資源。如果圖片的大小過大或者數量過多，就會導致加載時間變長，從而出現卡頓現象。

img {
width: 300px;
height: 200px;
background-image: url("image1.jpg");
}

為了解決這個問題，我們可以采用兩種方式：

1. 將圖片轉成Base64編碼，直接嵌入到CSS文件中。這樣做可以減少HTTP請求的次數，從而加快網頁加載速度。不過需要注意的是，這種方式會增加CSS文件的大小，有可能使其變得臃腫，影響網頁性能。

img {
width: 300px;
height: 200px;
background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgAB...");
}

2. 將圖片壓縮成適當的大小，并使用雪碧圖技術。雪碧圖指的是將多個小圖片拼接在一起，從而減少HTTP請求數量的技術。這種方式可以有效地優化網頁性能。

.icon {
width: 16px;
height: 16px;
background-image: url("sprite.png");
background-position: -32px -16px;
}

無論采用哪種方式，我們都需要注意圖片的大小和數量，從而避免出現卡頓現象。另外，我們還可以使用CSS3中的新特性，比如CSS3漸進增強和CSS3自適應布局，從而進一步優化網頁性能，提高用戶體驗。