Различные размеры изображения в зависимости от области просмотра

Question

В моем полностью адаптивном одностраничном приложении у меня есть галерея изображений, состоящая максимум из 10 изображений.Для мобильных устройств я бы применил меньшие изображения как background-image, чтобы улучшить время загрузки и рендеринга.Это можно сделать с помощью медиа-запросов довольно легко.

Предупреждение: если пользователь изменяет размер окна браузера и находится внутри медиа-запроса, из CDN будет извлечена новая версия изображения.

Это приемлемо или вы знаете лучшее решение?

Answer 1

Идея сама по себе в порядке, но лучше, если вы запретите извлекать изображения меньшего размера, когда пользователи изменяют размер браузера на рабочем столе и полагаются на большие загруженные.Вы можете заставить html отображать, используя точную ширину, с помощью этого кода:

//detect window size and if it is greater than X e.g. 1200 then:
document.querySelector("meta[name=viewport]").setAttribute('content', width=1200);

Answer 2

Похоже на хороший план:)

Вы также можете использовать механизм предварительной выборки для предварительной выборки небольших изображений

<link rel="prefetch" href="small-image.png">