Используйте дескрипторы плотности

Katie Hempenius
Katie Hempenius
X

Посмотреть демоверсию

  • Чтобы посмотреть сайт, нажмите View App (Посмотреть приложение), а затем – Fullscreen (Полноэкранный режим) полноэкранный режим.
  • Перезагрузите страницу на разных устройствах, чтобы увидеть, как браузер загружает разные изображения.

Для этого можно использовать эмулятор устройств. Если вы ищете конкретную плотность экрана, вот несколько устройств, которые можно попробовать:

Плотность 1x Blackberry Playbook, многие внешние мониторы
Двойная плотность iPad или iPhone 5/6
Плотность 3x Galaxy S5 или iPhone X
  • Код, который позволяет это сделать, можно найти в файле index.html.

Как это работает?

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

Что такое пиксели

Начнем с самого начала и определим, что такое пиксель. Это кажется простым, но на самом деле у слова "пиксель" может быть много значений:

Пиксель устройства (физический пиксель)
Наименьшая точка цвета, которая может быть отображена на устройстве.
Логический пиксель
Информация, которая определяет цвет в определенном месте сетки. У пикселей этого типа нет физического размера.
CSS-пиксель
В спецификации CSS пиксель определяется как единица физического измерения. 1 пиксель = 1/96 дюйма.

Плотность пикселей

Плотность пикселей (также называемая плотностью экрана или плотностью дисплея) – это количество пикселей на определенной физической площади. Обычно она измеряется в пикселях на дюйм (пкс/дюйм).

В течение многих лет плотность 96 пкс/дюйм была очень распространена (поэтому в CSS пиксель определяется как 1/96 дюйма). Начиная с 1980-х годов, это было разрешение по умолчанию для Windows. Кроме того, это было разрешение ЭЛТ-мониторов.

Ситуация начала меняться в 2000-х годах, когда стали популярны светодиодные мониторы. В частности, Apple произвела фурор в 2010 году, когда представила дисплеи Retina. Минимальное разрешение таких экранов составляло 192 пкс/дюйм, что в два раза больше, чем у обычных экранов (192 пкс/дюйм / 96 пкс/дюйм = 2).

window.devicePixelRatio

С появлением новых технологий отображения "пиксели устройства" стали различаться по физическому размеру и форме и перестали совпадать по размеру с "пикселями CSS". Необходимость определить соотношение между размером пикселей устройства и пикселей CSS привела к появлению devicePixelRatio (иногда называемого соотношением пикселей CSS).

devicePixelRatio определяет соотношение между пикселями устройства и пикселями CSS для конкретного устройства. Устройство с плотностью 192 пкс/дюйм имеет devicePixelRatio, равное 2 (192 пкс/дюйм / 96 пкс/дюйм = 2), поскольку два пикселя его экрана равны по размеру одному пикселю CSS.

В настоящее время у большинства устройств соотношение логических и физических пикселей составляет от 1,0 до 4,0.

  • Чтобы определить плотность пикселей устройства, введите в консоли window.devicePixelRatio.

  • В этой таблице приведены соотношения пикселей для распространенных устройств. В большинстве случаев он составляет от 1,0 до 4,0.

Как же применить эту информацию?

Задавайте размеры изображений с учетом соотношения логических и физических пикселей устройства

Чтобы изображения выглядели наилучшим образом на экранах с высоким разрешением, необходимо предоставить разные версии изображений для разных devicePixelRatios.

Соотношение логических и физических пикселей устройства Означает следующее: На этом устройстве тег <img> с шириной CSS 250 пикселей будет выглядеть лучше всего, если исходное изображение имеет...
1 1 пиксель устройства = 1 пиксель CSS Ширина: 250 пикселей.
2 2 физических пикселя = 1 пиксель CSS 500 пикселей в ширину;
3 3 пикселя устройства = 1 пиксель CSS 750 пикселей в ширину;

Важно!

  • Размеры в пикселях, указанные в графических редакторах, каталогах файлов и других местах, измеряются в логических пикселях.
  • Для экранов с более высоким разрешением и больших дисплеев потребуются изображения большего размера. Простое увеличение изображений меньшего размера сводит на нет преимущества использования нескольких версий. Браузер сделал бы это в любом случае, если бы не было предоставлено изображение с высоким разрешением.

Используйте дескрипторы плотности, чтобы показывать несколько изображений

Дескрипторы плотности в сочетании с атрибутом srcset позволяют показывать разные изображения в зависимости от значения devicePixelRatio.

  • Откройте файл index.html и найдите элемент <img>.
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

Вот как это выглядит на практике:

  • 1x, 2x и 3x – это дескрипторы плотности, которые сообщают браузеру, для какой плотности пикселей предназначено изображение. Это позволяет браузеру не скачивать изображение, чтобы определить эту информацию.
  • Браузер может выбрать одно из трех изображений: flower-1x.jpg (для браузеров с плотностью пикселей 1.0), flower-2x.jpg (для браузеров с плотностью пикселей 2.0) и flower-3x.jpg (для браузеров с плотностью пикселей 3.0).
  • flower.jpg – резервное изображение для браузеров, которые не поддерживают srcset.

Как использовать:

  • Используйте devicePixelRatio и единицу измерения x, чтобы задать дескрипторы плотности. Например, дескриптор плотности для многих экранов Retina (window.devicePixelRatio = 2) будет записан как 2x.
  • Если дескриптор плотности не указан, по умолчанию используется значение 1x.
  • Включать дескрипторы плотности в названия файлов – распространенная практика, которая помогает упорядочивать файлы, но это не обязательно. Название файла может быть любым.
  • Добавлять атрибут sizes не нужно. Атрибут sizes используется только с дескрипторами ширины.