Термин “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 — 72px.
Имеем
В итоге два ведущих стандарта описывают разные характеристики одним термином “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 x 100 px, если меняешь параметр Resolution с 72 на 144 dpi, размер пересчитывается на в два раза больший, те 200 x 200 px. Если ставишь 300 pdi, размер пересчитается в 417 x 417 px. Сохраняешь. Если потом открыть сохраненный файл, то он откроется как файл с размером 417 x 417 px.
В 2022 году Photoshop и Figma научились масштабировать изображение в зависимости от прописанной плотности согласно метаданным, EXIF стандарту. Пока Figma корректно масштабируется файлы только с 72 и 144 ppi. Если забросить в фигма файл 200 x 200 px с 144 dpi, то она его отобразит как файл с размером 100 x 100 px. Photoshop же справится с любым изображением.
И это много удобнее, чем открывать на ретине файл предназначенный для ретина, без учета ресайзинга. Так же дела обстаят и с PrintScreen’ами. Big Sur сохраняет рендеренное изображение с размерами Feels like, но с 144 ppi. Что значит, логических пикселей в 2 раза меньше чем, физических. Если закинуть такой скриншот в figma, он также откроется в размере Feelslike.
А вот с экспортом из Figma все наоборот. Если отрисовать интерфейс для iPhone и поместить туда изображение, то в рабочей области он будет качетвеннм, но если экспортировать его в x1, и обратно закинуть в Figma, то откроется он в тех же пропорциях, но будет пиксельным. Т.к. x1 — это парамет 72px в стандарте EXIF. который запишется в файл при экспорте.
Говорим правильно
У монитора — размер в дюймах, разрешение в количестве точек по высоте и ширине (например 4k), плотность в пикселях на дюйм.
У изображения — размер — количество пикселей по высоте и ширине, плотность в плотность в dp (density-independent pixel) или resolutionunit.
Комментарии (27)
apcehypo
25.10.2022 14:17+1Путаницы не возникает, если всегда уточнять разрешение чего. Разрешение экрана/монитора. Разрешение картинки. Как-то всегда так и говорил.
AndrewYaremko Автор
25.10.2022 16:39А я в девичестве дизайнер, поэтому привык, что resolution — это параметр из фотошопа, который обозначает плотность. Но путаница есть, по тому же запросу в гугле — высокое разрешение экрана вам выдадут картинки (я картинки чаще гуглю) рассказывающие и о размере и о плотности
andreishe
25.10.2022 17:53+2Разрешение, очевидно, это способность объектива передавать мелкие детали.
php7
25.10.2022 20:08Интересно, почему на 2х-экранах 1х-рисунки выводятся, как дерьмо?
Чет кажется, что даже если 1 пиксель расширять до 4, то должно выйти норм изображение
mSnus
25.10.2022 20:32Потому что шрифты рядом четкие и это сильно бросается в глаза. Плюс там простейший bilinear upscaling скорее всего, для скорости
AndrewYaremko Автор
25.10.2022 20:50-1Не всегда Upscale. на макбуках можно выставить высокое «разрешение» прости господи, чтобы они под этим не подразумевали, и отрендеренное изображение будет dawnscale'ится до физических параметров. Сам опешил когда узнал куда уходят ресурсы железа.
php7
25.10.2022 21:33Оказывается, есть css-свойство image-rendering
Лучше не стало
Можно сделать хуже - указать ему pixelated
AndrewYaremko Автор
25.10.2022 20:45А потому что кратность не всегда x2, а точнее уже мало когда. см таблицу с iPhone.
mSnus
Ещё раз: у IBM речь идёт о разрешении устройства вывода, экрана, физического носителя. То, сколько точек он позволяет вывести. Его разрешение - это количество точек по горизонтали и вертикали, поэтому 1920х1080 это FullHD, будь это экран смартфона или экран телестены с пикселями по 10х10 см и таким же интервалом между ними.
А размеры файла в точках и так намертво заданы в JPEG. Поэтому разрешение в EXIF - это просто предполагаемая плотность точек при выводе этого файла (на печать или ещё куда). Это декларация, сопроводительный комментарий: "данный файл предназначен для вывода на устройства с плотностью печати 300dpi" или "...для экранов с плотностью точек 72dpi" , и больше ничего.
Логический пиксель - это какой-то адский костыль, чтобы всех запутать. 1 логический пиксель при 144dpi - это 2 пикселя при 72dpi или 4 пикселя (2х2)? Не изобретайте новых сущностей, лучше разберитесь со старыми. Размеры файла всё равно в точках. Хотите удвоить размер 100х100, чтобы на удвоенном разрешении Ретины всё показывалось чётко -- пожалуйста, удваивайте размеры до 200х200.
AndrewYaremko Автор
Именно это в статьи и написано.
Стандарт опустить до уровня декларации, это мощно. Предоставьте пожалуйста ссылочку на данный сопроводительный комментарий. Я всегда знакомлюсь с оригинальной документацией, а не сторонними комментариями. По ссылке которая прикреплена в статье вы найдете оригинал.
Логический пиксель — он де dp — придумали ребята из Google. А вместе с ним и формулу расчета. Да, 1 логический пиксель при 144dpi - это 2 пикселя при 72dpi, тк прописываются параметрами отдельно по X и Y. В файлы пишется Xzise и Xresolution и ResolutionUnit.
И это нет так, когда речь заходит о работе над файлом. работе дизайнера и дизайн программ. Совсем не просто и очень неудобно открывать файлы в фотошопе и фигме без учета ppi. Поэтому в начале 2022 компании Adobe и Figma стали читать метаданные файлов, открывать их и масштабировать с учетом X и Y resolution.
До 2022 ты делал принтскрин на ретине, закидывал в фигму, а он отображался пиксель в пиксель и приходилось каждый раз уменьшать его размер вдвое. Чтобы на той же ретине в Preview он нормально смотрелся. Теперь данной проблемы нет ни у Figma ни у Фотошопа.
У Фигмы и подобных вообще в персетах рабочих областей нет «удвоенного» изображения. Все пресеты в логических пикселях или DP
mSnus
"Пресеты Фигмы" нужны для того, чтобы сымитировать более плотный экран на обычном. Чтобы дизайнеру проще работалось, картинки уменьшаются вдвое при выводе на экран, вот и всё.
Стандарт никто никуда не опускает. Надо только понимать, что означает этот стандарт, вот и всё -- что именно он стандартизует.
А он стандартизует то самое "сопроводительное письмо к растровому файлу", в котором указывается и целевая плотность, и ориентация, и много чего ещё. Сам растр при этом никак не меняется. Вы упомянули правильный термин - "метаданные". Это и есть декларация, манифест, сопроводительное письмо, комментарий. Но не сами данные.
Логические пиксели - это вообще условные единицы вроде rem или vh в Web, их сюда вообще нет смысла приплетать (как и rem c vh), вы сами запутались и других путаете. Хотя сами же пишете, что они отказались от термина resolution, чтобы не путаться. Речь же идёт просто о коэффициентах масштабирования, то привязанных к конкретному экрану, то к размеру шрифтов в системе:
Так что это изначально неправильно назвали пикселями, это некоторые логические юниты. В W3C это вовремя поняли, в Google - увы, нет.
AndrewYaremko Автор
Манифест)) точно, я много с маркетологами работаю у них Манифест — это немного другое, поэтому не корректно считал вам месседж.
Да все верно говорите, все измеряется в абстрактных юнитах, но у документации EXIF прям прописано 72 ppi как дефолтный статус, если устройсто само в файл не пишет иного.
Зачем упоминул о логических пикселях — ну так это тот самый коэфицент масштабирования. В метадате не такой характеристики. Масштабирует Фигма и фотошоп на основе X и Y resolution как при открытии файла, так и при выгрузке. А это масштабирование исторически привязано к «пункту» и стандарту в 72 ppi и кратности к нему. А google в своей документации привязывается к 160 как к кратности x1.
Смотрите, недавно весь инструментарий для дизайнеров обновился. Раньше ты делал принтскрин с ретины и при открытии его в фигме он открывался например в 1880 на 1800 , а теперь тот же принтскин если закинуть в фигму, он откроется как 1440 на 900. Кейс простой, но мегаудобный. В статье попытался максимально просто написать откуда ноги растут, и почему после оптимизации файлов через тот же tinypng, файлы в фигму перестают открываться корректно.
Я не вижу противоречий. в нашей дискуссии. Просто жду когда в обиход веб-продакшена войдет понятие Денсити или плотность. А то бегают со своими Хай-резами и резалюциями и черт его пойми, корректно ли дизайнер интерпритирует тормин.
mSnus
Противоречия в нашей дискуссии только в одном -- вы смешиваете разные понятия в одну кучу, отсюда возникает путаница.
Ваш заголовок - Что такое «Разрешение»? И ваш опрос:
Так вот, надо понять, что оно возникает только при выводе куда-то. Что в EXIF это не "плотность файла", а "предполагаемая плотность выводящего устройства". Количество пикселей есть у монитора. А у принтера, например, фиксированного количества пикселей нет, он вообще может на бесконечном рулоне бумаги печатать.
Поэтому вопрос "разрешение -- это пиксели или плотность?" смысла не имеет.
А то, что Фигма когда-то не умела понимать метаданные, а теперь вдруг начала - это здорово, но к заголовку и опросу имеет мало отношения.
Хорошо, что статья не про цветовые профили... Вас бы ждало ещё множество открытий чудных.
AndrewYaremko Автор
Я путаю? Достаточно вбить запрос в гугл high resolution или high resolution images и посмотреть на выдачу. Я только даю справку из стандартов и объясняю откуда в Фигме появилась привязка к кратности с указанием дат, ссылок на документацию и сценариев использования в актуальном инструментарии. Если я где то ошибся поправьте пожалуйста. Может фигма умеет считывать 300ppi а не 288 корректно? или 600? 600 я не проверял и указал что считывает только 144. Может фотошоп обновился не в 2022 а в декабре 2021? Возможно. Этот факт я тоже не проверил и мог ошибиться.
А еще есть растеражированная среди дизайн сообщества литература под названием Ководство, по которой каждый дизайнер узнает, что разрешения у изображений, оказывается вообще нет. Отсюда и постановка опросника.
mSnus
Всё верно, у изображений нет разрешения, только
путьразмер. Растровое изображение - это просто точки, столько-то выстраиваем в ширину, столько в высоту. Всё.Разрешение есть у дисплея или у принтера, у устройства вывода. Разрешение это сокращение от "разрешающая способность устройства вывода". У картинки его нет.
В Гугле high resolution images - это изображения больших размеров, подходящие для вывода на дисплеи высокого разрешения. То есть не изображения высокого разрешения, а дисплеи, понимаете?
А с Фигмой вы вообще полезли в дебри, потому что там надо понимать - Фигма в основе векторная, и там изначально можно растеризовать при выводе векторный объект как 1:1 к видимому на экране (компьютера) изображению, а можно 2х, 4х или 8х, чтобы на более плотных экранах мобильников оно смотрелось так же. Это просто растеризация, а не "смена разрешения".
А дальше уже получается обратная задача - как запихнуть обратно в фигму что-то, что отображалось на экране мобильного так, чтобы оно не заняло весь экран компьютера. Поначалу приходилось вручную масштабировать, потом сделали автоматику. Ну и отлично, молодцы, но к вопросу "что такое разрешение" отношения вообще не имеет.
Это просто автомасштабирование картинки, а не разрешение. Как в responsive web: поставили ширину 100% и радуемся, но не пытаемся измерять разрешение в процентах, например.
Итого: в Ководстве в этом случае правильно всё написано, читайте и понимайте.
AndrewYaremko Автор
Простите, но это и есть определение термина «Разрешения» по стандарту IBM. Как видите, для вас статью писал.
Вот вам ссылка.
Вот вам скриншот.
А ководство писалось в то время, когда фотошоп не умел считывать EXIF и фигмы не было и MacOS у скриншотам не писала X и Y resolution. Все изменилось буквально вчера.
mSnus
Вы просто не понимаете, что читаете. По вашей ссылке же написано:
При сканировании у сканера, конечно, тоже есть разрешение, как у устройства ввода. Это разрешение и записывается в Image Resolution, но это не разрешение файла - это разрешение, с которым работал сканер, который записывал этот файл.
Так что ничего глобально с разрешением не изменилось ни вчера, ни позавчера от того, что какой-то из редакторов научился работать с метаданными. Растр остаётся растром - это просто последовательность пикселов, поймите.
AndrewYaremko Автор
Аллилуя, нашел документацию. Давайте разбираться с документациями а не домыслами и воспоминаниями, что как всегда считалось, что у кого есть.
VGA - к чему в статье и отсылаю — стандарт который описывает преобразование цифрового в аналоговое. Описывает все звенья цепи, контроллеры, помять поддержку мониторов. Те это не стандарт к мониторам . Вы hd изображение и на full hd матрицу можете вывести. однако будете выводить с определенной разрешением и чичтотой. И разрешение в данном случае — графического массива, который поддерживает количество линий. В доке, откуда прикрепляю скриншот. Есть табличка поддержки. Обратите внимание что там в килобайтах передается и зафиксировано не изображение ли? или у нас размер матриц стал в мегабайтах измеряться?
mSnus
Вот и разберитесь, пожалуйста ))
а что у вас там non-interlaced, расскажите? изображение? )))
эх, молодо-зелено.. не знаете, как круто работать, когда видео-режим поддерживает целых 256 цветов, а не 16, да? и графику! это объём видеопамяти)) почитайте, вам будет интересно
AndrewYaremko Автор
А видеопамять что хранит? разрешение матрицы или все же цифрового файла?
Повторюсь VGA описывает не стандарт к разрешению мониторов или считываемых устройств, а комплекс по преобразованию и под разрешением понимается собственно высота и ширина передаваемого изображения, что и определяется как разрешение и мереется пикселями по высоте и ширине, который в память и записывается.
Про молодо-зелено, я еще перфокарты застал.
Вот у нас есть монитор 21:9 допустим 72dpi. На монитор xbox one выводит картинку в фулхд 16:9 с черными полями — ответьте на вопрос, разрешение кого / чего я вижу на экране, ели мы знаем что fullhd — стандарт разрешения по IBM?
не изображения ли часом?
Когда переходят на личности в обсуждении, верный признак заканчивать. Я вас искренне благодарю за возражения, мне пришлось углубится в документацию и вопрос в целом, но позиции с этим не изменилась. Приятно общаться с образованным человеком, а то обычно только про ошибки пишут в грамматике. Приходите еще, скоро будем разбираться в Графал и мат аппарате Эло. А так то я еще перфокарты застал и моно мониторы, с «ламповым» зелененьким отливом.
mSnus
Ну, если застали эти мониторы, то должны понимать, что приведенная вами документация, содержимое видеопамяти и т.д. -- ни при чём.
Разрешение в этой документации -- это разрешение монитора, вы просто ещё раз себе доказали то, что я вам изначально говорил. Ну камон, вы же должны понимать, что это 640х480 - это не размер фотографии, а число отображаемых пикселей на устройстве вывода. Поэтому и термин resolution используется -- потому что речь об устройстве вывода.
Вы который раз приводите данные и отказываетесь понимать, что там написано.
Sapienti sat, действительно, пора заканчивать.
AndrewYaremko Автор
это не разрешение монитора, например на монитор с разрешением в 1024ч768 можно вывести изображение с разрешением 640х480. в документации написано — саппортид мониторс те мониторы поддерживающие разрешение. а не разрешение мониторов. А у дисплея — сайз а не резолюшн. Ну написано же.
mSnus
На любой монитор можно вывести изображение меньшего размера, и что? )) Разрешение монитора - это максимальное количество точек, которые он разрешает вывести. При этом монитор поддерживает работу в нескольких разрешениях (там написано - supported resolutions), но указывается обычно максимальное. Читайте, что написано:
Перевожу: информация о дисплее, такая как поддерживаемые разрешения.
Ну и чьи, по вашему, это разрешения? Фотографии, которую на этот дисплей будут выводить? )))))
P.S. size of the screen там - это диагональ в дюймах
AndrewYaremko Автор
Разрешения чего?
И в какой документации / специвикации написано, что разрешение монитора — это максимально количество вводимых точек по высоте и ширине. Стандарт плиз где термин разрешение трактуется как максимальное... В этом то и дело — за столько лет сложилась такое представление в головах пользователей. VGA рашифровывается как графический массив — причем вообще монитор?))) Стандарт на графику. Если есть желание могу прислать док, вместе пройдемся, что к чему по каждому параграфу.
nidalee
AndrewYaremko Автор
Подскажите, что за коэффициент такой? не так подробно знаком с видео?!
mSnus
Да, не-квадратными пикселями вообще засада. Пользователи раньше очень расстраивались, когда их видео с камеры на компе вдруг становилось из широкоформатного почти квадратным, а всё на нём - вытянутым))