Плотность пикселей, проектировочный и фактический размеры

https://vc.ru/19864-pixels-in-mobile-design

Что значит @2x и @3x

PPI – плотность пикселей

PPI — pixels per inch — количество пикселей, которое умещается в определённом физическом расстоянии, чаще всего в одном дюйме. В экранном дизайне понятия PPI и DPI (dots per inch) — одно и то же.

На первых маках плотность пикселей была равна 72 PPI. Чтобы иконки смотрелись чётко, они должны были ложиться в пиксельную сетку. С тех пор технологии шагнули далеко вперёд и среднее значение PPI в обычных экранах колеблется в районе 160.

Типы размеров

Я использую термины «проектировочный» и «фактический размер».

Проектировочный — тот размер, в котором удобно проектировать в пикселях. Используется при создании артбордов. Например, для пятого Айфона это 320 х 568 px. В этом случае пиксели — универсальная единица измерения, удобная для экранного дизайна.

Фактический размер рендера — размер изображения в пикселях в том масштабе, в котором оно создаётся операционной системой iOS.

Поскольку все современные айфоны используют экраны Ретина, плотность пикселей на них может быть вдвое или втрое выше проектировочной. Плотность пикселей зависит от коэффициента умножения, который пишут через символ эт, например: @2x. У каждой модели айфона свой коэффициент. В этом случае пиксели — квадратики, из которых состоит изображение.

Ретина

В 2010 году вышел iPhone 4, в котором был новейший экран Ретина, позволяющий удвоить плотность пикселей. Растровую графику стали создавать в двух размерах: 1х и 2х, в зависимости от устройства. В разработке для Apple проектировочные пиксели принято называть поинтами (points, pt).

Дипы (dp)

В операционной системе Андроид Гугл ввели свою единицу измерения экранных пикселей, которую назвали «дипы». DP или DIP (density independent pixel) описаны в документации. Дипы — универсальная единица измерения, которую можно конвертировать в пиксели, используя коэффициент масштаба устройства (device scaling ratio). Один дип равен пикселю на экране плотностью 160 PPI.

Density independent pixel (dp) в Android

 

Пример

Если проектировочный размер для пятого Айфона равен 320 х 568, то фактический вдвое больше, поскольку эт-множитель у этой модели равен двум. В результате, получаем 640 х 1136.


Размеры айфонов