Изучив оба стандарта: IBM VGA и EXIF, написав пару публикаций по теме, у меня все равно ушло два дня, чтобы понять, откуда берется «полу-пиксель». И речь не о рендеринге сложных форм типа литер шрифта или иконок, а о стандартных ректанглах формата 100x100. Который по логике должен масштабироваться хорошо. Однако.
Полу-пиксель не новость. В любом редакторе, который умеет работать с вектором такие объекты как литеры шрифтов, иконки могут и будут, по своей форме, не совпадать с пиксельной сеткой.
В растровых же программах и в браузере применяются алгоритмы растеризации, которые заполняют соседние пиксели определенным оттенком в зависимости от занимаемой формой площади. С этим все давно понятно. Но откуда берется полу-пиксель у куба размером 105x105 px? И как это возможно? Разбираемся с матчастью.
Сценарий
Разрабатываешь ты интерфейсы и нужно в макет поставлять баннера или часть чужого интерфейса: фрейм apple music, spotify, платежки сбера и тд. Заходишь на сайт, где это можно взять и делаешь принтскрин. Принтскрин в Figm’у и….
… и все четенько, пиксель в пиксель. Баннер 300x600 px. Идем за следующим. Делаем принтскрин на том же устройстве, на том же сайте и странице и …
… полу-пиксель.
Эффект полу-пикселя можно получить в двух случаях: при целом значении размеров объекта и при дробном. Если при дробном параметре, как на виджете с яндекс музыкой, полу-пиксель напрашивается сам собой, то откуда он появляется при целом значении?
Спойлер: в обоих случаях имеем дело с увеличенным двукратно рендерингом логических пикселей. Но по порядку.
Раньше
До 2022 считалось, что у графического файла нет «разрешения». Оно конечно было, но использовалось только для печати, а в общей практики диджитал дизайнеров и верстальщиков отсутствовало. Ибо «до retina» и стандартизации DIP смысла в этом не было — не умели операционки, проф. софт и браузеры работать с этим параметром.
О путаннице в терминологии и понятии «Разрешение», я подробно уже писал в статье.
Во второй половине 2022 основные браузеры и проф ПО / Photoshop стали в полной мере поддерживать стандарт EXIF и научились работать с параметром “Resolution” почти как принтеры. И теперь Resolution по стандарту EXIF или Dancity по стандарту Material design , и «плотность пикселей» по русски, в полной мере используется в цифровых интерфейсах.
Разрешение / с одной стороны
Если на Retin’е сделать Принтскин, то параметры о разрешении запишутся в метаданные файла как 144 по высоте и 144 по ширине. Что соответствует двукратному увеличению от IBM стандарта в 72ppi.
В самих параметрах файла будет указан размер по ширине и высоте, например 1440х900. Не стоит обманываться — это не реальный размер графического файла, а логический.
Если стереть метаданные в файле и открыть его в фотошопе, то мы увидим файл размером 2880х1800. И он будет пиксель в пиксель. Так уж логика у OSX.
А то разрешение, которое вы видите на мониторе, это вообще отдельная песня и к разрешению файла имеет косвенное отношение и к полу-пикселям тоже, поэтому опустим разговоры о разрешении монитора.
Если вы открывали такой принтскрин в фотошопе или в Figm’е в начале 2022 года, то он открывался бы как файл с размером 2880х1800 и там и там. Сегодня этот же принтскрин и в фотошопе или в Figma откроется как изображение 1440х1800.
Т.е. ПО научилось считывать данные о “resolution” и обрабатывать их, а точнее уменьшать изображение вдвое. Вдвое, потому, что Figma, значения отличные от 144 или 72 не понимает.
Браузер / с другой стороны
Браузеры же работают с логическими пикселями, перерисовывая изображение в двукратном увеличении от количества логических пикселей по ширине и высоте. Поэтому в свойствах объекта при просмотре кода появляется полу пиксель.
В случае с фреймом Яндекс музыки — это был бы полу-пиксель, если бы вы смотрели изображение с разрешением 72ppi и при выводе такого объекта линия бы сгладилась дорисовав в соседних пикселях оттенко. А для 144ppi это целый пиксель. Здесь надеюсь, понятно.
А вот пример с баннером хоть значение объекта и целое, при открытии файла в Figma тоже даст полу-пиксель. Откуда — спрашивается?
Во первых, если очистить метаданные и бросить файл в фигму, то он откроется никак 1440х1800, а в два раза больше — 2880х1800, и на этом изображении все будет четко — пиксель в пиксель. То же будет если метаданные не тереть, а просто двукратно увеличить размеры файта.
А вот в браузере не кратные двум значения объектов при определенных свойствах позиционирования, например в процентах или выровненные по центру, могут отрисовываться со смещением в 1 графический пиксель те половину логического. ведь математически для построения четкого изображения браузер работает с размером 2880х1800. да сам банер тоже рендерится в двукратном размере, но нечеткий параметр позиционирования например в 33% будет считаться и откругляться 2880х1800, а не от 1440х1800, что и может дать сдвиг на полпикселя.
P.S.
Под рукой нет устройства на винде с матрицей на 13-15 дюймов и 2/4к разрешением, чтобы посмотреть, как файлы пишет и масштабирует винда. Буду признателен за освещение этого вопроса в комментариях.
И с выравниваниями, позиционированием и алгоритмами рендеринга браузера мало экспериментировал. Такой эффект встречал только на не кратных двум параметрам. Если встречались другие случае появления полу-пикселя на ретинах, напишите пожалуйста в комментариях, проверю.
UP
По вопросам и дискуссии в комментариях отснял видео кейса. Всем спасибо за участие)
Комментарии (30)
Einherjar
29.12.2022 12:13+1Если вы открывали такой принтскрин в фотошопе или в Figm’е в начале 2022 года, то он открывался бы как файл с размером 2880х1800 и там и там. Сегодня этот же принтскрин и в фотошопе или в Figma откроется как изображение 1440х1800.
Эмм, что? В фотошопе будет "открыто" ровно столько пикселей сколько сохранено в файле, если вы делаете принтскрин экрана разрешением 2880х1800, то количество пикселей в нем будет 2880х1800 и фотошоп откроет изображение 2880х1800 пикселей, и абсолютно пофиг что в exif, на какой ос сделан скриншот и retina у вас или нет.
AndrewYaremko Автор
29.12.2022 12:18Энн, нет. В этом и вопрос. Вы на какой операционке это делаете и с какой версией фотошопа? Во второй половине 2022 последний фотошоп (я плачу за подписку) начиная с bigsur открывает принтскрины в логических пикселях. Я сам удивился. и Фигма так же делает это. Поэтому статью и написал.
Einherjar
29.12.2022 12:39+1Mac OS Ventura, PS 24.0. Сделал принтскрин (cmd shift 3). - там везде реальное разрешение 3360x2100 пикселей, как вы получили метаданные с "логическими пикселями"? В каких конкретно тегах они были? Из картинок в статье это непонятно, 2940 и 1912 это же реальное разрешение дисплея и соотвественно скриншота, а не "логические пиксели".
Да сама идея того что графический редактор при открытии файла просто молча выбрасывает половину данных и даунскейлит изображение звучит абсурдно.
AndrewYaremko Автор
29.12.2022 13:14Редактор ничего не выбрасывает, а просто отображает иначе. А попробуйте принтскрин ваш в фиргу закинуть, интересно, что получится. Сейчас накачу фотошоп и снова попробую, только обновил машинку. Метаданные должны писаться в парамет x-resolution и y-resolution . Попробуйте прочитать их в онлайн читалка метаданных, может Вентура их не пишет, кстати. Она разве уже в релизе?
Einherjar
29.12.2022 13:23x-resolution и y-resolution это 144, может вы путаете Points и Pixels, при 144 размер в Points аккурат вдвое меньше чем в Pixels. Только Point это не логический пиксель а 1/72 дюйма, что впрочем с реальным физическим размером не совпадает т.к. мак врет о dpi - оно в реальности не 144. Но только вот фотошоп умеет работать с этими единицами не с 2022 года а уж лет 30 как
AndrewYaremko Автор
29.12.2022 13:28Конечно 144 это не логический размер. в нем может и 72 стоять. и по стандарту это не поинты, а условные unit'ы. Но через этот параметр как раз таки и определяется логический размер при открытии файла. Проверьте плиз в фигме. Я сейчас накатываю фотошоп. А фотошоп изначально умел этот параметр писать, но открывал раньше 1к1 как вы и описали ваш кейс. Я удивился когда во второй половине фотошоп стал мне открывать иначе. Сам с программой 20 лет работаю.
Einherjar
29.12.2022 13:43Я фигмой не пользуюсь и что в ней за дичь творится в целом не особо интересно. Но заявленное в статье разделение на "до и после середины 2022" получается касается не всего софта, а только фикса каких то багов в фигме.
Фотошоп 1к1 и открывает, потому что он работает непосредственно с пикселями как и любой растровый редактор, иначе невозможно да и незачем.
AndrewYaremko Автор
29.12.2022 13:51Нет, вопрос поддержки старого печатного стандарта, браузерами для цифровой графики. Фигма ведь веб контейнер.
Einherjar
29.12.2022 18:33Браузерам тем более пофиг exif, они просто ресайзят картинку в требуемый размер элемента, картинка одинакового размера в пикселях но с разным dpi в exif будет отображаться одинаково при одинаковом размере элемента.
P.S. Что там с фотошопом то?
AndrewYaremko Автор
29.12.2022 21:12Нет не будет, если это не прописано в свойствах. киньте принтскрин в фирму и увидите результат. Сабака кары отказалась кушать, не проверю сегодня
Einherjar
29.12.2022 21:20В каких именно свойствах?
Да причем тут фигма вообще, статья у вас не о фигме, а если о фигме то и писать надо явно только про фигму а не про фотошопы и прочее асбтрактное проф ПО и браузеры, тем более что там как раз ничего и не поменялось, а то непонятно ничего же. То что в фигме как то приколхозили в 2022 году обработку exif и делают какие то странные манипуляции на их основе никак не влияет на весь остальной софт и все остальные сайты.
AndrewYaremko Автор
29.12.2022 21:35Полупиксель как раз получается с принтскрин с сайта, ок то насчитывает нечётные значения не по логическим пикселям, а по их двукратному увеличению. С этим принтскрином потом что угодно можно делать, можно в фирму, можно в Фотошоп, если в нем ещё и пдай поменять на 72 то полупиксельная линия отрендерится с артефактом.
Einherjar
29.12.2022 21:41+1Да не существует никаких полупикселей. Может в фигме и есть такое определение, не знаю, но во всем остальном мире точно нет. Снимок экрана это дамп экранного буфера размером с разрешение экрана, в физических пикселях. Ну или кроп из него если захвачена только часть. И любой графический редактор включая фотошоп обрабатывает только полное изображение, без каких то "полупикселей", двухкратных увеличений и нечетных значений, а 72, 144 или 960 там в exif ему глубоко пофиг. Фотошоп ничего не рендерит с артефактами, 100% масштаб отображения в нем это 1 пиксель изображения равен одному физическому пикселю дисплея, независимо ни от чего, какие артефакты, вы что?
AndrewYaremko Автор
29.12.2022 22:39Про дамп физических пикселей вы заблуждаетесь. Я сейчас смотрю в монитор с разрешением 2560-by-1664 native resolution at 224 pixels. Выставляю в ос параметры рендеринга like 1710 х 1112. захожу в свойства файла и смотрю размер принтскрина с этого разрешения = 3420х2224. Те ОС мне рендерит картинку больше чем у меня физических пикселей. Браузер отрабатывает запрос от ОС тк о разрешении моника он знать ничего не знает.
так вот как обрабатывает браузер по какому из разрешений? По большему и в вопросе позиционирования он тоже считает от процент или отступ от 3420х2224. Иначе откуда в свойствах CSS нечетный параметр?
Einherjar
29.12.2022 23:16Про дамп физических пикселей вы заблуждаетесь. Я сейчас смотрю в монитор с разрешением 2560-by-1664 native resolution at 224 pixels. Выставляю в ос параметры рендеринга like 1710 х 1112. захожу в свойства файла и смотрю размер принтскрина с этого разрешения = 3420х2224
Да, согласен ошибся, на маке экранный буфер больше физического разрешения дисплея, и если не кратно то попиксельного соответствия получить не удастся, видимо этот частный случай и имелся ввиду под полупикселями. На винде к слову такой проблемы нет. Но это не отменяет того что exif в выводе изображений ни в фотошопе ни в браузере никак не участвует.
так вот как обрабатывает браузер по какому из разрешений? По большему и в вопросе позиционирования он тоже считает от процент или отступ от 3420х2224. Иначе откуда в свойствах CSS нечетный параметр?
Наверное треть ваших фраз не представляется возможным прочесть, декодировать и как то восстановить заложенную в них мысль, судя по другим комментариям не только мне.
AndrewYaremko Автор
29.12.2022 23:40Записал видео. Надеюсь будет нагляднее. 10 минут на модерации и прикреплю к статье) Но не кратность рендеринга тут ни при чем. А фотошоп вы обновляли или ставили новый? Точно помню, кейс пришелся на момент моей первой публикации, ищу в черновиках. Не думал, что адоб откажется от моих денег. по приятно знать что сэкономил последние пару месяцев.
edo1h
30.12.2022 04:21Я сейчас смотрю в монитор с разрешением 2560-by-1664 native resolution at 224 pixels. Выставляю в ос параметры рендеринга like 1710 х 1112. захожу в свойства файла и смотрю размер принтскрина с этого разрешения = 3420х2224. Те ОС мне рендерит картинку больше чем у меня физических пикселей.
ужас какой. зачем нужно рендердить в разрешении кратно большем физического — понятно.
а зачем нужно рендерить в разрешении чуть большем? чтобы при попиксельном разглядывании было мыло? конечно, высокий ppi монитора это мыло замаскирует, но плюсов-то всё равно не вижу…
AndrewYaremko Автор
30.12.2022 05:44Ура не приложу, зачем. Наверное, чтобы соблюсти радиальные пропорции интерфейса при масштабировании! Возможна это пошло с iphone 8+, но это догадка только. Высокое разрешение сглаживает картинку, но разница то заметна. Глаза привыкали к новой матрице
Einherjar
30.12.2022 12:13А это для совместимости. Помните виндовс несколько лет пинали за то что масштабируется все криво-косо? Потому что там сделано так что размер элементов системой перерасчитывается под любой дробный коэффициент 1.5, 1.75 итп, и это еще требовало некоторой адаптации на стороне приложения, что естественно зачастую сторонние разработчики делали криво. А старые приложения которые не были под это адаптированы так вообще просто мыльно апскейлились. И все вокруг орали вот мол криворукие мелкомягкие не умеют софт писать, мол на нормальных операционках все хорошо и ровно. На маке не стали запариваться с математикой с дробными коэффициентами, обрабатывать округления и проч, приложения гораздо проще отмасштабировать в 2x и это даже не потребует никаких адаптаций с их стороны, соотвественно если вы хотите увеличить интерфейс в 1.5 раза чтобы на экране например 1920х1080 размер элементов был как на дисплее аналогичного размера но 1280x720, весь UI рисуется в разрешении (1280x720)*2=2560x1440 и сжимается в 1920х1080 чтобы не было мыла от апскейла. Некоторые линуксы так же делают для X11 которое тоже не умеет дробную математику. Ну вот по итогу имеем то что на винде все пиксель в пиксель а на маке такое вот. Впрочем при высоком ppi этого действительно не видно.
AndrewYaremko Автор
30.12.2022 12:51Видно, к сожалению. Обновился на m2 air с air 2019 и текст с экрана я уже не витаю, глаза утсают. А на первых ретинах все было x2 и было норм. Та же история с разрешениями для iPhone. А вот у гугл тоже интересно. там есть дробные значения. Но я плотнее fullhd на 5.5" в руках не держал))) и скриншотов не делал.
AndrewYaremko Автор
29.12.2022 22:46Вот скриншот вебстраницы с интегрированным фреймом эпл мьюзик. с параметрами 660х175 в 144. даунскейлите его в фотошопе до 72 и вы увидите сверху и снизу появятся артевакты а не четкие линии. Это все из за особенностей позиционирования блока в браузере.
https://drive.google.com/drive/folders/12hHiU7_H8COn3eZafOW1baO22p3rfiaA?usp=share_link
BadHandycap
29.12.2022 18:19+2Кто-нибудь может мне объяснить в двух словах про какой "полупиксель" идет речь и причем тут VGA и EXIF? Прочитал статью 1.5 раза но так и не понял, хотя с компьютерной графикой дружу давно.
А комментарии к статье меня окончательно запутали.
AndrewYaremko Автор
29.12.2022 21:09-1Тот, что получатся у прямоугольного объекта с не кратными двойке значениями по ширине или высоте, по краям если закидывать в фирму принтскрин сделанный на ретине странички браузера.
fk0
У меня в X window system было понятие "разрешения" (DPI) в 2002 году, а не в 2022. Не надо макбук притягивать за уши. Это у вас на маках и в виндах 96DPI прибито гвоздями. А у меня на 4к мониторе сколько-то там, достаточно много. А в 2002 было аж 75DPI на хрустальном мониторе. И браузеры всю жизнь это поддерживали, хотя честно сказать, смотрится плохо и приходится в браузере масштабирование 1:2 включать. Потому, что как раз веб-дизайнеры болт клали на DPI и до сих пор много где считают в пикселях. В итоге картинки впору в лупу рассматривать, как Бастрыкин, если без масштабирования.
PS: о чём статья и причём тут полупиксели не понял. Давно известны алгоритмы масштабирования изображений с приемлимым количеством артефактов. Попадание в пиксельную сетку ничего особого в себе не несёт, если нет задачи сделать большие ровные чёткие квадратные пиксели. Это актуально больше для шрифтов, для чего там есть хинтинг и subpixel rendering. Нефиг мутные надписи делать картинками, их следует делать шрифтами.
AndrewYaremko Автор
Речь в статье не про алгоритмы растеризации, а о том, что при нечетных значениях объектов в вёрстке кидая принтскрин в ПО вы получите сдвиг на пол пикселя с обеих сторон. И граница будет четкая. Без артефатов. О поддержке браузерами стандарта EXIF есть оф заявление фирмы датируемое 2022 годом. DPI в статье не фигурирует, только DIP — density independent pixel стандартизация Гугл от 2013 года.