11. Особенности экспорта под Retina Display

Во время презентации iPhone 4 (2010) Стив Джобс особое внимание уделил его дисплею демонстрируя новую технологию под названием Retina Display.

Итак, что такое Retina дисплей? Это бренд Apple, означающий жидкокристаллические дисплеи с высокой плотностью пикселей.

Физические пиксели

Физические пиксели (device pixel или physical pixel) — привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость

Плотность экрана (Screen density) — это количество физических пикселей дисплея. Обычно измеряется в пикселях-на-дюйм (PPI: pixels per inch). Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.

CSS-пиксели

CSS-пиксели (CSS pixels) — абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана

Растровые пиксели

Растровые пиксели (bitmap pixels) — самые маленькие части, составляющие растровое изображение (PNG, JPF, GIF и т.д.) Каждый пиксель содержит информацию, о цвете и расположении в системе координат изображения. В некоторых форматах пиксель может содержать дополнительную информацию, например, прозрачность

Кроме растрового разрешения, изображения в интернете имеют абстрактные размеры в CSS-пикселях. Браузер сжимает или растягивает изображении в соответствии с его CSS-шириной и -длиной. При отображении на обычном экране один растровый пиксель соответствует одному CSS-пикселю. На Retina-экранах каждый растровый пиксель умножается в 4 раза:

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

Это возможно только при отличном качестве исходных изображений. Итак, для сохранения изображение под ретину мы как обычно выбираем нужный нам слой и через контекстное меню выбираем «экспортировать как»

В левом верхнем углу есть поле Масштабировать.

Ищем «+» справа от слова «суффикс» и кликаем на него

Кликаем столько раз, сколько масштабируемых изображений нам нужно. Обычно это два масштаба (2х и 3x)

Нажимаем «экспортировать все» и на выходе получаем три файла – основной и два с суффиквами @2x/@3x – это изображения, которые будут использоваться для отобрадение на ретина-дисплеях