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

Question

I have a website with some images, and for this the page loading can be slow on mobile devices that have only mobile internet connection. So, my question is: assign different images, smaller or bigger depending on device, when page is loaded could be a solution?

Example Initially my img in the dom could be:

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

And then, adding a script in head:

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

The loadImg function can be like:

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

Answer 1

Try this js library https://github.com/scottjehl/picturefill

I don't know how this affects the SEO, though.