CSS是前端開發中的重要組成部分，它可以幫助我們控制元素的樣式和行為，其中一個很重要的特性就是控制不同圖片的加載。

在開發過程中，我們通常需要根據不同的情況來加載不同的圖片，比如根據瀏覽器的不同來加載不同大小的圖片，或者根據設備類型來加載不同分辨率的圖片。CSS提供了多種選擇器和屬性可以幫助我們實現這個目的。

/* 根據設備像素比來加載不同分辨率的圖片 */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
.logo {
background-image: url("logo@2x.png");
}
}
/* 根據瀏覽器寬度來加載不同大小的圖片 */
@media only screen and (max-width: 480px) {
.banner {
background-image: url("banner-sm.jpg");
}
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
.banner {
background-image: url("banner-md.jpg");
}
}
@media only screen and (min-width: 769px) {
.banner {
background-image: url("banner-lg.jpg");
}
}

在上面的代碼中，我們使用了@media查詢來根據設備像素比和瀏覽器寬度來加載不同的圖片。其中，@media查詢是CSS中的重要特性，它可以根據不同的條件來控制CSS規則的應用。

在第一個例子中，我們使用了-webkit-min-device-pixel-ratio、-moz-min-device-pixel-ratio、min-resolution等屬性來判斷設備的像素比是否滿足條件，從而加載不同分辨率的圖片。在第二個例子中，我們根據瀏覽器寬度來加載不同大小的圖片。

總結一下，CSS可以幫助我們控制不同圖片的加載，從而優化網站性能和用戶體驗。通過使用選擇器、@media查詢等屬性，我們可以實現根據不同條件加載不同的圖片。