Comments 33
У меня в X window system было понятие "разрешения" (DPI) в 2002 году, а не в 2022. Не надо макбук притягивать за уши. Это у вас на маках и в виндах 96DPI прибито гвоздями. А у меня на 4к мониторе сколько-то там, достаточно много. А в 2002 было аж 75DPI на хрустальном мониторе. И браузеры всю жизнь это поддерживали, хотя честно сказать, смотрится плохо и приходится в браузере масштабирование 1:2 включать. Потому, что как раз веб-дизайнеры болт клали на DPI и до сих пор много где считают в пикселях. В итоге картинки впору в лупу рассматривать, как Бастрыкин, если без масштабирования.
PS: о чём статья и причём тут полупиксели не понял. Давно известны алгоритмы масштабирования изображений с приемлимым количеством артефактов. Попадание в пиксельную сетку ничего особого в себе не несёт, если нет задачи сделать большие ровные чёткие квадратные пиксели. Это актуально больше для шрифтов, для чего там есть хинтинг и subpixel rendering. Нефиг мутные надписи делать картинками, их следует делать шрифтами.
Речь в статье не про алгоритмы растеризации, а о том, что при нечетных значениях объектов в вёрстке кидая принтскрин в ПО вы получите сдвиг на пол пикселя с обеих сторон. И граница будет четкая. Без артефатов. О поддержке браузерами стандарта EXIF есть оф заявление фирмы датируемое 2022 годом. DPI в статье не фигурирует, только DIP — density independent pixel стандартизация Гугл от 2013 года.
Если вы открывали такой принтскрин в фотошопе или в Figm’е в начале 2022 года, то он открывался бы как файл с размером 2880х1800 и там и там. Сегодня этот же принтскрин и в фотошопе или в Figma откроется как изображение 1440х1800.
Эмм, что? В фотошопе будет "открыто" ровно столько пикселей сколько сохранено в файле, если вы делаете принтскрин экрана разрешением 2880х1800, то количество пикселей в нем будет 2880х1800 и фотошоп откроет изображение 2880х1800 пикселей, и абсолютно пофиг что в exif, на какой ос сделан скриншот и retina у вас или нет.
Энн, нет. В этом и вопрос. Вы на какой операционке это делаете и с какой версией фотошопа? Во второй половине 2022 последний фотошоп (я плачу за подписку) начиная с bigsur открывает принтскрины в логических пикселях. Я сам удивился. и Фигма так же делает это. Поэтому статью и написал.
Mac OS Ventura, PS 24.0. Сделал принтскрин (cmd shift 3). - там везде реальное разрешение 3360x2100 пикселей, как вы получили метаданные с "логическими пикселями"? В каких конкретно тегах они были? Из картинок в статье это непонятно, 2940 и 1912 это же реальное разрешение дисплея и соотвественно скриншота, а не "логические пиксели".
Да сама идея того что графический редактор при открытии файла просто молча выбрасывает половину данных и даунскейлит изображение звучит абсурдно.
Редактор ничего не выбрасывает, а просто отображает иначе. А попробуйте принтскрин ваш в фиргу закинуть, интересно, что получится. Сейчас накачу фотошоп и снова попробую, только обновил машинку. Метаданные должны писаться в парамет x-resolution и y-resolution . Попробуйте прочитать их в онлайн читалка метаданных, может Вентура их не пишет, кстати. Она разве уже в релизе?
x-resolution и y-resolution это 144, может вы путаете Points и Pixels, при 144 размер в Points аккурат вдвое меньше чем в Pixels. Только Point это не логический пиксель а 1/72 дюйма, что впрочем с реальным физическим размером не совпадает т.к. мак врет о dpi - оно в реальности не 144. Но только вот фотошоп умеет работать с этими единицами не с 2022 года а уж лет 30 как
Конечно 144 это не логический размер. в нем может и 72 стоять. и по стандарту это не поинты, а условные unit'ы. Но через этот параметр как раз таки и определяется логический размер при открытии файла. Проверьте плиз в фигме. Я сейчас накатываю фотошоп. А фотошоп изначально умел этот параметр писать, но открывал раньше 1к1 как вы и описали ваш кейс. Я удивился когда во второй половине фотошоп стал мне открывать иначе. Сам с программой 20 лет работаю.
Я фигмой не пользуюсь и что в ней за дичь творится в целом не особо интересно. Но заявленное в статье разделение на "до и после середины 2022" получается касается не всего софта, а только фикса каких то багов в фигме.
Фотошоп 1к1 и открывает, потому что он работает непосредственно с пикселями как и любой растровый редактор, иначе невозможно да и незачем.
Нет, вопрос поддержки старого печатного стандарта, браузерами для цифровой графики. Фигма ведь веб контейнер.
Браузерам тем более пофиг exif, они просто ресайзят картинку в требуемый размер элемента, картинка одинакового размера в пикселях но с разным dpi в exif будет отображаться одинаково при одинаковом размере элемента.
P.S. Что там с фотошопом то?
Нет не будет, если это не прописано в свойствах. киньте принтскрин в фирму и увидите результат. Сабака кары отказалась кушать, не проверю сегодня
В каких именно свойствах?
Да причем тут фигма вообще, статья у вас не о фигме, а если о фигме то и писать надо явно только про фигму а не про фотошопы и прочее асбтрактное проф ПО и браузеры, тем более что там как раз ничего и не поменялось, а то непонятно ничего же. То что в фигме как то приколхозили в 2022 году обработку exif и делают какие то странные манипуляции на их основе никак не влияет на весь остальной софт и все остальные сайты.
Полупиксель как раз получается с принтскрин с сайта, ок то насчитывает нечётные значения не по логическим пикселям, а по их двукратному увеличению. С этим принтскрином потом что угодно можно делать, можно в фирму, можно в Фотошоп, если в нем ещё и пдай поменять на 72 то полупиксельная линия отрендерится с артефактом.
Да не существует никаких полупикселей. Может в фигме и есть такое определение, не знаю, но во всем остальном мире точно нет. Снимок экрана это дамп экранного буфера размером с разрешение экрана, в физических пикселях. Ну или кроп из него если захвачена только часть. И любой графический редактор включая фотошоп обрабатывает только полное изображение, без каких то "полупикселей", двухкратных увеличений и нечетных значений, а 72, 144 или 960 там в exif ему глубоко пофиг. Фотошоп ничего не рендерит с артефактами, 100% масштаб отображения в нем это 1 пиксель изображения равен одному физическому пикселю дисплея, независимо ни от чего, какие артефакты, вы что?
Про дамп физических пикселей вы заблуждаетесь. Я сейчас смотрю в монитор с разрешением 2560-by-1664 native resolution at 224 pixels. Выставляю в ос параметры рендеринга like 1710 х 1112. захожу в свойства файла и смотрю размер принтскрина с этого разрешения = 3420х2224. Те ОС мне рендерит картинку больше чем у меня физических пикселей. Браузер отрабатывает запрос от ОС тк о разрешении моника он знать ничего не знает.
так вот как обрабатывает браузер по какому из разрешений? По большему и в вопросе позиционирования он тоже считает от процент или отступ от 3420х2224. Иначе откуда в свойствах CSS нечетный параметр?
Про дамп физических пикселей вы заблуждаетесь. Я сейчас смотрю в монитор с разрешением 2560-by-1664 native resolution at 224 pixels. Выставляю в ос параметры рендеринга like 1710 х 1112. захожу в свойства файла и смотрю размер принтскрина с этого разрешения = 3420х2224
Да, согласен ошибся, на маке экранный буфер больше физического разрешения дисплея, и если не кратно то попиксельного соответствия получить не удастся, видимо этот частный случай и имелся ввиду под полупикселями. На винде к слову такой проблемы нет. Но это не отменяет того что exif в выводе изображений ни в фотошопе ни в браузере никак не участвует.
так вот как обрабатывает браузер по какому из разрешений? По большему и в вопросе позиционирования он тоже считает от процент или отступ от 3420х2224. Иначе откуда в свойствах CSS нечетный параметр?
Наверное треть ваших фраз не представляется возможным прочесть, декодировать и как то восстановить заложенную в них мысль, судя по другим комментариям не только мне.
Записал видео. Надеюсь будет нагляднее. 10 минут на модерации и прикреплю к статье) Но не кратность рендеринга тут ни при чем. А фотошоп вы обновляли или ставили новый? Точно помню, кейс пришелся на момент моей первой публикации, ищу в черновиках. Не думал, что адоб откажется от моих денег. по приятно знать что сэкономил последние пару месяцев.
Я сейчас смотрю в монитор с разрешением 2560-by-1664 native resolution at 224 pixels. Выставляю в ос параметры рендеринга like 1710 х 1112. захожу в свойства файла и смотрю размер принтскрина с этого разрешения = 3420х2224. Те ОС мне рендерит картинку больше чем у меня физических пикселей.
ужас какой. зачем нужно рендердить в разрешении кратно большем физического — понятно.
а зачем нужно рендерить в разрешении чуть большем? чтобы при попиксельном разглядывании было мыло? конечно, высокий ppi монитора это мыло замаскирует, но плюсов-то всё равно не вижу…
Ура не приложу, зачем. Наверное, чтобы соблюсти радиальные пропорции интерфейса при масштабировании! Возможна это пошло с iphone 8+, но это догадка только. Высокое разрешение сглаживает картинку, но разница то заметна. Глаза привыкали к новой матрице
А это для совместимости. Помните виндовс несколько лет пинали за то что масштабируется все криво-косо? Потому что там сделано так что размер элементов системой перерасчитывается под любой дробный коэффициент 1.5, 1.75 итп, и это еще требовало некоторой адаптации на стороне приложения, что естественно зачастую сторонние разработчики делали криво. А старые приложения которые не были под это адаптированы так вообще просто мыльно апскейлились. И все вокруг орали вот мол криворукие мелкомягкие не умеют софт писать, мол на нормальных операционках все хорошо и ровно. На маке не стали запариваться с математикой с дробными коэффициентами, обрабатывать округления и проч, приложения гораздо проще отмасштабировать в 2x и это даже не потребует никаких адаптаций с их стороны, соотвественно если вы хотите увеличить интерфейс в 1.5 раза чтобы на экране например 1920х1080 размер элементов был как на дисплее аналогичного размера но 1280x720, весь UI рисуется в разрешении (1280x720)*2=2560x1440 и сжимается в 1920х1080 чтобы не было мыла от апскейла. Некоторые линуксы так же делают для X11 которое тоже не умеет дробную математику. Ну вот по итогу имеем то что на винде все пиксель в пиксель а на маке такое вот. Впрочем при высоком ppi этого действительно не видно.
Видно, к сожалению. Обновился на m2 air с air 2019 и текст с экрана я уже не витаю, глаза утсают. А на первых ретинах все было x2 и было норм. Та же история с разрешениями для iPhone. А вот у гугл тоже интересно. там есть дробные значения. Но я плотнее fullhd на 5.5" в руках не держал))) и скриншотов не делал.
Вот скриншот вебстраницы с интегрированным фреймом эпл мьюзик. с параметрами 660х175 в 144. даунскейлите его в фотошопе до 72 и вы увидите сверху и снизу появятся артевакты а не четкие линии. Это все из за особенностей позиционирования блока в браузере.
https://drive.google.com/drive/folders/12hHiU7_H8COn3eZafOW1baO22p3rfiaA?usp=share_link
Кто-нибудь может мне объяснить в двух словах про какой "полупиксель" идет речь и причем тут VGA и EXIF? Прочитал статью 1.5 раза но так и не понял, хотя с компьютерной графикой дружу давно.
А комментарии к статье меня окончательно запутали.
Ключевая ошибка рассуждений — думать, что браузерные dev tools показывают размеры уже отрендеренного изображения (в видео это говорится с 2:28 по 3:03).
Браузер показывает вычисленные CSS-размеры DOM-элемента ещё до рендеренга. Эти размеры могут содержать любое количество цифр после запятой, хотя на уровне UI обычно округляются до 3 знаков.
Также неверно, что браузер рендерит картинку обязательно в 2-кратном размере — это лишь один из частных случаев. Конкретный коэффициент зависит от параметра devicePixelRatio, который в свою очередь зависит от разрешения экрана, ОС, браузера, а также масштабирования. Если потыкать в браузере Ctrl±, видимые в девтулзах размеры могут измениться (а могут и нет, зависит от вёрстки).
Нет у меня этой ошибки, я не говорил что браузер от отрендеренного изображения размер показывает. Я говорил, что от логического. О том как он его получает я тему не затрагивал. И тут вы все верно написали.
И второе, я говорил о стандартных параметрах браузера и моей матрицы, что в начале видео и обозначил. Нигде не говорил, что только двукратный размер может браузер просчитывать.
В итоге полупиксель получил. В чем ошибка то?)))
Разрешение и «Полу-пиксель»