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

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

我不知道这如何影响SEO。