Многие сайты запрашивают ресурсоемкие данные, такие как изображения, которые не оптимизированы для определенных экранов, и отправляют большие CSS-файлы, содержащие стили, которые некоторые устройства никогда не будут использовать. Использование медиа-запросов — популярный метод доставки персонализированных таблиц стилей и ресурсов для разных экранов, позволяющий уменьшить объем данных, передаваемых пользователям, и улучшить скорость загрузки страницы. В этом руководстве показано, как использовать медиа-запросы для отправки изображений, размер которых соответствует необходимым параметрам — метод, широко известный как адаптивные изображения .
Предварительные требования
В этом руководстве предполагается, что вы знакомы с инструментами разработчика Chrome . При желании вы можете использовать инструменты разработчика другого браузера. Вам просто нужно будет сопоставить скриншоты инструментов разработчика Chrome, приведенные в этом руководстве, с соответствующими функциями в выбранном вами браузере.
Разберитесь в адаптивных фоновых изображениях.
Для начала проанализируем сетевой трафик неоптимизированной демоверсии:
- Откройте неоптимизированную демо-версию в новой вкладке Chrome.
- Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть инструменты разработчика.
- Перейдите на вкладку «Сеть» .
- Перезагрузите страницу.
Вы увидите, что запрашивается только изображение background-desktop.jpg , размер которого составляет 1006 КБ :
Измените размер окна браузера и обратите внимание, что в журнале сетевых запросов страница не отображает новых запросов. Это означает, что для всех размеров экрана используется одно и то же фоновое изображение.
Стили, управляющие фоновым изображением, можно увидеть в файле style.css :
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
Вот значение каждого из используемых свойств:
-
background-position: center center: Центрирует изображение по вертикали и горизонтали. -
background-repeat: no-repeat: Отображать изображение только один раз. -
background-attachment: fixed: Предотвращает прокрутку фонового изображения. -
background-size: cover: Изменяет размер изображения так, чтобы оно покрывало весь контейнер. -
background-image: url(images/background-desktop.jpg): URL изображения.
В совокупности эти стили указывают браузеру на необходимость адаптации фонового изображения к различным высотам и ширинам экрана. Это первый шаг к созданию адаптивного фона.
Использование одного фонового изображения для всех размеров экрана имеет некоторые ограничения:
- Отправляется одинаковое количество байтов независимо от размера экрана, даже если для некоторых устройств, таких как телефоны, меньшее и более лёгкое фоновое изображение будет выглядеть так же хорошо. В целом, для повышения производительности и экономии пользовательского трафика рекомендуется отправлять максимально маленькое изображение, которое при этом хорошо выглядит на экране пользователя.
- На устройствах меньшего размера изображение будет растянуто или обрезано, чтобы покрыть весь экран, потенциально скрывая от пользователей важные части фона.
В следующем разделе вы узнаете, как применить оптимизацию для загрузки различных фоновых изображений в зависимости от устройства пользователя.
Используйте медиа-запросы
Использование медиа-запросов — распространённый метод объявления таблиц стилей, которые будут применяться только к определённым типам носителей или устройств. Они реализуются с помощью правил `@media` , которые позволяют определить набор контрольных точек, где задаются определённые стили. Когда выполняются условия, заданные правилом @media (например, определённая ширина экрана), применяется группа стилей, определённая внутри контрольной точки.
Следующие шаги можно использовать для применения медиа-запросов к сайту , чтобы использовать разные изображения в зависимости от максимальной ширины устройства, запрашивающего страницу.
- В
style.cssудалите строку, содержащую URL фонового изображения:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
- Далее создайте контрольную точку для каждой ширины экрана, основываясь на стандартных размерах в пикселях, которые обычно имеют экраны мобильных телефонов, планшетов и настольных компьютеров:
Для мобильных устройств:
@media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
Для планшетов:
@media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/background-tablet.jpg);
}
}
Для настольных устройств:
@media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}
Откройте оптимизированную версию файла style.css в браузере, чтобы увидеть внесенные изменения.
Измерения для различных устройств
Далее визуализируйте полученный сайт на экранах разных размеров и на смоделированных мобильных устройствах:
- Откройте оптимизированный сайт в новой вкладке Chrome.
- Уменьшите ширину области просмотра (до
480px). - Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть инструменты разработчика.
- Перейдите на вкладку «Сеть» .
- Перезагрузите страницу. Обратите внимание, что было запрошено изображение
background-mobile.jpg. - Увеличьте ширину области просмотра. Обратите внимание, что при ширине более
480pxбудет запрашиватьсяbackground-tablet.jpg. При ширине более1025pxбудет запрашиватьсяbackground-desktop.jpg.
При изменении ширины экрана браузера запрашиваются новые изображения.
В частности, если ширина меньше значения, заданного в контрольной точке для мобильных устройств (480 пикселей), вы увидите следующий сетевой лог:
Размер нового мобильного фона на 67% меньше , чем у фона для настольных компьютеров.
Влияние на крупнейшую по содержанию краску (LCP)
Элементы с фоновыми изображениями CSS считаются кандидатами на отображение самого большого количества контента (Largest Contentful Paint, LCP) , однако фоновые изображения CSS не обнаруживаются сканером предварительной загрузки браузера , а это значит, что вы можете задерживать отображение LCP вашего сайта, если не будете осторожны.
Первый вариант, который следует рассмотреть, — это возможность использования вашего изображения-кандидата LCP в элементе <img> с атрибутами srcset и sizes для обеспечения адаптивности. Сканер предварительной загрузки браузера обнаружит элементы <img> и будет отправлять запросы к ним, пока парсер заблокирован на рендеринге.
Если вы не можете (или не хотите) обойтись без фонового изображения CSS, второй вариант — предварительная загрузка адаптивных изображений , чтобы гарантировать загрузку правильного изображения для соответствующего размера области просмотра. Атрибуты media , imagesrcset и imagesizes элементов <link> указывают браузеру, что данная подсказка ресурса применяется только при определенных условиях области просмотра, избегая многократной ненужной предварительной загрузки, когда вам нужно загрузить только один ресурс, подходящий для текущей области просмотра.
Краткое содержание
В этом руководстве вы научились применять медиа-запросы для запроса фоновых изображений, адаптированных под определенные размеры экрана, и экономить байты при доступе к сайту на небольших устройствах, таких как мобильные телефоны. Вы использовали правило @media для реализации адаптивного фона. Этот метод широко поддерживается всеми браузерами. Новая функция CSS: `image-set()` , может использоваться для той же цели с меньшим количеством строк кода. На момент написания этой статьи эта функция поддерживается не всеми браузерами, но вы можете следить за ее развитием, поскольку она может представлять собой интересную альтернативу этому методу.