网站中不同大小的图像取决于屏幕分辨率

Question

我的网站上有一些图片，为此，只有移动互联网连接的移动设备上的页面加载速度很慢。 所以，我的问题是：根据设备分配不同的图像，当页面加载时可能是一个解决方案？

实施例 最初我在dom中的img可能是：

<img src="" id="img1" alt="img1" />

然后，在头部添加一个脚本：

$(document).ready(function () {
               loadImg();
            })

loadImg函数可以是：

if((window.screen.availHeight < 1234)&&(window.screen.availWidth < 1234))
document.getElementById("img1").src = "small";
else
document.getElementById("img1").src = "big";

Answer 1

试试这个js库https://github.com/scottjehl/picturefill

我不知道这会如何影响搜索引擎优化。