Что такое «Разрешение»?
Термин «Resolution» фигурирует в трех популярных стандартах: IBM, EXIF, Google MD. В каждом из них «разрешение» трактуется по своему и обозначает совсем разные характеристики. Разбираемся с понятиями в работе c дизайн макетами.
IBM стандарт
Самую растиражированную трактовку термина, дарят нам стандарты IBM. Из них в обиходе понятия: VGA, FullHD, 4K и т.д.
Так в 1986 компания выпускает новый стандарт VGA / Video Graphic Array в котором, термин «Resolution» описывает размеры в пикселях по высоте и ширине. Данная парадигма сохраняется и по сей день.
Например FullHD — это всегда 1920×1080, и не важно разрешение это для 6» дюймового смартфона или 27» монитора. О плотности пикселей речь не идет, она никак не фигурирует в документации.
EXIF стандарт
Спецификация «Exchangeable Image File Format» от 1995 — описывает дополнение данных для графических, видео и аудио файлов — метаданные. Используется большинством производителей техники от смартфонов до сканеров. Поддерживается всеми популярными операционными системами и браузерами.
В документации года термин «Resolution» определяет количество пикселей на дюйм — PPI/pixels per inch (или сантиметр). Стандарт для расчета PPI — 72 px.
Имеем
В итоге два ведущих стандарта описывают разные характеристики одним термином «Resolution». В IBM — это количество точек по высоте и ширине, в EXIF — количество пикселей на дюйм.
Проблема не была критичной, пока оставалась в рамках узкой специализации печатной продукции. Но с массовым распространением мобильных устройств с высокой плотностью пикселей на дюйм, она приобрела массовый характер. Проблемы которые появились:
адаптация сайтов под retina;
адаптация high-res изображений под мобильный трафик;
инструментарий и удобство подготовки high-res изображений;
тестирование прототипов (до середины октября 2020 браузеры не полностью поддерживали EXIF).
Retina и Material Design
Если стандарт EXIF был буфером между цифровым изображением и печатным. То с появлением Retina iPhone, iPad и MacBook потребовался буфер между «стандартным» «разрешением» и «высоким». Таким буфером стал — логический пиксель. Такая хитрость позволила переводить изображение, которое рендерит операционная система или браузер, на физическое количество пикселей. При этом используя масштабирование — апскейлинг, как на примере изображения с iPhone«ами, так и даунскейлинг, как например на MacBook«ах.
Компания Google оказалась в более затруднительных обстоятельствах из за количества вендоров своей ОС. И вместе с Material Design компания предложила новую терминологию и стандартизацию под Android.
DP (pronounced «dips») — density-independent pixel — пиксель не привязанный к плотности. Стандарт расчета DIP для Android устройств — 160 (ведь Material Design — дизайн система не только для Андроид).
Size — та же трактовка, что и разрешение у IBM — количество пикселей по высоте и ширине.
Density — та же трактовка, что и разрешение у EXIF — плотность пикселей на дюйм.
Pixel Ratio — кратность 0,75x, 1x, 2x, 3x. Что очень удобно перекочует в Figma для экспорта файлов.
В первом варианте Material Design фигурировало понятие resolution для классификации обобщенных характеристик экранов. Но потом об упоминании данного термина отказались чтобы не путать дизайнеров.
Инструментарий
Одно дело, отрисовывать изображение в двукратном размере, чтобы оно хорошо смотрелось на iPhone«чике. Другое — постоянно с этим работать.
Как было раньше/всегда — открываешь Photoshop, создаешь изображение размером 100×100 px, если меняешь параметр Resolution с 72 на 144 dpi, размер пересчитывается на в два раза больший, те 200×200 px. Если ставишь 300 pdi, размер пересчитается в 417×417 px. Сохраняешь. Если потом открыть сохраненный файл, то он откроется как файл с размером 417×417 px.
В 2022 году Photoshop и Figma научились масштабировать изображение в зависимости от прописанной плотности согласно метаданным, EXIF стандарту. Пока Figma корректно масштабируется файлы только с 72 и 144 ppi. Если забросить в фигма файл 200×200 px с 144 dpi, то она его отобразит как файл с размером 100×100 px. Photoshop же справится с любым изображением.
И это много удобнее, чем открывать на ретине файл предназначенный для ретина, без учета ресайзинга. Так же дела обстаят и с PrintScreen«ами. Big Sur сохраняет рендеренное изображение с размерами Feels like, но с 144 ppi. Что значит, логических пикселей в 2 раза меньше чем, физических. Если закинуть такой скриншот в figma, он также откроется в размере Feelslike.
А вот с экспортом из Figma все наоборот. Если отрисовать интерфейс для iPhone и поместить туда изображение, то в рабочей области он будет качетвеннм, но если экспортировать его в x1, и обратно закинуть в Figma, то откроется он в тех же пропорциях, но будет пиксельным. Т.к. x1 — это парамет 72 px в стандарте EXIF. который запишется в файл при экспорте.
Говорим правильно
У монитора — размер в дюймах, разрешение в количестве точек по высоте и ширине (например 4k), плотность в пикселях на дюйм.
У изображения — размер — количество пикселей по высоте и ширине, плотность в плотность в dp (density-independent pixel) или resolutionunit.
