網站中不同尺寸的圖像取決於屏幕分辨率

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。