В компании Гугль, точно есть пара талантливых ребят. И героями сегодняшнего дня становятся — технические копирайтеры дизайн документации Material design guidelines.

Размер или плотность

Прежде чем перейдем к историко-технической справке, зафиксируй пожалуйста вашу текущую интерпретацию понятия «разрешения»: что это —  размер в пикселях по высоте и ширине или плотность пикселей на дюйм? Опрос в конце материала.

Спойлер

Под термином «разрешение» / resolution — корректно подразумевать и то и то. Обе трактовки используются как в бытовом языке, так и технических документация / стандартизациях.

Так сложилось. Монитор.

Первые мониторы унаследовали принципы разрешения, те разрешающей способности от телевизионной развертке. Что в конечном счете вылилось в стандартизацию IBM. Некоторые термины оной будут знакомы любому обывателю: 4k, FullHD, VGA, QVGA.

Документация IBM определяет термин Resolution как количество пикселей по высоте и ширине, без каких либо дополнительных параметров о плотности.

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

Этот принцип для графических изображений звучит очень просто — один физический пиксель равен одному графическому. Те вертикальная линия нарисованная в один пиксель по ширине в фотошопе или paintbrush будет выводится на мониторе занимая один физический пиксель. Линия в два пикселя нарисованная на JPG изображение будет выводится на монитор занимая два физических пикселя. 

Артемий Лебедев, также высказался на эту тему — у электронного изображения вообще нет разрешения. Разрешение (точнее, разрешающая способность) может быть только у приспособления ввода/вывода — монитора, принтера, сканера, фотоаппарата.

Рекомендую познакомится со статьями «§ 69. Разрешение картинок», «§ 71. Смерть пиксельной графики» и «§ 70. Разрешение экранов. И немного о происхождении 72 точек на дюйм». Они описывают проблемы того времени, но свою актуальность потеряли только «вчера».

Местами автор путается в использовании термина разрешение матриц и изображений, но в целом определяет resolution как плотность пикселей. Что также имеет место быть, ведь в фотошопе и по сей день разрешение задается в DPI.

Почему так и что за оказия, разбираемся…

Так вышло. Принтер.

Если в «развертке» разворачиваем мы световой луч в электронно лучевой трубке, который по законам физики может проектироваться на бесконечное расстояние, что дает в основании конуса пропорциональное увеличение площади.

То в печати такой фокус не прокатит. Когда нам нужно распечатать изображение, пропускающей способностью печати будет не пиксель, а количество точек на дюйм, которое может выдать устройство печати.

Для листов формата А4 стандартом является 300 DPI (dots per inch), а для баннеров и растяжек на улицах города — всего 10 точек на квадратный сантиметр. Потому как мелкую полиграфию мы рассматриваем вблизи, а крупную издалека. Данные параметры подбираются с учётом того, чтобы глаз не мог распознать отдельную точку с предполагаемого расстояния. 

А ведь печатать можно не только растровые изображения, но и векторные, и делали это ещё за долго до Ваших IBM стандартов. Принтер с DPI уже был в то время когда мейнфреймов занимали по несколько этажей. Был задолго до появления графических интерфейсов, во времена ещё псевдографики.

Потому в типографике термин Resolution обозначает "пропускную способность" печати, те точек на дюйм. 

Термин один, а сферы и техническая реализация совсем разные. А ведь нам визитку надо задизайнить и распечатать, журнал, буклет, флаер и прочий рекламный мусор. Задизайнить на компьютере в пикселях, те на том на чем нет DPI и распечатать на струйнике, где он есть. 

Для этих целей был разработан стандарт EXIF / Exchangeable Image File Format, расширяющий информацию файлов. 

Photoshop, retina, printscreen, Palm

Здесь путаница приобретя катастрофически массовый характер из за творческих гуманитариев, дизайнерского склада ума, которые про IBM знают только то, что это не iMac. Зато есть Фотошоп в котором Русским языком латинскими буквами: Size — размер в пикселях по ширине и высоте, а resolution — плотность пикселей при печати. 

