根据分辨率动态设置图像的最佳方法是什么（减少带宽和加载时间）

Question

我很想知道如何设置和成像为人物浏览器的整个宽度而不使用100％加载巨型图片的旧方法。

使用javascript检查宽度并更改图像src是个好主意。

if(browserWidth<=700) {
    set image src to small.jpg
} else if(browserWidth>=1200 && browserWidth<=1600) {
    set image src to medium.jpg
} else {
    set image src to large.jpg
}

这会减少不必要的带宽使用吗？它会修复奇怪的拉伸吗？

我发现尝试填充1200px图像并将其设置为100％用于所有不同设备（例如上网本和手机）时，我感到很奇怪。

是否有更有效的方法来加载主页图像？如果是这样的话是什么？ （此外，那些图像大小的shrinkers帮助这个）。

bing如何让他们的视频/图片加载速度如此之快？他们使用类似的方法吗？