Разрешение экрана

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

Отсюда два разных числа. Физическое разрешение — сколько точек у матрицы. Логическое — сколько CSS-пикселей получает страница. Их отношение называется коэффициентом пикселей, в JavaScript его возвращает window.devicePixelRatio. Экран шириной 1170 физических пикселей при коэффициенте 3 сообщает вёрстке ширину 390 CSS-пикселей.

Почему это важно для сайта

• Макеты верстают под логическую ширину: 360–430 пикселей для телефонов, 1280–1920 для настольных экранов.
• Картинке шириной 400 CSS-пикселей на экране с коэффициентом 2 нужен файл шириной около 800 пикселей, иначе она будет мыльной.
• Отдавать всем самый большой файл тоже плохо: телефон скачает лишние мегабайты, и страница загрузится медленнее.

Пример: картинка под разные экраны

Атрибуты srcset и sizes позволяют браузеру самому выбрать подходящий файл с учётом ширины окна и плотности пикселей:

<img src="facade-800.jpg"
     srcset="facade-800.jpg 800w, facade-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Фасад офиса">

WordPress при загрузке изображения создаёт несколько уменьшенных копий и в современных версиях сам подставляет srcset в контент записей.

Типичные ошибки

Проверять вёрстку только на собственном мониторе. Задавать размеры блоков в физических пикселях конкретного устройства. Загружать фото с камеры в исходном разрешении 4000 пикселей и уменьшать его стилями. Путать разрешение экрана с DPI в настройках печати: для веба значение «72 dpi» в свойствах файла ничего не меняет. Перестраивать раскладку под ширину окна помогают медиазапросы.