Термин “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)


  1. mSnus
    25.10.2022 12:39
    +4

    Ещё раз: у IBM речь идёт о разрешении устройства вывода, экрана, физического носителя. То, сколько точек он позволяет вывести. Его разрешение - это количество точек по горизонтали и вертикали, поэтому 1920х1080 это FullHD, будь это экран смартфона или экран телестены с пикселями по 10х10 см и таким же интервалом между ними.

    "Когда мне прилетает куча точек, могу их вывести максимум вот так. Будет больше - интерполирую".

    А размеры файла в точках и так намертво заданы в JPEG. Поэтому разрешение в EXIF - это просто предполагаемая плотность точек при выводе этого файла (на печать или ещё куда). Это декларация, сопроводительный комментарий: "данный файл предназначен для вывода на устройства с плотностью печати 300dpi" или "...для экранов с плотностью точек 72dpi" , и больше ничего.

    "У меня есть куча точек, предназначенных для вывода на принтер. Отпечаток хочу получить 16х10см. А если будете выводить на экран, интерполируйте."

    Логический пиксель - это какой-то адский костыль, чтобы всех запутать. 1 логический пиксель при 144dpi - это 2 пикселя при 72dpi или 4 пикселя (2х2)? Не изобретайте новых сущностей, лучше разберитесь со старыми. Размеры файла всё равно в точках. Хотите удвоить размер 100х100, чтобы на удвоенном разрешении Ретины всё показывалось чётко -- пожалуйста, удваивайте размеры до 200х200.


    1. AndrewYaremko Автор
      25.10.2022 16:35
      -2

      Ещё раз: у IBM речь идёт о разрешении устройства вывода, экрана, физического носителя. То, сколько точек он позволяет вывести. Его разрешение - это количество точек по горизонтали и вертикали, поэтому 1920х1080 это FullHD, будь это экран смартфона или экран телестены с пикселями по 10х10 см и таким же интервалом между ними.

      Именно это в статьи и написано.

      А размеры файла в точках и так намертво заданы в JPEG. Поэтому разрешение в EXIF - это просто предполагаемая плотность точек при выводе этого файла (на печать или ещё куда). Это декларация, сопроводительный комментарий: "данный файл предназначен для вывода на устройства с плотностью печати 300dpi" или "...для экранов с плотностью точек 72dpi" , и больше ничего.

      Стандарт опустить до уровня декларации, это мощно. Предоставьте пожалуйста ссылочку на данный сопроводительный комментарий. Я всегда знакомлюсь с оригинальной документацией, а не сторонними комментариями. По ссылке которая прикреплена в статье вы найдете оригинал.

      Логический пиксель - это какой-то адский костыль, чтобы всех запутать. 1 логический пиксель при 144dpi - это 2 пикселя при 72dpi или 4 пикселя (2х2)? Не изобретайте новых сущностей, лучше разберитесь со старыми. Размеры файла всё равно в точках.

      Логический пиксель — он де dp — придумали ребята из Google. А вместе с ним и формулу расчета. Да, 1 логический пиксель при 144dpi - это 2 пикселя при 72dpi, тк прописываются параметрами отдельно по X и Y. В файлы пишется Xzise и Xresolution и ResolutionUnit.

       Хотите удвоить размер 100х100, чтобы на удвоенном разрешении Ретины всё показывалось чётко -- пожалуйста, удваивайте размеры до 200х200.

      И это нет так, когда речь заходит о работе над файлом. работе дизайнера и дизайн программ. Совсем не просто и очень неудобно открывать файлы в фотошопе и фигме без учета ppi. Поэтому в начале 2022 компании Adobe и Figma стали читать метаданные файлов, открывать их и масштабировать с учетом X и Y resolution.

      До 2022 ты делал принтскрин на ретине, закидывал в фигму, а он отображался пиксель в пиксель и приходилось каждый раз уменьшать его размер вдвое. Чтобы на той же ретине в Preview он нормально смотрелся. Теперь данной проблемы нет ни у Figma ни у Фотошопа.

      У Фигмы и подобных вообще в персетах рабочих областей нет «удвоенного» изображения. Все пресеты в логических пикселях или DP


      1. mSnus
        25.10.2022 18:08
        +1

        "Пресеты Фигмы" нужны для того, чтобы сымитировать более плотный экран на обычном. Чтобы дизайнеру проще работалось, картинки уменьшаются вдвое при выводе на экран, вот и всё.

        Стандарт опустить до уровня деклараци

        Стандарт никто никуда не опускает. Надо только понимать, что означает этот стандарт, вот и всё -- что именно он стандартизует.

        А он стандартизует то самое "сопроводительное письмо к растровому файлу", в котором указывается и целевая плотность, и ориентация, и много чего ещё. Сам растр при этом никак не меняется. Вы упомянули правильный термин - "метаданные". Это и есть декларация, манифест, сопроводительное письмо, комментарий. Но не сами данные.

        Логические пиксели - это вообще условные единицы вроде rem или vh в Web, их сюда вообще нет смысла приплетать (как и rem c vh), вы сами запутались и других путаете. Хотя сами же пишете, что они отказались от термина resolution, чтобы не путаться. Речь же идёт просто о коэффициентах масштабирования, то привязанных к конкретному экрану, то к размеру шрифтов в системе:

        One dp is a virtual pixel unit that's roughly equal to one pixel on a medium-density screen (160dpi; the "baseline" density). 

        ...

        When defining text sizes, however, you should instead use scalable pixels (sp) as your units (but never use sp for layout sizes). The sp unit is the same size as dp, by default, but it resizes based on the user's preferred text size.

        ...

        The conversion of dp units to screen pixels is simple:

        px = dp * (dpi / 160)

        Так что это изначально неправильно назвали пикселями, это некоторые логические юниты. В W3C это вовремя поняли, в Google - увы, нет.


        1. AndrewYaremko Автор
          25.10.2022 19:17

          Манифест)) точно, я много с маркетологами работаю у них Манифест — это немного другое, поэтому не корректно считал вам месседж.
          Да все верно говорите, все измеряется в абстрактных юнитах, но у документации EXIF прям прописано 72 ppi как дефолтный статус, если устройсто само в файл не пишет иного.
          Зачем упоминул о логических пикселях — ну так это тот самый коэфицент масштабирования. В метадате не такой характеристики. Масштабирует Фигма и фотошоп на основе X и Y resolution как при открытии файла, так и при выгрузке. А это масштабирование исторически привязано к «пункту» и стандарту в 72 ppi и кратности к нему. А google в своей документации привязывается к 160 как к кратности x1.

          Смотрите, недавно весь инструментарий для дизайнеров обновился. Раньше ты делал принтскрин с ретины и при открытии его в фигме он открывался например в 1880 на 1800 , а теперь тот же принтскин если закинуть в фигму, он откроется как 1440 на 900. Кейс простой, но мегаудобный. В статье попытался максимально просто написать откуда ноги растут, и почему после оптимизации файлов через тот же tinypng, файлы в фигму перестают открываться корректно.

          Я не вижу противоречий. в нашей дискуссии. Просто жду когда в обиход веб-продакшена войдет понятие Денсити или плотность. А то бегают со своими Хай-резами и резалюциями и черт его пойми, корректно ли дизайнер интерпритирует тормин.


          1. mSnus
            25.10.2022 19:59
            +1

            Противоречия в нашей дискуссии только в одном -- вы смешиваете разные понятия в одну кучу, отсюда возникает путаница.

            Ваш заголовок - Что такое «Разрешение»? И ваш опрос:

            Так вот, надо понять, что оно возникает только при выводе куда-то. Что в EXIF это не "плотность файла", а "предполагаемая плотность выводящего устройства". Количество пикселей есть у монитора. А у принтера, например, фиксированного количества пикселей нет, он вообще может на бесконечном рулоне бумаги печатать.

            Поэтому вопрос "разрешение -- это пиксели или плотность?" смысла не имеет.

            А то, что Фигма когда-то не умела понимать метаданные, а теперь вдруг начала - это здорово, но к заголовку и опросу имеет мало отношения.

            Хорошо, что статья не про цветовые профили... Вас бы ждало ещё множество открытий чудных.


            1. AndrewYaremko Автор
              25.10.2022 20:43

              Я путаю? Достаточно вбить запрос в гугл high resolution или high resolution images и посмотреть на выдачу. Я только даю справку из стандартов и объясняю откуда в Фигме появилась привязка к кратности с указанием дат, ссылок на документацию и сценариев использования в актуальном инструментарии. Если я где то ошибся поправьте пожалуйста. Может фигма умеет считывать 300ppi а не 288 корректно? или 600? 600 я не проверял и указал что считывает только 144. Может фотошоп обновился не в 2022 а в декабре 2021? Возможно. Этот факт я тоже не проверил и мог ошибиться.
              А еще есть растеражированная среди дизайн сообщества литература под названием Ководство, по которой каждый дизайнер узнает, что разрешения у изображений, оказывается вообще нет. Отсюда и постановка опросника.


              1. mSnus
                26.10.2022 01:12
                +1

                 литература под названием Ководство, по которой каждый дизайнер узнает, что разрешения у изображений, оказывается вообще нет

                Всё верно, у изображений нет разрешения, только путь размер. Растровое изображение - это просто точки, столько-то выстраиваем в ширину, столько в высоту. Всё.

                Разрешение есть у дисплея или у принтера, у устройства вывода. Разрешение это сокращение от "разрешающая способность устройства вывода". У картинки его нет.

                В Гугле high resolution images - это изображения больших размеров, подходящие для вывода на дисплеи высокого разрешения. То есть не изображения высокого разрешения, а дисплеи, понимаете?

                А с Фигмой вы вообще полезли в дебри, потому что там надо понимать - Фигма в основе векторная, и там изначально можно растеризовать при выводе векторный объект как 1:1 к видимому на экране (компьютера) изображению, а можно 2х, 4х или 8х, чтобы на более плотных экранах мобильников оно смотрелось так же. Это просто растеризация, а не "смена разрешения".

                А дальше уже получается обратная задача - как запихнуть обратно в фигму что-то, что отображалось на экране мобильного так, чтобы оно не заняло весь экран компьютера. Поначалу приходилось вручную масштабировать, потом сделали автоматику. Ну и отлично, молодцы, но к вопросу "что такое разрешение" отношения вообще не имеет.

                Это просто автомасштабирование картинки, а не разрешение. Как в responsive web: поставили ширину 100% и радуемся, но не пытаемся измерять разрешение в процентах, например.

                Итого: в Ководстве в этом случае правильно всё написано, читайте и понимайте.


                1. AndrewYaremko Автор
                  26.10.2022 05:02

                  Всё верно, у изображений нет разрешения, только путь размер. Растровое изображение - это просто точки, столько-то выстраиваем в ширину, столько в высоту. Всё.

                  Простите, но это и есть определение термина «Разрешения» по стандарту IBM. Как видите, для вас статью писал.
                  Вот вам ссылка.
                  Вот вам скриншот.

                  А ководство писалось в то время, когда фотошоп не умел считывать EXIF и фигмы не было и MacOS у скриншотам не писала X и Y resolution. Все изменилось буквально вчера.


                  1. mSnus
                    26.10.2022 05:35

                    Вы просто не понимаете, что читаете. По вашей ссылке же написано:

                    The Image Resolution property indicates the image resolution of a digital photograph. This property applies to the ScannedRecord object.

                    The Scanned Record class represents a NARA electronic record for a scanned document file.

                    При сканировании у сканера, конечно, тоже есть разрешение, как у устройства ввода. Это разрешение и записывается в Image Resolution, но это не разрешение файла - это разрешение, с которым работал сканер, который записывал этот файл.

                    Так что ничего глобально с разрешением не изменилось ни вчера, ни позавчера от того, что какой-то из редакторов научился работать с метаданными. Растр остаётся растром - это просто последовательность пикселов, поймите.


                    1. AndrewYaremko Автор
                      26.10.2022 06:26

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

                      VGA - к чему в статье и отсылаю — стандарт который описывает преобразование цифрового в аналоговое. Описывает все звенья цепи, контроллеры, помять поддержку мониторов. Те это не стандарт к мониторам . Вы hd изображение и на full hd матрицу можете вывести. однако будете выводить с определенной разрешением и чичтотой. И разрешение в данном случае — графического массива, который поддерживает количество линий. В доке, откуда прикрепляю скриншот. Есть табличка поддержки. Обратите внимание что там в килобайтах передается и зафиксировано не изображение ли? или у нас размер матриц стал в мегабайтах измеряться?


                      1. mSnus
                        26.10.2022 10:21

                        Вот и разберитесь, пожалуйста ))

                        это не стандарт к мониторам

                        а что у вас там non-interlaced, расскажите? изображение? )))

                        что там в килобайтах передается

                        эх, молодо-зелено.. не знаете, как круто работать, когда видео-режим поддерживает целых 256 цветов, а не 16, да? и графику! это объём видеопамяти)) почитайте, вам будет интересно


                      1. AndrewYaremko Автор
                        26.10.2022 10:57

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

                        Вот у нас есть монитор 21:9 допустим 72dpi. На монитор xbox one выводит картинку в фулхд 16:9 с черными полями — ответьте на вопрос, разрешение кого / чего я вижу на экране, ели мы знаем что fullhd — стандарт разрешения по IBM?
                        не изображения ли часом?

                        Когда переходят на личности в обсуждении, верный признак заканчивать. Я вас искренне благодарю за возражения, мне пришлось углубится в документацию и вопрос в целом, но позиции с этим не изменилась. Приятно общаться с образованным человеком, а то обычно только про ошибки пишут в грамматике. Приходите еще, скоро будем разбираться в Графал и мат аппарате Эло. А так то я еще перфокарты застал и моно мониторы, с «ламповым» зелененьким отливом.


                      1. mSnus
                        26.10.2022 11:05

                        Ну, если застали эти мониторы, то должны понимать, что приведенная вами документация, содержимое видеопамяти и т.д. -- ни при чём.

                        Разрешение в этой документации -- это разрешение монитора, вы просто ещё раз себе доказали то, что я вам изначально говорил. Ну камон, вы же должны понимать, что это 640х480 - это не размер фотографии, а число отображаемых пикселей на устройстве вывода. Поэтому и термин resolution используется -- потому что речь об устройстве вывода.

                        Вы который раз приводите данные и отказываетесь понимать, что там написано.

                        Sapienti sat, действительно, пора заканчивать.


                      1. AndrewYaremko Автор
                        26.10.2022 12:42

                        это не разрешение монитора, например на монитор с разрешением в 1024ч768 можно вывести изображение с разрешением 640х480. в документации написано — саппортид мониторс те мониторы поддерживающие разрешение. а не разрешение мониторов. А у дисплея — сайз а не резолюшн. Ну написано же.


                      1. mSnus
                        26.10.2022 12:54

                        На любой монитор можно вывести изображение меньшего размера, и что? )) Разрешение монитора - это максимальное количество точек, которые он разрешает вывести. При этом монитор поддерживает работу в нескольких разрешениях (там написано - supported resolutions), но указывается обычно максимальное. Читайте, что написано:

                        information about display, such as supported resolutions

                        Перевожу: информация о дисплее, такая как поддерживаемые разрешения.

                        Ну и чьи, по вашему, это разрешения? Фотографии, которую на этот дисплей будут выводить? )))))

                        P.S. size of the screen там - это диагональ в дюймах


                      1. AndrewYaremko Автор
                        26.10.2022 22:21

                        Перевожу: информация о дисплее, такая как поддерживаемые разрешения.

                        Разрешения чего?

                        И в какой документации / специвикации написано, что разрешение монитора — это максимально количество вводимых точек по высоте и ширине. Стандарт плиз где термин разрешение трактуется как максимальное... В этом то и дело — за столько лет сложилась такое представление в головах пользователей. VGA рашифровывается как графический массив — причем вообще монитор?))) Стандарт на графику. Если есть желание могу прислать док, вместе пройдемся, что к чему по каждому параграфу.


    1. nidalee
      26.10.2022 07:27

      Логический пиксель — это какой-то адский костыль, чтобы всех запутать.
      Да уж, чего стоит один только размер пикселя в видео, где при значений 1.33 из 1440x1080 получается 1920x1080… Халявщики.


      1. AndrewYaremko Автор
        26.10.2022 07:35

        Подскажите, что за коэффициент такой? не так подробно знаком с видео?!


      1. mSnus
        26.10.2022 12:56

        Да, не-квадратными пикселями вообще засада. Пользователи раньше очень расстраивались, когда их видео с камеры на компе вдруг становилось из широкоформатного почти квадратным, а всё на нём - вытянутым))


  1. apcehypo
    25.10.2022 14:17
    +1

    Путаницы не возникает, если всегда уточнять разрешение чего. Разрешение экрана/монитора. Разрешение картинки. Как-то всегда так и говорил.


    1. AndrewYaremko Автор
      25.10.2022 16:39

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


  1. andreishe
    25.10.2022 17:53
    +2

    Разрешение, очевидно, это способность объектива передавать мелкие детали.


  1. php7
    25.10.2022 20:08

    Интересно, почему на 2х-экранах 1х-рисунки выводятся, как дерьмо?

    Чет кажется, что даже если 1 пиксель расширять до 4, то должно выйти норм изображение


    1. mSnus
      25.10.2022 20:32

      Потому что шрифты рядом четкие и это сильно бросается в глаза. Плюс там простейший bilinear upscaling скорее всего, для скорости


      1. AndrewYaremko Автор
        25.10.2022 20:50
        -1

        Не всегда Upscale. на макбуках можно выставить высокое «разрешение» прости господи, чтобы они под этим не подразумевали, и отрендеренное изображение будет dawnscale'ится до физических параметров. Сам опешил когда узнал куда уходят ресурсы железа.


      1. php7
        25.10.2022 21:33

        Оказывается, есть css-свойство image-rendering

        Лучше не стало

        Можно сделать хуже - указать ему pixelated


    1. AndrewYaremko Автор
      25.10.2022 20:45

      А потому что кратность не всегда x2, а точнее уже мало когда. см таблицу с iPhone.