CSS的圖片媒體查詢，可以讓我們根據設備屏幕大小來調用不同尺寸的圖片，從而提升頁面加載速度，節約流量。

使用圖片媒體查詢，需要先為不同尺寸的屏幕準備好對應尺寸的圖片。

/* 小屏幕設備，加載尺寸為 480px*320px 的圖片 */
@media screen and (max-width: 480px) {
.img-bg {
background-image: url('bg-480x320.jpg');
}
}
/* 中等屏幕設備，加載尺寸為 960px*640px 的圖片 */
@media screen and (min-width: 481px) and (max-width: 960px) {
.img-bg {
background-image: url('bg-960x640.jpg');
}
}
/* 大屏幕設備，加載尺寸為 1280px*800px 的圖片 */
@media screen and (min-width: 961px) {
.img-bg {
background-image: url('bg-1280x800.jpg');
}
}

如上代碼所示，我們通過@media指定不同屏幕有不同的背景圖片，并設置不同的尺寸屬性（max-width和min-width）來適配不同的屏幕尺寸。

有了圖片媒體查詢，我們可以更好地優化頁面加載速度和用戶體驗，尤其是在移動設備上。