如何在使用媒体查询时控制浏览器中不同外形的图像渲染？

Question

使用桌面版时，移动设备的图像也会在浏览器中下载。有什么方法我可以只在移动设备中加载这些图像，而不是在桌面上，因为我有不同的桌面图像。

  

注意：

     

    

我正在构建一个自适应设计，而不是响应。因此很好     只有那些形状因素的相应图像才能得到     下载。

  

示例代码：

    1. For mobile:

    @media only screen and (max-device-width: 480px) {
            div#wrapper {
                background-image: url(media-queries-iphone5.jpg);
                width: 400px;
            }

            div#header {
                background-image: url(media-queries-iphone6.jpg);
                height: 93px;
                position: relative;
            }

            div#header h1 {
                background-image: url(media-queries-iphone6s.jpg);
                font-size: 140%;
            }

            #content {
                 background-image: url(media-queries-iphone5s.jpg);
                float: none;
                width: 100%;
            }

            #navigation {
                background-image: url(media-queries-iphonese.jpg);
                float:none;
                width: auto;
            }
        }

 2. For desktop:
@media only screen and (min-width: 768px) {
        div#wrapper {
                background-image: url(media-queries-samsung.jpg);
                width: 400px;
            }

            div#header {
                background-image: url(media-queries-dell.jpg);
                height: 93px;
                position: relative;
            }

            div#header h1 {
                background-image: url(media-queries-hp.jpg);
                font-size: 140%;
            }

            #content {
                 background-image: url(media-queries-macpro.jpg);
                float: none;
                width: 100%;
            }

            #navigation {
                background-image: url(media-queries-mac.jpg);
                float:none;
                width: auto;
            }
}