Изображения разного размера на сайте в зависимости от разрешения экрана

У меня есть веб-сайт с некоторыми изображениями, и поэтому загрузка страницы может быть медленной на мобильных устройствах, имеющих только мобильное подключение к Интернету. Итак, мой вопрос: назначать разные изображения, меньше или больше, в зависимости от устройства, когда страница загружается, может быть решением?

Пример. Первоначально мой 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";

javascript image src screen-resolution
person SamDroid    schedule 03.09.2013    source источник
comment
Вам следует взглянуть на CSS 3 Media Queries, например. @media screen and (max-width: 1234px) { … затем маленький bg img ... }   -  person StuartLC    schedule 03.09.2013
comment
@StuartLC: спасибо за ответ, но, используя медиа-запросы (из того, что я знаю), я не могу изменить источник, и с его помощью я могу изменить размер изображения после загрузки, поэтому вес равен весу исходного изображения ..   -  person SamDroid    schedule 03.09.2013

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте эту библиотеку js https://github.com/scottjehl/picturefill

Я не знаю, как это влияет на SEO.

person Leprosy    schedule 03.09.2013