CSS Sprite Images и отзывчивый дизайн. Загружает ли он как полный размер, так и отзывчивый размер?

Question

Я занимаюсь оптимизацией изображений и сокращением количества запросов на мой сервер для своего сайта, и поэтому уменьшаю количество изображений, создавая образ CSS Sprites.

Как и следовало ожидать, большая часть изображений меньше для планшетных/мобильных макетов дизайна сайта.

В связи с этим я планирую создать изображение спрайта для размеров мобильных/планшетов значков и изображений, содержащихся в спрайте, и переключить его с помощью запросов @media, поэтому я не загружаю изображения намного больше, чем им на самом деле нужно быть мобильным.

Мой вопрос, вероятно, довольно простой, у меня есть изображение рабочего стола справки за пределами любых запросов @media и версии Mobile/Tablet в запросе @media. Если кто-то обратится к веб-сайту с мобильного телефона, запросит ли он как рабочий стол (не обязательно из-за моего мобильного запроса @media), так и версии для справки для мобильных/планшетов? или он достаточно умен, чтобы запрашивать только версию мобильного/планшета, такую ​​как размер, необходимый для запроса @media?

Заранее спасибо

Answer 1

Да, он загрузит оба изображения. Самый простой способ проверить это - открыть инструменты разработчика и проверить сетевую панель для запросов на изображение, вы должны увидеть, что на мобильном телефоне будет поступать запрос на ресурс рабочего стола, а также на мобильный актив.

Вы можете расширить свои медиа-запросы, чтобы у вас был один таргетинг на рабочем столе, который будет загружать рабочий стол и один мобильный таргетинг, который будет загружать мобильный актив.