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）来适配不同的屏幕尺寸。

有了图片媒体查询，我们可以更好地优化页面加载速度和用户体验，尤其是在移动设备上。