Bootstrap减少页面重量

Question

我将以下html作为网站的横幅图片：

<section>
    <div class="row">
        <div class="col-md-12 hidden-xs">
            <a href="/home"><img src="/images/header.jpg" alt="" width="1120" height="285" class="img-responsive"></a>
        </div>
        <div class="col-md-12 visible-xs center">
            <a href="/home"><img src="/images/header-xs.jpg" alt="" width="240" height="97"></a>
        </div>
    </div>
</section>

大标题图像为94kb。较小的图像是11kb。

当我使用Firebug或Fiddler查看网络流量时，我发现无论浏览器的大小如何，都会传输这两个图像。

是否可以只在xs上传输小图像，在非xs上只传输大图像并保存数据传输？

Answer 1

您可以使用CSS来加载图像。 （验证网络流量仅在媒体中断时加载）

您需要检查浏览器兼容性。

在Chrome，Safari中正常工作。没试过firefox。无法让它在IE中工作。

http://jsfiddle.net/w8rzp8Lv/

/* xs */
 @media(max-width:767px) {
    section .visible-xs img {
        content: url("http://storyacious.com/wp-content/uploads/2014/02/300x300.gif");
    }
}
/* sm */
 @media(min-width:768px) {
    section .hidden-xs img {
        content: url("http://socialmediaseo.net/wp-content/uploads/2010/05/500px-android-logosvg-300x300.png");
    }
}

由于媒体查询更改，第二张图片在页面加载后10秒内才会加载。

Answer 2

使用JS测量屏幕尺寸后，动态加载图像并非如此。我会用更大的图像;以这种方式动态加载图像会产生反作用，因为它会引入自己的性能问题，并且94kb图像不是那么关心的事情。在采取类似措施之前，您应该采取许多其他步骤来优化网站的性能，因为它们会更有影响力。这些步骤包括

1. 优化图片
2. GZIP所有内容
3. 利用浏览器缓存

此外，您可以使用Googles PageSpeed Insights之类的工具来查看可以改进的区域。

但是，如果必须，您可以使用$( window ).width();来测量视口的宽度，并使用以下代码附加适当的图像。

var img = $("<img />").attr('src', 'http://example/image.jpg')
    .load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#something").append(img);
        }
    });

修改

如果您不介意patchy browser support，可以使用srcset属性加载响应式图片。

/*If viewport is larger than 768px, use header.jpg*/
<img src="header-xs.jpg" srcset="header.jpg 768w" alt="yah">