И это было справедливо тк интернета ещё не было, а цифровые интерфейсы существовали только в виде программ для ОС. А это не рекламный материал, и дизайнеры в то время днями и ночами готовили полиграфию. С чего Тёмыч и начинал, да и я тоже. 

Технически Фотошоп хранил все нужные данные в файле изображения: и размер и плотность, вот только до определенного времени потребности в их объединении не было. А когда настала случился локальный графический апокалипсис.

2009 — Vaio P

Легче, компактнее, мобильнее — диктует рабочий ритм столички. Такие устройства как Sony VaIO P с разрешением 1600×768 для 8" с соотношением сторон 21х9 и все множущаяся вариативность в размерах и дюймах экранов андроид устройств, создавали проблему "слишком мелкого интерфейса. К которым операционные системы и наростающий мобильный web готовы не были.

iPhone 4. Apple прибегла к двукратному увеличению физических пикселей не меняя пропорций интерфейса, как это делали Palm OS, Symbian и Windows mobile. У Windows phone 7 был только один стандарт матриц 480x800.

2012—2022 / Retina, kitkat 

 Индустрию встряхнул MacBook Retina. Из техногиковского баловства и заигрывания с мобилизацией рабочих процессов, мы получили реальную проблему. Не только не адаптированный под ретина Фотошоп, но и в одночасье весь web. Что только подтвердилось выходом iPad 4 и Mini с Retina.

Вместу с выходом KitKat, Google предоставляет разработчикам документацию с рекомендациями к подготовку изображений для разных экранов. Логика масштабирования интерфейса привязана к плотности пикселей в 160 PPI (pixels per inch) 

Relative sizes for bitmaps at different density sizes | link

Density

Параметр, который ранее был актуален только для печати, стал востребованным в цифре, как со стороны характеристики матриц, так и параметров растровых файлов. Где и пригодился стандарт EFI, записывающий resolution как плотность в метаданные файла.

Заслуги  Google в том, что с выходом Material design Guidelines мир получил новую, внятную документацию. Вопрос с терминологией решили радикально

• Size — размер изображения в пикселях по высоте и ширине

• Density — плотность пикселей на дюйм

Вместо PPI теперь кратность — x1, x2, x3 и тд Что впоследствии перекочевало в Figma для экспорта растровых изображений. А как на счёт импорта?

2022 — Аллилуйя 

В 2020 Fifma выпустила обновление с расширенной поддержкой exit для новых версий браузеров, которые до середины 2020 не умели корректно с этим работать. Что позволило масштабировать файлы при открытии в соответствии с их метаданными.  Photoshop научился это делать в 2022. 

В операционной системе BigSur на Retina устройствах есть возможность разного масштабирования интерфейса ОС, те рендеринга. Только одно из них будет по настоящему кратным физическим пикселей матрицы. Остальные рендерятся с меньшим или даже избыточным количеством графических пикселей. При этом в каждый скриншот записывается параметр resolution X и Y равный 144.

Что не совсем корректно, ведь матрица одна, а количество выводимых графических пикселей на дюйм разное. И это приводит к проблеме с дизайн-макетами в некоторых случаях.

Кейсы

Слчаи в моей практике были связаны всегда со скриншотами, ресайзингом изображений и последующим экспортом из фигмы. Например клиент просит нового подрядчика доработать сайт или создать пару страниц используя блоки текущего. Исходников нет, либо не было, либо были в фотошопе, либо искать дольше чем делать, а срок вчера. Дизайнер делает принтскин со своей ретинки, на которой даже дефолтное разрешение не кратно физическому и подгоняет размеры кеглей не глядя в css. А далее плачет менеджер, который не может понять как то, что выглядит на preview хорошо и 100 раз всеми согласовано не подходит по размерам верстальщикам: и кегли не те, и паддинги едут, и безопасные/кликабельне области иконок такие не форматные.

Конечн., скиловый дизайнер и стили посмотрит, а грамотный верстальщик к макету отнесется как к образцу и заверстает в имеющихся CSS'ках. Но человеческий фактор никто не отменял — и нет, нет, да пролезет баг, особенно если работать с файлами с потертыми метаданными.