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

Кэти Хемпениус
Katie Hempenius
X

Изучите эту демонстрацию

  • Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим полноэкранный .
  • Перезагрузите страницу с помощью разных устройств, чтобы увидеть, как браузер загружает разные изображения.

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

1x плотность Blackberry Playbook, множество внешних мониторов
2x плотность iPad или iPhone 5/6
3-кратная плотность Галактика S5 или iPhone X
  • Проверьте index.html , чтобы найти код, который заставляет это работать.

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

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

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

Начнем с самого начала, определив, что такое пиксель. Звучит просто, но слово «пиксель» на самом деле может иметь много значений:

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

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

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

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

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

окно.devicePixelRatio

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

devicePixelRatio определяет взаимосвязь между пикселями устройства и пикселями CSS для конкретного устройства. Устройство с разрешением 192 пикселей на дюйм имеет devicePixelRatio , равное 2 (192 пикселей на дюйм/96 пикселей на дюйм = 2), поскольку «2 пикселя его дисплея имеют размер 1 пикселя 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» могут использоваться для предоставления разных изображений разным устройствамPixelRatio.

  • Взгляните на файл 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 используется только с дескрипторами ширины.