Нажмите "Enter" для пропуска содержимого

1 пиксель это: Пиксели в сантиметры | Онлайн калькулятор

Содержание

Что такое пиксель?

Занимаясь веб-разработкой и работой с компьютерной графикой можно довольно часто сталкиваться с таким понятием как пиксель.

Пиксели используются для построения изображения различных элементов на веб-страницах:

+ Таблиц

+ Блоков

+ Указания размеров текста

+ Картинок

+ Видео

+ И др.

В этой небольшой заметке хочу немного рассказать о том, что такое пиксель ориентируясь,  в первую очередь, на область веб-разработки.

Можно вдаваться в технические тонкости этого понятия, но я этого делать не буду, просто расскажу о том главном, что нужно знать, чтобы эффективно использовать это понятие в своей работе над веб-проектами.

Начнем с самого понятия и откуда оно происходит с англ. pixel — сокращение от pix element, можно перевести как элемент изображения.

Пиксель — это минимальный и неделимый элемент (точка), из которого состоит изображение на экране монитора.

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

Чтобы увидеть пиксели, нужно максимально приблизить изображение. Давайте я покажу как это может выглядеть:

Исходное изображение:

Фрагмент того же изображения, но увеличенного во много раз.

Маленькие квадратики, которые стали заметны и есть те самые пиксели.

Чтобы увидеть насколько мал пиксель, присмотритесь к следующему изображению:

У вас должна быть видна еле заметная черная точка.

 

Величина пикселя (реальная, которую вы сейчас видите) зависит от технических характеристик монитора, в частности от такого параметра как ppi (количество пикселей на дюйм).

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

Примерно, величина пикселя может находиться в диапазоне 0,1 — 0,3 мм. В зависимости от монитора.

Поэтому ответить сколько сантиметров в одном пикселе не представляется возможным, для каждого монитора это значение будет свое.

А вот квадрат размером 50х50 пикселей:

 

Каждый пиксель на экране имеет следующие параметры:

1) Цвет

2) Яркость

3) Иногда прозрачность

Размещая всю совокупность пикселей с этими параметрами вы можете видеть все краски изображений.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

пиксель в миллиметр [мм] • Конвертер длины и расстояния • Популярные конвертеры единиц • Компактный калькулятор • Онлайн-конвертеры единиц измерения

Конвертер длины и расстоянияКонвертер массыКонвертер мер объема сыпучих продуктов и продуктов питанияКонвертер площадиКонвертер объема и единиц измерения в кулинарных рецептахКонвертер температурыКонвертер давления, механического напряжения, модуля ЮнгаКонвертер энергии и работыКонвертер мощностиКонвертер силыКонвертер времениКонвертер линейной скоростиПлоский уголКонвертер тепловой эффективности и топливной экономичностиКонвертер чисел в различных системах счисления.Конвертер единиц измерения количества информацииКурсы валютРазмеры женской одежды и обувиРазмеры мужской одежды и обувиКонвертер угловой скорости и частоты вращенияКонвертер ускоренияКонвертер углового ускоренияКонвертер плотностиКонвертер удельного объемаКонвертер момента инерцииКонвертер момента силыКонвертер вращающего моментаКонвертер удельной теплоты сгорания (по массе)Конвертер плотности энергии и удельной теплоты сгорания топлива (по объему)Конвертер разности температурКонвертер коэффициента теплового расширенияКонвертер термического сопротивленияКонвертер удельной теплопроводностиКонвертер удельной теплоёмкостиКонвертер энергетической экспозиции и мощности теплового излученияКонвертер плотности теплового потокаКонвертер коэффициента теплоотдачиКонвертер объёмного расходаКонвертер массового расходаКонвертер молярного расходаКонвертер плотности потока массыКонвертер молярной концентрацииКонвертер массовой концентрации в раствореКонвертер динамической (абсолютной) вязкостиКонвертер кинематической вязкостиКонвертер поверхностного натяженияКонвертер паропроницаемостиКонвертер плотности потока водяного параКонвертер уровня звукаКонвертер чувствительности микрофоновКонвертер уровня звукового давления (SPL)Конвертер уровня звукового давления с возможностью выбора опорного давленияКонвертер яркостиКонвертер силы светаКонвертер освещённостиКонвертер разрешения в компьютерной графикеКонвертер частоты и длины волныОптическая сила в диоптриях и фокусное расстояниеОптическая сила в диоптриях и увеличение линзы (×)Конвертер электрического зарядаКонвертер линейной плотности зарядаКонвертер поверхностной плотности зарядаКонвертер объемной плотности зарядаКонвертер электрического токаКонвертер линейной плотности токаКонвертер поверхностной плотности токаКонвертер напряжённости электрического поляКонвертер электростатического потенциала и напряженияКонвертер электрического сопротивленияКонвертер удельного электрического сопротивленияКонвертер электрической проводимостиКонвертер удельной электрической проводимостиЭлектрическая емкостьКонвертер индуктивностиКонвертер реактивной мощностиКонвертер Американского калибра проводовУровни в dBm (дБм или дБмВт), dBV (дБВ), ваттах и др. единицахКонвертер магнитодвижущей силыКонвертер напряженности магнитного поляКонвертер магнитного потокаКонвертер магнитной индукцииРадиация. Конвертер мощности поглощенной дозы ионизирующего излученияРадиоактивность. Конвертер радиоактивного распадаРадиация. Конвертер экспозиционной дозыРадиация. Конвертер поглощённой дозыКонвертер десятичных приставокПередача данныхКонвертер единиц типографики и обработки изображенийКонвертер единиц измерения объема лесоматериаловВычисление молярной массыПериодическая система химических элементов Д. И. Менделеева

Круизный теплоход Celebrity Reflection в порту в Майами. Его длина составляет 319 метров или 1047 футов.

Мост Золотые Ворота, пересекающий пролив Золотые Ворота. Этот пролив соединяет залив Сан-Франциско и Тихий океан. Длина моста составляет 2,7 километра или 1,7 мили.

Общие сведения

Длина — это наибольшее измерение тела. В трехмерном пространстве длина обычно измеряется горизонтально.

Расстояние — это величина, определяющая насколько два тела удалены друг от друга.

Измерение расстояния и длины

Единицы расстояния и длины

В системе СИ длина измеряется в метрах. Производные величины, такие как километр (1000 метров) и сантиметр (1/100 метра), также широко используются в метрической системе. В странах, где не пользуются метрической системой, например в США и Великобритании, используют такие единицы как дюймы, футы и мили.

Расстояние в физике и биологии

В биологии и физике часто измеряют длину намного менее одного миллиметра. Для этого принята специальная величина, микроме́тр. Один микроме́тр равен 1×10⁻⁶ метра. В биологии в микрометрах измеряют величину микроорганизмов и клеток, а в физике — длину инфракрасного электромагнитного излучения. Микроме́тр также называют микроном и иногда, особенно в англоязычной литературе, обозначают греческой буквой µ. Широко используются и другие производные метра: нанометры (1×10⁻⁹ метра), пикометры (1×10⁻¹² метра), фемтометры (1×10⁻¹⁵ метра и аттометры (1×10⁻¹⁸ метра).

Парусник проходит под мостом Золотые Ворота. Максимальная высота проходящего под ним судна может быть до 67,1 метра или 220 футов во время прилива.

Расстояние в навигации

В судоходстве используют морские мили. Одна морская миля равна 1852 метрам. Первоначально она измерялась как дуга в одну минуту по меридиану, то есть 1/(60×180) меридиана. Это облегчало вычисления широты, так как 60 морских миль равнялись одному градусу широты. Когда расстояние измеряется в морских милях, скорость часто измеряют в морских узлах. Один морской узел равен скорости движения в одну морскую милю в час.

Расстояние в астрономии

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

Астрономическая единица (а. е., au) равна 149 597 870 700 метрам. Величина одной астрономической единицы — константа, то есть, постоянная величина. Принято считать, что Земля находится от Солнца на расстоянии одной астрономической единицы.

Световой год равен 10 000 000 000 000 или 10¹³ километрам. Это расстояние, которое проходит свет в вакууме за один Юлианский год. Эта величина используется в научно-популярной литературе чаще, чем в физике и астрономии.

Объяснение понятия «парсек»

Парсек приблизительно равен 30 856 775 814 671 900 метрам или примерно 3,09 × 10¹³ километрам. Один парсек — это расстояние от Солнца до другого астрономического объекта, например планеты, звезды, луны, или астероида, с углом в одну угловую секунду. Одна угловая секунда — 1/3600 градуса, или примерно 4,8481368 мкрад в радианах. Парсек можно вычислить используя параллакс — эффект видимого изменения положения тела, в зависимости от точки наблюдения. При измерениях прокладывают отрезок E1A2 (на иллюстрации) от Земли (точка E1) до звезды или другого астрономического объекта (точка A2). Шесть месяцев спустя, когда Солнце находится на другой стороне Земли, прокладывают новый отрезок E2A1 от нового положения Земли (точка E2) до нового положения в пространстве того же самого астрономического объекта (точка A1). При этом Солнце будет находиться на пересечении этих двух отрезков, в точке S. Длина каждого из отрезков E1S и E2S равна одной астрономической единице. Если отложить отрезок через точку S, перпендикулярный E1E2, он пройдет через точку пересечения отрезков E1A2 и E2A1, I. Расстояние от Солнца до точки I — отрезок SI, он равен одному парсеку, когда угол между отрезками A1I и A2I — две угловые секунды.

На рисунке:

  • A1, A2: видимое положение звезды
  • E1, E2: положение Земли
  • S: положение Солнца
  • I: точка пересечения
  • IS = 1 парсек
  • ∠P or ∠XIA2: угол параллакса
  • ∠P = 1 угловая секунда

Другие единицы

Лига — устаревшая единица длины, использовавшаяся раньше во многих странах. В некоторых местах ее до сих пор применяют, например, на полуострове Юкатан и в сельских районах Мексики. Это расстояние, которое человек проходит за час. Морская лига — три морских мили, примерно 5,6 километра. Лье — единица примерно равная лиге. В английском языке и лье, и лиги называются одинаково, league. В литературе лье иногда встречается в названии книг, как например «20 000 лье под водой» — известный роман Жюля Верна.

Локоть — старинная величина, равная расстоянию от кончика среднего пальца до локтя. Эта величина была широко распространена в античном мире, в средневековье, и до нового времени.

Ярд используется в британской имперской системе мер и равен трем футам или 0,9144 метра. В некоторых странах, например в Канаде, где принята метрическая система, ярды используют для измерения ткани и длины бассейнов и спортивных полей и площадок, например, полей для гольфа и футбола.

Определение метра

Определение метра несколько раз менялось. Изначально метр определяли как 1/10 000 000 расстояния от Северного полюса до экватора. Позже метр равнялся длине платиноиридиевого эталона. Позднее метр приравнивали к длине волны оранжевой линии электромагнитного спектра атома криптона ⁸⁶Kr в вакууме, умноженной на 1 650 763,73. Сегодня метр определяют как расстояние, пройденное светом в вакууме за 1/299 792 458 секунды.

Вычисления

В геометрии расстояние между двумя точками, А и В, с координатами A(x₁, y₁) и B(x₂, y₂) вычисляют по формуле:

В физике длина — всегда положительная скалярная величина. Ее можно измерить при помощи специального прибора, одометра. Расстояние измеряется по траектории движения тела. Важно не путать расстояние с перемещением — вектором, измеряемым по прямой от точки начала пути до точки конца пути. Перемещение и длина одинаковы по величине только если тело двигалось по прямой.

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

Литература

Автор статьи: Kateryna Yuri

Unit Converter articles were edited and illustrated by Anatoly Zolotkov

Вы затрудняетесь в переводе единицы измерения с одного языка на другой? Коллеги готовы вам помочь. Опубликуйте вопрос в TCTerms и в течение нескольких минут вы получите ответ.

Расчеты для перевода единиц в конвертере «Конвертер длины и расстояния» выполняются с помощью функций unitconversion.org.

Точка против пикселя: в чем разница?

В CSS

Pt — это 1/72 дюйма, а px — 1/96 дюйма.

Следовательно, px составляет 0,75 pt [источник] .

В CSS все несколько абстрагировано, поэтому единица измерения, такая как «pt», не обязательно является одной точкой физического размера, особенно на экране , «in» не обязательно имеет размер в один дюйм и так далее. Даже «px» больше не обязательно должен быть размером в один пиксель: все масштабируется так, чтобы соответствовать гипотетическому устройству с разрешением 96 ppi при просмотре на нормальном расстоянии чтения, что означает, что на экранах, которые значительно отличаются от 96 ppi или от нормального расстояния чтения, все будет масштабироваться, но по-прежнему поддерживать те же отношения, т. е. pt все равно будет 4/3 пикселя единиц и по-прежнему будет 1/72 от единицы.

В печати

В печати точка обычно была где-то от 1/67 дюйма до 1/72,5 дюйма.

В цифровых средах это фактически стало стандартом для точки, которая в настоящее время составляет точно 1/72 дюйма, хотя все еще существуют альтернативные измерения в менее распространенном использовании, которые незначительно отличаются от 1/72, но не намного.

В печати вы обычно не измеряете в пикселях, потому что это технические подробности о целевом принтере или устройстве, которые не являются абсолютным измерением. Например, дизайн может быть напечатан с разрешением 125 т / д, 300 т / д или 1200 т / д и иметь одинаковые физические размеры.

Ли Райан

В то время как многие устройства с высоким разрешением, устройства с небольшим экраном или устройства отображения сетчатки увеличивают размеры пикселей для шрифтов, коэффициент масштабирования действительно зависит от устройства и обычно определяется с точки зрения соотношения логический пиксель: физический пиксель в порту просмотра. Это беспорядок, который существует, потому что многие люди все еще указывают размеры в пикселях, в то время как они должны указывать в независимых от устройства единицах измерения, таких как em.


thomasrutter

Это совсем не так. Во-первых, в отличие от абсолютных единиц, таких как px, pt, in и т. Д., Em является относительной единицей относительно размера вашего шрифта. Для многих целей это просто не подходит. И если ваш размер шрифта указан в абсолютных единицах, то em в любом случае будет связан с абсолютной единицей. Это не «беспорядок», что абсолютные единицы измерения должны масштабироваться на устройствах с нестандартными расстояниями просмотра или сильно отличающимися ppi, это стандарт.

Как соотносятся dp, dip, dpi, ppi, пиксели и дюймы?



Я читал измерения dp, dip, px, sp , но у меня все еще есть некоторые вопросы о dp/dpi vs ppi vs px vs inch. Я не могу их сравнить… разве дюйм самый большой?

Они говорят, что 160 точек на дюйм означает 160 пикселей на один дюйм. Означает ли это, что 1 дюйм содержит 160 пикселей?

Они также говорят, что 1 пиксель на экране 160 dpi = 1 dp. Означает ли это, что 1 пиксель и 1 dp равны?

И наконец, почему мы должны использовать dp вместо px? Я понимаю, что это идеально, но почему ?

mobile user-interface pixels dpi density-independent-pixel
Поделиться Источник Chandeep     12 декабря 2011 в 18:15

5 ответов


  • установите изображения для нескольких устройств, которые имеют разные пиксели ppi

    Я настраиваю изображения для разных устройств в соответствии с официальными документами google. Согласно Google docs, мы всегда должны использовать dp(density independent pixels), потому что пиксели могут отличаться для разных устройств. Таким образом, я управлял изображениями в соответствии с…

  • Почему мой Galaxy Note 3 имеет те же размеры DP, что и гораздо меньший телефон?

    Я уже некоторое время читаю о dp, px, ppi и dpi , и я заблудился. Почему такой большой телефон, как Galaxy Note 3 (с дисплеем 5.7 inch ), может иметь тот же dp , что и Moto X (только с 4.7 inches )? Мой расчет для каждого возвращает width=360dp и height=640dp . Похоже, что многие телефоны с более…



45

Вы должны (почти) всегда использовать гибкие единицы измерения размеров , такие как dp, которые не зависят от плотности пикселей, потому что 300px на одном устройстве не обязательно такое же количество экранной недвижимости, как 300px на другом. Самый большой практический вывод заключается в том, что ваш макет будет выглядеть значительно иначе на устройствах с другой плотностью, чем тот, на который нацелен ваш дизайн.

  • dp или dip означает независимые от плотности пиксели
  • dpi или ppi означает точки (или пиксели) На Дюйм
  • inch -это физическое измерение, связанное с фактическим размером экрана
  • px означает пиксели-пиксель заполняет произвольное количество области экрана в зависимости от плотности.

Например, на экране 160dpi1dp == 1px == 1/160in, а на экране 240dpi1dp == 1.5px . Так что нет, 1dp != 1px . Есть ровно один случай , когда 1dp == 1px, и это на экране 160dpi . Физические единицы измерения, такие как дюймы, никогда не должны быть частью вашего дизайна—то есть, если вы не делаете линейку.

Простая формула для определения количества пикселей 1dp работает до px = dp * (dpi / 160) .

Поделиться Chris Cashwell     12 декабря 2011 в 18:25



8

dp-это физическое измерение, такое как дюймы. (Да, это так. Читайте дальше.)

«Dp соответствует физическому размеру пикселя при 160 dpi» ( https: / / developer.android.com / training/multiscreen/screendensities.html#TaskUseD )

Физический размер пикселя на 160 точек на дюйм составляет ровно 1/160-го дюйма. Поэтому размер dp составляет 1/160 дюйма. 160 dp = 1 дюйм.

Px-это несколько произвольная единица измерения на экране.

Примеры того, что dp преобразует в px на разных устройствах, см. здесь:

https://stackoverflow.com/a/39495538/984003

Поделиться user984003     14 сентября 2016 в 16:47



4

Как соотносятся dp, dip, dpi, ppi, пиксели и дюймы?

В целях развития android:

dp = dip
dpi = ppi
inch x dpi = pixels
dp = 160 x inch
dp = 160*pixels/dpi

Поэтому, на телефона 160dpi (будут добавлены в ближайшее время):

2 inches = 320 dp
2 inches = 320 pixels

На телефоне с разрешением 180 точек на дюйм:

2 inches = 320 dp
2 inches = 360 pixels

Обратите внимание, что 2 дюйма-это ALWAYS 320dp, независимо от размера экрана. Dp-это физическое расстояние в 1/160 дюйма.

ДП «пиксели» формула интересно:

dp = 160*pixels/dpi

Эквивалентно:

dp = pixels/(dpi/160)

dpi/160 -интересный фактор. Это относительная плотность по сравнению с ячейкой mdpi android и сумма, на которую вы должны масштабировать свою графику для различных ячеек ресурсов. Вы увидите, что этот фактор упоминался несколько раз на этой странице, и 0.75 является фактором для ldpi.

Поделиться Sam     17 июня 2015 в 13:25


  • Максимальный dp/dip на android устройствах

    Поскольку dip расшифровывается как независимые от устройства пиксели, существует ли стандартное количество dip для каждого устройства android? Пример: если устройство hdpi имеет X dp / width и Y dp/height,, имеет ли устройство ldpi те же значения? А именно X и Y? Если да, то может ли кто-нибудь…

  • Android экран с плотностью точек на дюйм против ППИ

    Согласно документации android, плотность должна быть в dpi (точках на дюйм), а все измерения макета-в dp . и с помощью простой формулы android можно сопоставить DP в пиксели. px = dp * (dpi / 160), 160dpi ~ medium density screen which is the baseline Так почему бы просто не использовать ppi…



1

Объясню на примере.

float density = context.getResources().getDisplayMetrics().density;
float px = someDpValue * density;
float dp = somePxValue / density;

плотность равна

.75 on ldpi (120 dpi)
1.0 on mdpi (160 dpi; baseline)
1.5 on hdpi (240 dpi)
2.0 on xhdpi (320 dpi)
3.0 on xxhdpi (480 dpi)
4.0 on xxxhdpi (640 dpi)

так например,

У меня есть Samsung S5 с 432 dpi ( http://dpi.lv/#1920×[email protected]″ ).

Итак, density = 432/160 = phone's dpi/baseline = 2.7

Допустим, моя верхняя планка- 48dp . Это ссылка на baseline (160dpi) .

Итак, w.r.t мой S5, это будет 48dp * 2.7 .

Затем, если я хочу увидеть фактическую высоту:

Это будет (48dp * 2.7) / 432 dpi = 0.3 inches .

Поделиться kalan nawarathne     28 ноября 2015 в 06:45



0

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

Однако иногда вам действительно нужны пиксели, и когда вы имеете дело с измерениями в коде, вы всегда имеете дело с реальными пикселями, если только вы не конвертируете их.

Поделиться Santhosh Shettigar     12 декабря 2011 в 18:24


Похожие вопросы:


DPI и PPI / DPI или PPI

Есть ли разница между DPI и PPI ? Это правда: точка = пиксель ? И наконец, что такое DpiX и DpiY в C#.net ? Как мы можем их изменить ?


Как узнать просто DPI из PPI информации?

Я пытаюсь эмулировать размер экрана Galaxy Note, который имеет разрешение 1280 * 800 и 285 ppi. Но когда я пытаюсь ввести конфигурацию устройства на Eclipse для Android, мне приходится вводить…


Как получить dpi / ppi UIImage?

Как получить dpi/ppi изображения в iOS? Может быть, необработанный файл изображения содержится данная информация, поэтому я могу получить индекс PPI/DPI от NSData? Спасибо.


установите изображения для нескольких устройств, которые имеют разные пиксели ppi

Я настраиваю изображения для разных устройств в соответствии с официальными документами google. Согласно Google docs, мы всегда должны использовать dp(density independent pixels), потому что пиксели…


Почему мой Galaxy Note 3 имеет те же размеры DP, что и гораздо меньший телефон?

Я уже некоторое время читаю о dp, px, ppi и dpi , и я заблудился. Почему такой большой телефон, как Galaxy Note 3 (с дисплеем 5.7 inch ), может иметь тот же dp , что и Moto X (только с 4.7 inches )?…


Максимальный dp/dip на android устройствах

Поскольку dip расшифровывается как независимые от устройства пиксели, существует ли стандартное количество dip для каждого устройства android? Пример: если устройство hdpi имеет X dp / width и Y…


Android экран с плотностью точек на дюйм против ППИ

Согласно документации android, плотность должна быть в dpi (точках на дюйм), а все измерения макета-в dp . и с помощью простой формулы android можно сопоставить DP в пиксели. px = dp * (dpi / 160),…


Преобразовать измеренные дюймы (и пиксели) в плавающие?

Inches = Pixels / dpi Я заметил, что PDF Clown использует измерения в float: как преобразовать дюймы и пиксели в float для ширины, высоты и т. д., Чтобы правильно работать в PDF? У кого-нибудь есть…


В чем разница между ppi и dpi?

Хотя я читаю много ресурсов, я все еще путаю ppi и dpi. Я прочитал, что значение ppi и dpi Nexus 6 составляет 493 и 560 соответственно. Как он рассчитывается? А также Какой будет предпочтительный…


Как я могу указать dip-пиксели в коде?

Я читал, что существует два вида референтных пикселей — w3c референтный пиксель и dip-пиксель. Я не понимаю, как я могу использовать dip-пиксели. Должен ли я писать, например, width:100dip или…

Текстурирование, или что нужно знать, чтобы стать Художником по поверхностям. Часть 1. Пиксель

О чем эта серия уроков?


В данной серии статей я постараюсь максимально раскрыть теорию создания текстур для игровой индустрии, начиная от самого понятия «пиксель» и заканчивая построением сложных материалов (шейдеров) в игровом движке на примере Unreal Engine 4.

Часть 1. Пиксель — вы ее читаете.
Часть 2. Маски и текстуры здесь.
Часть 3. PBR и материалы здесь.
Часть 4. Модели, нормали и развертка здесь.
Часть 5. Система материалов здесь.

Я попытаюсь охватить такие программы, как Windows Paint, Photoshop, Substance Painter, Substance Designer и, возможно, Quixel (Не особо вижу смысла в этой программе, так как после прочтения всех статей у читающих должно сформироваться полностью понимание того, как работать с текстурами, и Quixel станет интуитивно понятен).

Я постараюсь разобрать максимально подробно такие понятия, как PBR, маски и различные виды текстур.

И все это будет рассмотрено с самых низких и базовых уровней для первоклашек и тех, кто с этим вообще никогда и ни-ни, чтобы по завершении прочтения этих статей, у читающего не оставалось никаких вопросов, было максимальное понимание, как это все работает, и он мог начать уверено работать с текстурами и шейдерами в любом ПО, так как основа (база, суть) у всех одна.

Я не совершенен. Я не считаю, что я знаю эту тему от и до. Я начал писать эту статью, чтобы помочь своим знакомым втягиваться в этот прекрасный мир текстурирования без моей помощи — чтобы они могли в любой момент открыть статьи, прочитать их и понять, как им с этим работать и что им делать. И я буду благодарен всем вам, если вы поможете мне с заполнением этого тутора, чтобы мы все могли дать ссылку на эти статьи нужным людям, и они могли быстро втянуться в это направление. Я очень прошу всех, кому не безразлична эта тема и тема обучения этому направлению, помочь мне в комментариях — вносить свои правки или пожелания, если вдруг что-то я упущу или ошибусь в чем-то.

Очень прошу всех, кто может придумать другие примеры для лучшего понимания какого-то блока, отписаться в комментариях, чтобы я мог добавить эти примеры в статью. Вдруг, мои примеры окажутся недостаточными для полного понимания основы?

Итак, ребятушки, поехали =)

Часть 1. Пиксель


А что такое пиксель?

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

Пиксель и мониторы


(Описание работы пикселей ниже является абстрактным и не описывает реальные физические явления работы ЖК-мониторов).

В мониторах пиксель является физическим элементом, состоящим из 3х светящихся элементов 3 цветов — Красного, Зеленого и Синего. Интенсивность каждого элемента (сила свечения) определяет цвет пикселя. То есть, если зеленый и синий элементы перестают полностью светиться, а красный элемент остается включенным, то на экране это будет уже красная точка (красный пиксель), и если физически максимально приблизиться к монитору — можно разглядеть, как эта красная точка справа от себя имеет черный пробел — два погасших элемента.

Диапазон Интенсивности и Цвет пикселей


Еще раз повторим. Цвет пикселя определяется 3 световыми элементами — красным, зеленым и синим. В зависимости от их настройки свечения получается сам цвет. Это важно.

Теперь представим это в виде шкалы интенсивности каждого элемента, где зеленый цвет представляет текущую интенсивность, а в квадрате справа цвет, который примерно получается из комбинации интенсивности элементов:

Представим, что на рисунке показана максимальная интенсивность свечения всех элементов пикселя, что в итоге дает нам белый пиксель на мониторе. Соответственно, если мы уменьшим интенсивность Зеленого и Синего элементов до 0, то получим исключительно яркий красный цвет:

А так же мы подходим к очень важному моменту — диапазону интенсивности.

Диапазон интенсивности (назовем его так) — это диапазон состояния элемента от его минимального состояния (отсутствия свечения полностью) до его максимального состояния (максимальная яркость свечения).

Это можно выразить во многих форматах, например:

  • — От 0% до 100%. То есть, элемент может светиться в пол силы, иначе говоря, на 50%.
  • — От 0 до 6000 свечей. То есть, максимальная яркость элемента (100%) — 6000 свечей, а мощность на 75% будет равна соответственно 4500 свечам.
  • — От 0 до 255. То есть, 30% в этом диапазоне будут равны 76,5.
  • — От 0 до 1. То же самое, что 100%, только вместо 100 использовать 1. Это удобно для вычислений, что мы обязательно рассмотрим позже.

В наших уроках мы будем использовать последний вариант представления диапазона, так как он удобен для расчетов, в чем мы в дальнейшем убедимся.

ОффтопВ реальности (за пределами наших условностей) яркость света в мониторах измеряется в единицах измерения «candela«, что в переводе с итальянского означает «свеча». В мире принято обозначать яркость и писать cd (русском варианте кд). В нашем туторе для того, чтобы обозначить именно условность этих значений, я буду продолжать использовать слово «свеча«.
Отдельное спасибо за корректировку Vitter’у.

В наших уроках мы будем использовать последний вариант представления диапазона, так как он удобен для расчетов, в чем мы в дальнейшем убедимся.

Теперь добавим к нашей шкале диапазоны интенсивности и получим следующую картинку:

Сейчас мы видим, что интенсивность R = 1, интенсивность G = 0.55-0.60, а B = 0. В итоге мы получаем примерно оранжевый цвет, который выдают нам на мониторах пиксели. Можно физически максимально близко приблизиться к монитору и попробовать рассмотреть пиксели в квадрате результата — вы не увидите в этих пикселях синего элемента, так как он полностью отключен (его интенсивность равна 0).

Важно понимать, что у каждого монитора, в зависимости от производителя матрицы, сборки и каких-то дополнительных параметров, сам уровень яркости может полностью разниться.

Например, диапазон яркости пикселя у матриц мониторов:

  • — Samsung может быть 6000 свечей.
  • — LG = 5800 свечей.
  • — HP = 12000 свечей.

Это абстрактные цифры, не имеющие никакого отношения к реальности, нужны для того, чтобы было понимание, что у каждого монитора максимальная сила интенсивности может быть разной, а вот диапазон интенсивности всегда один — от 0 до 1. То есть, когда вы выкручиваете до 1 интенсивность красного элемента, то у вас он начинает светиться максимально ярко, потому что 1 = максимум.

Сейчас у нас появилось максимальное представление о том, как выстраивается цвет на мониторе — миллион пикселей настраивают интенсивность своих элементов так, чтобы в сумме получался нужный цвет. Если вы читаете на белом фоне черными буквами этот текст, то уже должны понимать, что сами буквы отображаются пикселями, которые полностью выключили свое свечение, а белый фон состоит из пикселей, которые включили интенсивность всех своих элементов на максимум.

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

Разрешение экрана и размеры пикселей


И так, поняв, как выстраивается цвет в пикселях, мы понимаем, как формируется изображение на мониторе. А какой размер у пикселя? И почему размер важен?

Чем меньше пиксель в размерах, тем больше можно их засунуть в монитор. Однако само количество пикселей всегда ограничено разрешением экрана.

Например, экран с разрешением 1920х1080 содержит в себе 2 073 600 пикселей. То есть, ширина экрана состоит из 1920 пикселей, а высота = 1080 пикселям. Перемножив эти два значения, мы получаем площадь (количество) пикселей.

Таким образом, в зависимости от диагонали монитора и разрешения экрана, пиксель на экране имеет свои размеры. Так, при диагонали монитора в 19 дюймов и разрешении 1920х1080 размер пикселя будет меньше, чем у монитора 24-х дюймов и таким же разрешением. Соответственно, если мы будем брать 24-хдюймовый монитор с разрешением 2560х1440, то размер пикселей у него будет меньше, чем у предыдущего примера.

Итого


У нас есть представление, как формируется цвет пикселей на мониторе.

У нас есть представление о размерах пикселей, и что они могут изменяться в зависимости от самого монитора.

У нас есть представление, что при разрешении 1920х1080 на мониторах телефона картинки будут смотреться детальнее и четче, так как пиксели меньше.

И в целом, у нас есть понимание того, как формируется изображение на мониторе.

Пиксель в изображениях


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

Формирование цвета

Давайте рассмотрим изображение, какую-нибудь картинку. Например, моего кота:

Данная картинка имеет разрешение 178х266 пикселей. То есть, картинка состоит из 47.348 пикселей и занимает на экране всего 2.2 процента пространства. А так ли это? Действительно ли эта картинка занимает на вашем мониторе 47.348 физических пикселей? А если масштаб картинки уменьшить? При уменьшении и увеличении картинки число пикселей, из которых она состоит, не изменяется, а значит, пиксели в картинке явно подразумевают что-то другое, отличное от пикселей в мониторе. И да, и нет.

Пиксель в изображении — это наименьшая цветовая точка, из кучки которых составляется изображение. Количество пикселей в картинке никак не привязано к монитору и зависит от того, кто создавал эту картинку (или что создавало). В данном примере, количество пикселей зависело от моих кривых рук — я вырезал фото случайным образом и получил картинку с таким количеством пикселей.

Чтобы было проще понять, что такое «пиксель» в изображении, стоит обратиться к программной реализации этого объекта.

Пиксель в изображении для компьютера — это набор цифр. Условно говоря, этот блок (кирпич, квадрат) — один белый квадратик на ухе кота занимает 32 бита. Когда компьютер хочет отобразить моего кота на вашем мониторе, он считывает каждый пиксель изображения (все 47.348 пикселей поочередно), и выводит их на монитор. При масштабе изображения 1 к 1 (1 пиксель изображения равен 1 пикселю монитора или, иначе говоря, масштаб равен 100%), размер изображения занимает точно такое же количество пикселей монитора, какое имеет сам.

Каждый такой пиксель состоит из 4 значений (каналов) по 8 бит = 32 бита.

3 значения отводятся на распределение интенсивности цветов Красного, Зеленого и Синего (вспоминая, как работает пиксель в мониторе, сразу становится понятно, как эти значения влияют на цвет).

1 значение отводится прозрачности (об этом позже).

(В этих уроках мы будем рассматривать только 32-битные изображения и 8 битные каналы. Все остальное — это уже частности и прочие стандарты, которые работают по аналогии).

Каждое значение (канал) может быть в интервале от 0 до 255 целых чисел, или иначе — 256 значений, что равно 8 битам.

Иначе говоря:

Если каналы, отвечающие за зеленый и синий буду равны 0, а красный будет равен 255 — то пиксель изображения будет максимально красным.

Если значение зеленого поднять до 128 (что равно середине или 0.5), то пиксель будет оранжевым, как на примере с пикселями от монитора выше.

Или вот такой вот еще пример:

В этом изображении параметры Оттенок, Контраст и Яркость на самом деле никак не влияют на формирование цвета. Это производные, которые высчитываются автоматически из текущих значений каналов, а не хранятся в них, поэтому пугаться такого количества цифр не нужно.
То есть, у пикселя изображения есть три канала (три значения), которые имеют свой диапазон интенсивности от 0 до 255. Регулируя интенсивность канала, можно получать различные оттенки цветов.

С этого момента мы начнем пользоваться программой Adobe Photoshop, потому что у нее есть отличный способ визуализации составления цвета из 3-х каналов (и даже больше, но об этом потом).

Так завелось, что для визуального отображения диапазона интенсивности начали использовать оттенки белого цвета.

Самый черный цвет = 0.
Самый белый цвет = 1 (или 255, если рассматривать шкалу от 0 до 255).

И выглядит это вот так:

Кстати, настройкой интенсивности в Photoshop отвечает параметр Level (используемое обозначение диапазона 0 — 100). Где 65 можно расценивать, как 65% от интенсивности или 0.65:

Помните, как на скриншоте настроек цвета в Paint я просил не обращать внимания на другие параметры? На самом деле, и в Photoshop можно не обращать внимания на другие параметры. Все управляется с помощью 3 каналов — RGB. Остальные значения здесь высчитываются исходя из значений RGB. Но ими можно воспользоваться, например, указывая интенсивность в параметре Level от 0 до 100, и тогда Photoshop за нас высчитает нужные значения для RGB.

В Photoshop можно переключаться на каждый канал отдельно и видеть, как в диапазоне от 0 до 1 белого цвета обозначена интенсивность каждого канала:

Красный канал:

Зеленый канал:

Синий канал:

Ну и еще раз, как все вместе выглядит:

Теперь, понимая, как складывается цвет пикселя из суммы каналов, как визуализируется интенсивность каждого из каналов, можно понять, какие цвета примерно у объектов, если смотреть каждый канал раздельно. Например, оранжевое покрывало справа сверху на красном канале ярко-белое (интенсивность от 0.8 и выше), на зеленом канале средняя интенсивность (около 0.5), а на синем канале оно практически черное (интенсивность около 0). В совокупности получился оранжевый цвет.

Итого


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

(Далее абзац с субъективным представлением о процессах работы) Насколько я понимаю, то при увеличении масштаба картинки, ПО просто красит кучку пикселей (например, 4 на 4) в одинаковый цвет (как будто это один пиксель), формируя ощущение приближения картинки и ее пикселизацию. А вот при уменьшении масштаба картинки, когда на 1 реальный пиксель монитора начинает приходиться 2 и более пикселя изображения, ПО начинает усреднять цвет нескольких пикселей изображения, которые воюют за 1 пиксель монитора. И при увеличении и при уменьшении масштаба картинки ПО так или иначе использует свои алгоритмы обработки изображений.

Дополнительно:

Выше расписана система построения изображения без какого либо сжатия. А вообще, существуют разновидности методов сжатия картинки, при которых значения либо урезаются, либо берутся средние у рядом стоящих, и так далее — нас это сейчас не интересует, и методы сжатия — это уже способы урезания объема памяти на компьютере, которые отталкиваются от данного представления работы пикселя.

Изображения и Маски


И теперь постепенно мы подбираемся к самому интересному — маскам.

Первая маска, с которой мы уже столкнулись, но не озвучили этого — это маска прозрачности.
Напоминаем, что пиксель имеет 4 канала по 8 бит. Из них 3 канала отвечают за формирование цвета, а 4тый отвечает за прозрачность.

Маска прозрачности — это 4-ый канал в пикселе изображения, который говорит о том, что этот пиксель должен отображаться полностью, иметь прозрачность или не отображаться полностью.
То есть, этот канал так же имеет размер в 8 бит и может иметь значения от 0 до 255. Где 0 — максимально прозрачный, а 255 — максимально НЕ прозрачный.

Если у вас в изображении нет канала прозрачности, то его легко добавить, нажав на добавление канала:

И у вас сразу появится Альфа-канал.

Сейчас, все значения в этом канале равны 0, и он визуально полностью черный.

Далее я обозначил зону 100% видимости — выделил моего кота, прорисовав в канале альфа силуэт кота:

Теперь, если включить отображение всех 3х каналов + Альфа-канала, то можно увидеть следующее:

Photoshop пометил красным зоны, которые полностью прозрачны, чтобы я понимал, что при выгрузке прозрачного изображения попавшие в красную зону пиксели будут записаны, у них будет значение во всех 4 каналах, но так, как в 4-ом канале у них стоит значение 0, то они не будут отображаться и, следовательно, будут висеть грузом для файла изображения.

Вот так выглядит экспортированное изображение в PNG формате со слоем прозрачности (на самом деле, это был Tiff, но роли это не играет никакой):

Теперь нужно отметить, что когда я рисовал маску прозрачности, то на ней были плавные переходы (то есть, не грубо 1 и 0, а 1 по центру, а по краям мягкие перепады с 1 до 0). Это позволило создать полупрозрачные пиксели, которые на этом изображении показывают, как плавно вокруг кота картинка переходит в прозрачность.

Так плавно мы подошли к следующей обширной теме, которую я постараюсь осветить в ближайшее время — к маскам и первому уроку текстурирования.

Спасибо за внимание, жду ваших пожеланий и корректировок =)

Эпическая битва за пиксели: как участники Reddit воевали за Место на графическом полотне

10 апреля, 2017, 13:00

8709

Нельзя сказать, чтобы 100% корпоративных шуток на День юмора были удачными и вовлекающими. В этом году администрация Reddit запустила Место — интерактивное графическое полотно размером 1000 на 1000 пикселей, и посвященный ему раздел. Предполагалось, что участники сообщества совместно разрисуют это полотно, как им понравится. Но в результате это переросло в битву за Место, местами переходящую в философское противостояние. Обычное упражнение в рисовании превратилось в захватывающий социальный эксперимент. Историю от начала и до конца задокументировал блог Sudoscript.

Правила работы Места были простыми. Каждый участник мог выбрать один пиксель из 16 цветов и поместить его в любое место полотна. Можно было размещать сколько угодно пикселей, но между каждым размещением нужно было подождать 5 минут. Через 72 часа эти очень простые правила привели к созданию удивительного коллективного полотна:

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

Во время создания происходили бесчисленные драмы, идеи, драки, даже войны. Но в целом, история Места — это вечная драма о трех силах, необходимых человечеству, чтобы творить и созидать, и развивать технологии.

Создатели

Сначала были создатели. Это были художники, для которых пустое полотно казалось возможностью, перед которой нельзя устоять. Первые художники располагали пиксели случайно, просто чтобы посмотреть, что можно сделать. За первые минуты появились первые зарисовки. Грубые и незрелые, они напоминали наскальную живопись пещерных людей.

Создатели сразу разглядели, какую силу и потенциал скрывают пиксели. Но работая поодиночке, они могли размещать один пиксель каждые 5 или 10 минут. Создание значимого рисунка заняло бы вечность. Чтобы нарисовать что-то, они должны были работать сообща.

Тогда кому-то пришла блестящая идея использовать для рисования сетку, которая накладывалась бы на рисунок и показывала, где должны располагаться следующие пиксели. Первым через этот эксперимент прошел известный мем англоязычного интернета Dickbutt. И жители Места принялись за работу: Dickbutt материализовался буквально за минуты в нижнем левом углу полотна. На Месте появилось первое создание коллективного творчества.

Затем, когда создатели слегка опьянели от возможностей, появился покемон Чармандер, у которого вместо ноги довольно скоро нарисовался член. И начался первый конфликт: некоторые создатели старательно пытались прибрать обидные рисунки, но другие настойчиво дорисовывали скабрезности.

Создатели столкнулись с фундаментальной философской проблемой: слишком много свободы ведет к хаосу. Творчество нуждается в ограничителе так же, как в свободе.

Защитники

В Месте появился другой тип пользователей, которые должны были справиться именно с этой проблемой. Но начинали они с более примитивных целей: завоевания мира. Поделившись на фракции по цветам, они попытались захватить Место. Одним из первых стал Синий угол. Он зародился в правом нижнем углу и расползался подобно чуме.

Другая группа основала Красный угол на противоположной стороне полотна, они склонялись к политической левизне. Еще одна группа под названием Зеленая Сетка красили полотно через пиксель — зеленые клетки перемежались белыми. Поскольку им доводилось закрашивать только половину пикселей, они работали эффективнее, чем другие фракции.

Прошло совсем немного времени, прежде чем фракции столкнулись с создателями. Чармандер стал одним из первых объектов сражения. Синий угол начал зарисовывать покемона синими пикселями, и Создатели переключились от «фаллических войн» (кто больше членов нарисует) к более серьезной угрозе. Они приняли бой, зарисовывая каждый синий пиксель своим. Но количественный перевес был не в их пользу.

Так что Создатели сдались на милость победителя и каким-то образом это задело чувства Синих. Среди них появились сомневающиеся в своей роли в мире Места. «Наша волна неизбежно накроет весь мир, от края до края, должны ли мы проявлять милость к другому искусству, с которым сталкиваемся», — спросил один из группы.

С этим вопросом столкнулась каждая из фракций. И все решили сохранять другие рисунки. Так что цветные волны начали обтекать вокруг рисунков, не закрашивая их.

Это был поворотный пункт. Бессмысленные цветные фракции стали полезными Защитниками.

Но это еще не счастливый конец

Наконец-то ненасытные цветные волны были остановлены и Создатели могли вернуться к творчеству. Рисунки становились все сложнее. Появились тексты, написанные пикселями.

Создатели объединялись в небольшие группы, создавая подразделы на Reddit, где можно было обсуждать черновики рисунков и стратегию. Одна из самых успешных групп нарисовала панель задач в стиле Windows 95. Другая зарисовывала Место сердечками.

Затем появился и Ван Гог.

Но все было не так просто. Защитники превращались в тиранов, диктующих стиль рисунков. Они решали, что можно рисовать, а что нет. Фракции начали делить пользователей между собой, призывая принимать стороны, Создатели тем временем ожидали одобрения новых идей.

Битвы между Защитниками становились все жестче. Один стример из Twitch призвал своих фоловеров атаковать Синих. Разрабатывались стратегии битв. Были даже провокации: поклонники одного цвета сами рисовали пиксели цвета противника у себя на территории, чтобы иметь оправдание для ответной атаки. Пока фракции воевали между собой, Создатели обнаружили, что места для новых рисунков не осталось.

Начали возникать флаги разных стран — при росте они неизбежно натыкались друг на друга. Например, на «ничейной» территории столкнулись флаги Германии и Франции.

Казалось, этот мирок оказался на грани войны. Все стороны пытались решить конфликт дипломатическим путем. Лидеры Создателей и Защитников общались в чатах, но обычно все заканчивалось взаимными обвинениями.

Место нуждалось в злодее, против которого могли бы объединиться все остальные.

Разрушители

Пришла пустота.

Началось это с 4chan — самого известного имиджборда в мире. Населяющие его пранкеры заметили, что происходит на Reddit и не смогли пройти мимо. Они стали Пустотой.

В центре Места стало разрастаться пятно из черных пикселей. Сначала фракции попробовали заключить с Пустотой пакт методами дипломатии. Но они провалились, Пустота действовала по другому. Она не была одним из Защитников, не охраняла искусство. Ее последователи проповедовали, что Пустота пожрет все. Они не формировали сторон, они лишь хотели закрасить весь мир черным.

Это был именно тот пинок под зад, которого не хватало Месту. Перед общей угрозой Создатели и Защитники снова объединились, чтобы спасти искусство. Но смысл Пустоты был не просто в разрушении, каким-то образом она дала начало новому, лучшему искусству.

К примеру, место в центре было одним из самых оспариваемых среди создателей. И когда оно почернело, Защитники поняли, что придется придумать идею получше, которая вовлекла бы достаточно последователей, чтобы сразиться с черным монстром. Одной из таких идей стал флаг США.

В последний день существования Места в нем сформировалась самая невероятная коалиция, призванная сражаться с Пустотой — там были поклонники Трампа и противники Трампа, республиканцы и демократы, американцы и европейцы.

Вскоре эксперимент Reddit завершился. На финальном полотне не было ни единого раситского рисунка, ни одного символа ненависти.

Автор блога сравнивает то, что случилось, с индуистским принципом трех божеств. Брахма-Созидатель, Вишна-Хранитель и Шива-Разрушитель. Без участия каждого из них вселенная не сможет существовать. Самым бесхитростным образом Reddit подтвердил, что для процесса созидания нужны все три силы.

Финальное полотно выставлено на Reddit — здесь можно рассмотреть мельчайшие детали.

Рекламный трюк или улучшение качества изображения

Главный редактор — Владимир Крылов
Зам. главного редактора — Сергей Гагарин

В последнее время фирмы, продающие большие светодиодные экраны, особенно в Юго-Восточной Азии и в России, в целях продвижения своего товара на рынке заявляют о том, что их видеэкраны используют технологию “виртуального пикселя”, которая позволяет удвоить фактическое разрешение экрана, то есть видеоэкран с обычным — реальным разрешением в пикселях 320х240, превращается в экран с виртуальным разрешением 640х480.

При этом все ведущие компании – Daktronics, Optotech, Barco, Lighthouse и др. в настоящее время бьются за создание новых моделей с большим разрешением в реальных пикселях. и во всех своих новых моделях отказались от использования технологии виртуального пикселя, хотя в предыдущих моделях, они также заявляли, о ее использовании. Итак, почему же ведущие разработчики и производители светодиодных экранов от технологии виртуального пикселя отказываются?

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

К сожалению, оказывается, что в большинстве случаев виртуальный пиксель — ловкий маркетинговый прием. Новизны в этом подходе нет, а небольшие преимущества уравновешиваются недостатками, о которых, разумеется, поставщики светодиодных экранов предпочитают умолчать. Давайте разберемся.

Виртуальный пиксель видеоэкрана

Возьмем видеоэкран с пикселями, состоящими из световых элементов (неважно, что это за элементы – светодиоды, лампочки накаливания или что-либо еще) расположенных в виде квадрата. Каждый из световых элементов излучает свет определенной длины волны (или узкого диапазона), то есть, проще говоря, каждый элемент светит своим цветом. Например, пиксель может выглядеть как на Fig.1.

При выводе какого-нибудь изображения на видеоэкран в нормальном режиме каждый пиксель исходного изображения отображается на соответствующий пиксель экрана. Например, если пиксель в левом верхнем углу изображения имел цвет R,G,B, то пиксель (в указанной выше конфигурации) в левом верхнем углу экрана будет выглядеть так, как на Fig.2. При этом предполагается, что световые элементы в пикселе уже сбалансированы по яркости и никакой дополнительной коррекции не делается.

В режиме же виртуального пикселя каждый пиксель исходного изображения отображается уже не на пиксель видеоэкрана, а на световой элемент (то есть на часть пикселя). При этом исходное изображение берется удвоенного разрешения, чтобы каждый пиксель изображения в точности соответствовал какому-либо одному световому элементу экрана. Например, 4 пикселя левого верхнего угла исходного изображения Fig.3, отобразятся в результате виртуализации на один пиксель видеоэкрана следующим образом Fig.4.

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

Пусть исходное изображение (а оно имеет удвоенное разрешение по сравнению с пиксельным разрешением видеоэкрана) выглядит так: на черном фоне проведена горизонтальная линия зеленого цвета толщиной в 1 пиксель. При выводе на экран картина получается такой: если эта линия находится в четном ряду пикселей, то на экране получается соответствующая зеленая линия, если же линия находится в нечетном ряду, то линии на экране нет, то есть видеоэкран остается черным. Общими словами проблема выражается в том, что на мелких деталях и на резких переходах цвета появляются цветовые искажения (артефакты), которые отсутствовали на исходном изображении.

Есть ли у этой технологии достоинства? Да. Она позволяет в некоторых случаях немного повысить детализацию изображения (правда, ценой внесения цветовых искажений в эти самые детали). Обычно это может быть полезно для изображений с плавными цветовыми переходами или же, наоборот, если изображение настолько пестрое, что цветовые искажения на переходах просто не будут заметны. В некотором смысле можно говорить только об удвоении разрешения для черного цвета, так как только при черном цвете все световые элементы выглядят одинаково, то есть, не светят совсем.

Сказанное выше относилось к простейшей реализации виртуального пикселя. Этот подход может быть модифицирован. Обычно такие модификации идут по пути вывода некоторого усредненного значения. Усреднение может быть пространственным или временным. При простом пространственном усреднении вместо четырех пикселей исходного изображения на экран выводится один пиксель, получающийся по какому-то алгоритму усреднения (например, просто среднее арифметическое исходных пикселей).

При простом временном усреднении в одном пикселе видеоэкрана выводится с большей частотой (например, с удвоенной или учетверенной) один из четырех пикселей исходного изображения. Возможны также комбинации этих подходов. Вопрос об “оптической эквивалентности” (т.е. отличается ли для человеческого глаза изображение на экране при использовании разных подходов) пространственного и временного усреднения, к сожалению, в настоящий момент нерешен.

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

Если же отключить виртуальный пиксель невозможно, а артефакты слишком явно бросаются в глаза, то можно пытаться бороться с артефактами, немного размывая (например, фильтрами типа “blur”) выводимые на экран изображения (что, конечно, лишает смысла применение технологии виртуального пикселя, поскольку при размытии утрачиваются детали, поэтому здесь главное – не перестараться).

По своему смыслу различные варианты виртуального пикселя у разных производителей являются реализациями некоторых алгоритмов сглаживания (интерполяции) изображений “в железе”. Однако ввиду того, что не существует универсальных алгоритмов интерполяции (разные типы изображений требуют разных алгоритмов), использование виртуального пикселя во всех случаях нецелесообразно.

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

Все вышесказанное относится к видеоэкранам с равномерным заполнением полотна экрана световыми элементами, то есть когда расстояние между всеми световыми элементами одного цвета (в том числе и разных пикселей) одно и то же по всему экрану. Иначе говоря, световые элементы одного пикселя не сгруппированы вместе таким образом, что между пикселями остаются большие промежутки.

В случае сгруппированных пикселей также есть алгоритмы виртуализации, при этом исходное изображение может потребоваться еще большего (например, утроенного) разрешения по сравнению с пиксельным разрешением видеоэкрана, однако это, конечно, не означает, что разрешение экрана возрастает в соответствующей пропорции (в три раза и более). Также можно придумать алгоритмы реализации виртуального пикселя для случаев, когда световые элементы расположены не в виде прямоугольного массива (например, пиксель может состоять из 3 элементов R,G,B, расположенных в виде равностороннего треугольника).

Кроме того, встречаются ошибочные реализации виртуального пикселя, когда теряется еще больше информации, что приводит к совершенно неприемлемым результатам. Собственно, технология виртуального пикселя в больших электронных видеоэкранах достаточно старая. Она ведет свое происхождение от ламповых экранов, где она называлась “режим лампочек” (bulb-mode). Разрешение ламповых экранов было значительно меньше разрешения современных светодиодных экранов, а размер световых элементов и пикселей – значительно больше, поэтому предпринимались попытки сгладить выводимое на видеоэкран изображение. Все вышесказанное в полной мере относится и к этому случаю.

Что такое пиксель? А как рассчитываются пиксели?

Увеличьте изображение на экране достаточно далеко, и, в конце концов, вы увидите маленькие квадратики разных цветов. Каждый отдельный квадрат называется пикселем.

Пиксель получается из элементов изображения фразы. Каждый элемент изображения служит строительным блоком в сетке экрана. Каждый пиксель имеет уникальное местоположение, обозначенное набором координат. Он также способен передавать миллионы цветов!

Количество пикселей в изображении или отображении определяет его внешний вид.

Экраны с сеткой пикселей с высокой плотностью пикселей делают невозможным обнаружение отдельных точек невооруженным глазом, что приводит к резкому и четкому изображению.

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

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

1.Как рассчитать пиксели

Разрешение дисплея показывает, сколько пикселей содержится на экране. Итак, дисплей 1080×1920 — это просто сетка высотой 1080 пикселей и шириной 1920 пикселей. Чтобы вычислить количество пикселей на дисплее, умножьте высоту сетки на ширину.

В случае дисплея 1080×1920 в сетке всего 2 073 600 пикселей!

2. Как пиксели создают цвета

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

Источник

Количество битов, используемых для представления пикселя, определяет, сколько цветов он может отображать.

Итак, 8-битный пиксель позволяет отображать только 256 цветов, а 24-битный пиксель отображает 16 777 216 цветов!

3. Как пиксели определяют разрешение дисплея

Разрешение измеряется в PPI (пикселях на дюйм), поэтому это измерение плотности пикселей в данном изображении или дисплее.И PPI, и размер изображения могут влиять на разрешение.

Источник

Если плотность пикселей слишком низкая, это может вызвать некоторые реальные проблемы …

4. Важность плотности пикселей

Плотность пикселей помогает определить четкость изображения.

Источник

Плотность пикселей изображения должна соответствовать размеру этого изображения. Если, например, вы показываете большое изображение, вам потребуется более высокий PPI, чтобы избежать пикселизации.

5. Важность глубины пикселя

Глубина пикселя описывает количество данных, которые могут храниться в каждом отдельном квадрате.Количество битов, представляющих пиксель, определяет, сколько цветов он может отображать.

Источник

Чем больше цветов может отобразить пиксель, тем лучше будет оттенок фотографии и тем более реалистичным она будет выглядеть. Качество изображения определяется не только количеством пикселей в изображении, но и глубиной этих пикселей.

Понимание пикселей и их использования является обязательным для современных дизайнеров. Это строительные блоки всего, что мы видим в цифровом виде. Вы будете их использовать несколько раз:

1.Когда вы проектируете для конкретных устройств

, вам необходимо понимать как характеристики экрана, так и пиксели CSS, чтобы создавать блестящие, ориентированные на устройства дизайны. Это позволяет вам принимать разумные решения для проекта.

Разрешение и PPI устройства почти всегда указываются производителем. Вы также можете найти прямое сравнение устройств на сторонних веб-сайтах.

Однако в дизайне CSS-пиксели не менее важны. Это абстрактные (но все же связанные) единицы, используемые дизайнерами, которые напрямую не соответствуют обычным пикселям.В современных устройствах с экранами высокой плотности на пиксель CSS часто приходится два пикселя устройства.

2. Когда вы создаете адаптивный веб-сайт

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

Source

Каждый размер экрана будет представлять ваш веб-сайт немного по-своему.Вы заметите, что контент уменьшается и разбивается по-другому. В результате на небольших изображениях могут появиться пиксели. Обязательно запустите тесты для всех распространенных размеров и разрешений, чтобы убедиться, что сайт действительно пригоден для использования — на всех устройствах.

3. Когда вы пытаетесь улучшить качество изображения

Увеличение разрешения изображения или уменьшение размера может помочь увеличить PPI для зернистого изображения. Отображение меньшего количества пикселей — и большего количества данных для каждого пикселя — может помочь улучшить цвет, тон и вес изображения.Размер, плотность пикселей, глубина пикселей и цвет — все это параметры, которые могут резко изменить качество фотографии.

Если вам понравилось это руководство, продолжайте знакомство с этими терминами. A. Пикселизация: Когда пиксели растягиваются сверх своего предела, это явление может вызвать реальные проблемы. B. Градиент: При работе с цветами важно знать, как их смешивать для создания интересных эффектов.

Что такое пиксель? — Определение с сайта WhatIs.com

К

Пиксель (слово, образованное от слова «элемент изображения») — это основная единица программируемого цвета на дисплее компьютера или в компьютерном изображении.Думайте об этом как о логической, а не о физической единице. Физический размер пикселя зависит от того, как вы установили разрешение экрана дисплея. Если вы установили максимальное разрешение дисплея, физический размер пикселя будет равен физическому размеру шага точки (назовем его просто размером точки) дисплея. Если, однако, вы установили разрешение на что-то меньшее, чем максимальное разрешение, пиксель будет больше, чем физический размер точки экрана (то есть пиксель будет использовать более одной точки).

Конкретный цвет, который описывает пиксель, представляет собой смесь трех компонентов цветового спектра — RGB. Для указания цвета пикселя выделяется до трех байтов данных, по одному байту для каждого основного компонента цвета. В системе истинного цвета или 24-битной цветовой системе используются все три байта. Однако многие системы цветного отображения используют только один байт (ограничивая отображение 256 различными цветами).

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

Резкость изображения на экране иногда выражается в dpi (точках на дюйм). (В этом случае термин точка означает пиксель, а не точку, как в случае с шагом точки .) Число точек на дюйм определяется как физическим размером экрана, так и настройкой разрешения. Данное изображение будет иметь более низкое разрешение — меньше точек на дюйм — на большом экране, поскольку те же данные будут распределены по большей физической области.На экране того же размера изображение будет иметь более низкое разрешение, если настройка разрешения будет ниже — сброс с 800 на 600 пикселей на горизонтальную и вертикальную линию до 640 на 480 означает меньше точек на дюйм на экране и изображение будет менее резким. . (С другой стороны, отдельные элементы изображения, такие как текст, будут иметь больший размер.)

Пиксель заменил более раннее сжатие элемента изображения, pel .

Последнее обновление: июль 2015 г.

Продолжить чтение о пикселях Конвертер

пикселей в дюймы (пикселей в дюймы) Конвертер

пикселей в дюймы (пикселей в дюймы)

С помощью этого онлайн-конвертера пикселей очень легко преобразовать пиксели в дюймы (дюймы) .Введите количество пикселей (пикселей) и значение разрешения для расчета.

Сколько дюймов в пикселе?

Предполагая, что плотность пикселей составляет 96 точек на дюйм, получается 96 пикселей на дюйм. Чем 1 пиксель = (1/96) дюйма. Наконец, мы получаем ответ: — это 0,01041666666667 дюймов в пикселе .

Как пересчитать пиксели в дюймы

dpi - это плотность пикселей или точек на дюйм.
96 точек на дюйм означает 96 пикселей на дюйм.

dpi = 96 пикселей / дюйм

Следовательно, один пиксель равен
1 пиксель = 1 дюйм / 96
1 пиксель = 0.01041666666667 дюйм
 
Таблица преобразования

пикселей в дюймы для различных разрешений

1 пиксель в значений диаграммы преобразования для различных значений плотности пикселей (dpi).

9013 0,09 0,09 0,09 0,09 0,09 0,09 0,052631579 дюйма 043478261 дюйм 0,035714286 дюймов 9013 9013 9013 4113 4 дюйма на дюйм 0,02173913 дюймов 9013 9013 9013 9013 9018 0,018181818 дюймов 90 9013 9013 901 901 0,015625 дюйма 3 дюймов 0014705882 дюймов дюймов 9013 9013 9013 908 0,01369863 дюйма 901987013 дюймов 2 дюймов 011627907 дюймов 9011 9011 9011 9011 9011 9011 9011 0,010989011 дюймов 901326316 дюймов 9013 9013 9010 9013 9010 9013 9010 0,01 дюйма
Плотность пикселей дюйма
1 dpi 1 дюйм
2 dpi 0,5 дюйма
3 dpi 0,333 9013 9013 9013 909 0,29 9013
5 dpi 0.2 дюйма
6 точек на дюйм 0,166666667 дюймов
7 точек на дюйм 0,142857143 дюймов
8 точек на дюйм 0,125 дюйма 0,1 дюйма
11 точек на дюйм 0,0091 дюйма
12 точек на дюйм 0,083333333 дюйма
13 точек на дюйм 0,0767 дюймов
0,0767071428571 дюйм
15 точек на дюйм 0,066666667 дюймов
16 точек на дюйм 0,0625 дюймов
17 точек на дюйм 0,058823529 дюймов
20 точек на дюйм 0,05 дюйма
21 точек на дюйм 0,047619048 дюймов
22 точек на дюйм 0,045454545 дюймов
24 точки на дюйм 0,041666667 дюйм
25 точек на дюйм 0,04 дюйма
26 точек на дюйм 0,038461538 дюйм
0,038461538 дюйм
0,038461538 дюйм
29 точек на дюйм 0,034482759 дюймов
30 точек на дюйм 0,033333333 дюймов
31 точек на дюйм 0,032258065 дюймов
03125 дюймов
33 точек на дюйм 0,03030303 дюймов
34 точек на дюйм 0,0265 дюймов
35 точек на дюйм 0,028571429 дюймов
0,028571429 дюймов
0,027027027 дюймов
38 точек на дюйм 0,026315789 дюймов
39 точек на дюйм 0,025641026 дюймов
40 точек на дюйм 0,025 дюймов
47 точек на дюйм 0,021276596 дюймов
48 точек на дюйм 0,020833333 дюймов
49 точек на дюйм 0,020408163 дюймов
02 дюймов
51 точек на дюйм 0,019607843 дюймов
52 точек на дюйм 0,0169 дюймов
53 точек на дюйм 0,018867925 дюймов
56 точек на дюйм 0,017857143 дюймов
57 точек на дюйм 0,01754386 дюймов
58 точек на дюйм 0,017241379 дюймов
49153 дюймов
60 точек на дюйм 0,016666667 дюймов
61 точек на дюйм 0,0163 дюймов
62 точек на дюйм 0,016129032 дюймов
0,016129032 дюймов
65 точек на дюйм 0,015384615 дюймов
66 точек на дюйм 0,015151515 дюймов
67 точек на дюйм 0,014
69 точек на дюйм 0,0144
70 точек на дюйм 0,014285714 дюймов
71 точек на дюйм 0,014084507 дюймов
74 точек на дюйм 0,013513514 дюймов
75 точек на дюйм 0,013333333 дюймов
76 точек на дюйм 0,013157895 дюймов
78 точек на дюйм 0,012820513 дюймов
79 точек на дюйм 0,012 0,012195122 дюймов
83 точек на дюйм 0,012048193 дюймов
84 точек на дюйм 0,011
85 точек на дюйм 0,011764706 дюймов
87 точек на дюйм 0,011494253 дюймов
88 точек на дюйм 0,011363636 дюймов
89 точек на дюйм 0,011235955 дюймов
92 точек на дюйм 0,010869565 дюймов
93 точек на дюйм 0,010752688 дюймов
94 точек на дюйм 0,010638298 дюймов
96 точек на дюйм 0,010416667 дюймов
97 точек на дюйм 0,010309278 дюймов
98 точек на дюйм 0,010204082 дюймов
0,00139 0,00952381 106 9040 0,0059 дюймов 12 дюймов 1 дюймов 0,00 122 122 0,008130081 дюйм 8 дюймов 127 901374016 дюймов дюймов 0,007575758 дюймов 9013 дюймов 901 901 901 0,006756757 дюймов дюймов 9016 0,006410256 дюймов 0,00140 901352381 дюйм дюймов 9013 0,005780347 дюймов 9013 901 9013 901 9013 0,005076142 дюйма
Плотность пикселей дюймов
101 dpi 0,009 дюймов
102 dpi 0.009803922 дюйм
103 dpi 0,009708738 дюйм
104 dpi 0,009615385 дюйм
105 dpi 0,00952381 дюйм
94 дюйма
108 точек на дюйм 0,00
109 точек на дюйм 0,00
110 точек на дюйм 0.0009 дюймов
111 точек на дюйм 0,00

09 дюймов

112 точек на дюйм 0,008
113 точек на дюйм 0,008849558 дюймов
0,008695652 дюйма
116 точек на дюйм 0,00862069 дюймов
117 точек на дюйм 0,008547009 дюймов
118 точек на дюйм 0.008474576 дюйм
119 dpi 0,008403361 дюйм
120 dpi 0,008333333 дюйм
121 dpi 0,008264463 дюйм
0,008264463
124 точек на дюйм 0,008064516 дюймов
125 точек на дюйм 0,008 дюйма
126 точек на дюйм 0,007
128 точек на дюйм 0,0078125 дюймов
129 точек на дюйм 0,007751938 дюймов
130 точек на дюйм 0,0076
133 точек на дюйм 0,007518797 дюймов
134 точек на дюйм 0,007462687 дюймов
135 точек на дюйм 0.007407407 дюймов
136 точек на дюйм 0,007352941 дюймов
137 точек на дюйм 0,00729927 дюймов
138 точек на дюйм 0,007246377 дюймов
9013 9013 0,007142857 дюймов
141 dpi 0,0070 дюймов
142 dpi 0,007042254 дюймов
143 dpi 0.0069
144 точек на дюйм 0,006944444 дюймов
145 точек на дюйм 0,006896552 дюймов
146 точек на дюйм 0,006849315 дюймов
149 точек на дюйм 0,006711409 дюймов
150 точек на дюйм 0,006666667 дюймов
151 точек на дюйм 0.006622517 дюймов
152 точек на дюйм 0,006578947 дюймов
153 точек на дюйм 0,006535948 дюймов
154 точек на дюйм 0,0064
157 точек на дюйм 0,006369427 дюймов
158 точек на дюйм 0,006329114 дюймов
159 точек на дюйм 0.006289308 дюймов
160 точек на дюйм 0,00625 дюймов
161 точек на дюйм 0,00621118 дюймов
162 точек на дюйм 0,00617284 дюймов 9013 9013 9013 9013 0,006097561 дюйм
165 точек на дюйм 0,006060606 дюймов
166 точек на дюйм 0,006024096 дюймов
167 точек на дюйм 0,005988024 дюймов
169 точек на дюйм 0,005
170 точек на дюйм 0,005882353 дюймов
171 точек на дюйм 0,005847953 дюймов
174 точек на дюйм 0,005747126 дюймов
175 точек на дюйм 0,005714286 дюймов
176 точек на дюйм 0.005681818 дюймов
177 точек на дюйм 0,005649718 дюймов
178 точек на дюйм 0,005617978 дюймов
179 точек на дюйм 0,005586555 дюймов
0,005524862 дюйм
182 dpi 0,005494505 дюйм
183 dpi 0,005464481 дюйм
184 dpi 0.005434783 дюйм
185 dpi 0,005405405 дюйм
186 dpi 0,005376344 дюйм
187 dpi 0,00534759414 дюйм
0,0052 дюймов
190 точек на дюйм 0,005263158 дюймов
191 точек на дюйм 0,005235602 дюймов
192 точек на дюйм 0.005208333 дюймов
193 точек на дюйм 0,005181347 дюймов
194 точек на дюйм 0,005154639 дюймов
195 точек на дюйм 0,005128205 0,005128205 0,005128205
198 точек на дюйм 0,005050505 дюймов
199 точек на дюйм 0,005025126 дюймов
200 точек на дюйм 0.005 из
дюймов 9011 0,0040 0,0040 909 0,003968254 дюймов 8 дюймов 9 дюймов 9 дюймов 003 дюймов 1004 0,003831418 дюйм 0,003412969 дюймов
Плотность пикселей дюймов
201 точек на дюйм 0,004975124 дюймов
202 точек на дюйм 0,004950495 дюймов
0,00139 дюймов на дюйм 9013 9013 901 9019 9019 9019 9019 9019 901
205 точек на дюйм 0,004878049 дюймов
206 точек на дюйм 0,004854369 дюймов
207 точек на дюйм 0.004830918 дюймов
208 точек на дюйм 0,004807692 дюймов
209 точек на дюйм 0,004784689 дюймов
210 точек на дюйм 0,004761905 дюймов 0,004716981 дюйм
213 точек на дюйм 0,004694836 дюймов
214 точек на дюйм 0,004672897 дюймов
215 точек на дюйм 0.004651163 дюймов
216 точек на дюйм 0,00462963 дюймов
217 точек на дюйм 0,004608295 дюймов
218 точек на дюйм 0,004587156 дюймов
0,004545455 дюйм
221 dpi 0,004524887 дюйм
222 dpi 0,004504505 дюйм
223 dpi 0.004484305 дюймов
224 точек на дюйм 0,004464286 дюймов
225 точек на дюйм 0,004444444 дюймов
226 точек на дюйм 0,004424779 дюймов
9013 0,004385965 дюймов
229 точек на дюйм 0,004366812 дюймов
230 точек на дюйм 0,004347826 дюймов
231 точек на дюйм 0.004329004 дюйма
232 точек на дюйм 0,004310345 дюймов
233 точек на дюйм 0,0042
234 точек на дюйм 0,004273504 дюймов
0,004273504
0,004237288 дюймов
237 точек на дюйм 0,004219409 дюймов
238 точек на дюйм 0,004201681 дюймов
239 точек на дюйм 0.0041841 дюйм
240 точек на дюйм 0,004166667 дюймов
241 точек на дюйм 0,004149378 дюймов
242 точек на дюйм 0,004132231 дюймов
241 0,004098361 дюйм
245 dpi 0,004081633 дюйм
246 dpi 0,004065041 дюйм
247 dpi 0.004048583 дюймов
248 точек на дюйм 0,004032258 дюймов
249 точек на дюйм 0,004016064 дюймов
250 точек на дюйм 0,004 дюймов
0,004 дюймов
253 точек на дюйм 0,003952569 дюймов
254 точек на дюйм 0,003
255 точек на дюйм 0,003
0,003
дюймов
257 точек на дюйм 0,0038
258 точек на дюйм 0,003875969 дюймов
259 точек на дюйм 0,003861004 дюймов 259 точек на дюйм 0,003861004 дюймов
262 dpi 0,003816794 дюйм
263 dpi 0,003802281 дюйм
264 dpi 0.003787879 дюймов
265 точек на дюйм 0,003773585 дюймов
266 точек на дюйм 0,003759398 дюймов
267 точек на дюйм 0,003745318 дюймов 0,003717472 дюймов
270 точек на дюйм 0,003703704 дюймов
271 точек на дюйм 0,0036

дюймов
272 точек на дюйм 0.003676471 дюйм
273 dpi 0,003663004 дюйм
274 dpi 0,003649635 дюйм
275 dpi 0,003636364 дюйм
901 0,003610108 дюймов
278 точек на дюйм 0,003597122 дюймов
279 точек на дюйм 0,003584229 дюймов
280 точек на дюйм 0.003571429 дюймов
281 точек на дюйм 0,003558719 дюймов
282 точек на дюйм 0,003546099 дюймов
283 точек на дюйм 0,00353356912 дюймов
0,003508772 дюймов
286 точек на дюйм 0,003496503 дюймов
287 точек на дюйм 0,003484321 дюймов
288 точек на дюйм 0.003472222 дюймов
289 точек на дюйм 0,003460208 дюймов
290 точек на дюйм 0,003448276 дюймов
291 точек на дюйм 2
291 точек на дюйм 2
294 точек на дюйм 0,003401361 дюймов
295 точек на дюйм 0,003389831 дюймов
296 точек на дюйм 0.003378378 дюймов
297 точек на дюйм 0,003367003 дюймов
298 точек на дюйм 0,003355705 дюймов
299 точек на дюйм 0,003344483 9013 9013 9013 9033 Таблица преобразования

пикселей в дюймы

Px в дюймы таблица преобразования значений для 96 dpi.

7 дюйма 667 дюйм 7 дюйм 4140 7 дюйм 67 дюйм 7 дюймов 7 дюймов 68132 67 дюйма 760416667 дюйм 667 дюйм 9013 0,8125 дюйм 7 дюйм 87132 6667 дюйма 3333 дюйма 7 дюймов 67 дюймов
пикселей дюймов
1 пиксель 0.010416667 в
2 пикс. 0,020833333 дюймах
3 пикс. 0,0625 дюйма
7 пикселей 0,072
8 пикселей 0,083333333 дюйма
9 пикселей 0,09375 дюйма
10104166667 дюйм
11 пиксель 0,114583333 дюйм
12 пиксель 0,125 дюйм
13 пиксель 0,135416667 дюйм
149 пиксель 9013 9013 9013 9045 0,15625 дюйма
16 пикселей 0,166666667 дюйма
17 пикселей 0,177083333 дюйма
18 пикселей 0,1875 дюйма
199 0См 0,25 дюйма
25 пикселей 0,260416667 дюйма
26 пикселей 0,270833333 дюйма
27 пикселей 0,28125 пикселей
289 пикселей2
29 пикселей 0,302083333 дюйм
30 пикселей 0,3125 дюйм
31 пиксель 0,322
9013 9013 0,34375 дюйм
34 пикселя 0,354166667 дюйм
35 пиксель 0,364583333 дюйм
36 пиксель 0,375 дюйм
379 пиксель 901.385416667 дюймов
38 пикселей 0,395833333 дюйма
39 пикселей 0,40625 дюймов
40 пикселей 0,416666667 дюймов
9013 9013 9013 9013 9013 0,4375 дюйм
43 пиксель 0,447
44 пиксель 0,458333333 дюйм
45 пиксель 0,46875 дюйм
469 пиксель
469 пиксель47
47 пиксель 0,489583333 дюйм
48 пиксель 0,5 дюйм
49 пиксель 0,510416667 дюйм
9013 9013 9013 9013
509 0,53125 дюйм
52 пикселя 0,541666667 дюйм
53 пиксель 0,552083333 дюйм
54 пикс 0,5625 дюйм
55572
56 пикселей 0,583333333 дюймов
57 пикселей 0,59375 дюймов
58 пикселей 0,604166667 дюймов
9013 9013 9013 9013 9 0,625 дюйм
61 пиксель 0,635416667 дюйм
62 пиксель 0,645833333 дюйм
63 пиксель 0,65625 дюйм
649 пиксель
649666666667 дюймов
65 пикселей 0,677083333 дюймов
66 пикселей 0,6875 дюймов
67 пикселей 0,697
9013 9013 9013 9013 0,71875 дюйма
70 пикселей 0,72
71 пикселей 0,739583333 дюйма
72 пикселей 0,75 дюйма
73 пикселей
74 пиксель 0,770833333 дюйм
75 пиксель 0,78125 дюйм
76 px 0,7
79 пикселей 0,822
80 пикселей 0,833333333 дюйм
81 пиксель 0,84375 дюйм
829
829854166667 дюймов
83 пикселей 0,864583333 дюймов
84 пикселей 0,875 дюймов
85 пикселей 0,885416667 дюймов
9013 9013 9013 9013 0, дюйма
88 пикселей 0,
89 пикселей 0,
90 пикселей 0,9375 дюйма
92 пикселей 0,958333333 дюймов
93 пикселей 0,96875 дюймов
94 пикселей 0,97
9013 1 из
9013 9129 7 дюйм 117 67 дюймов 121 пикселей 1,270833333 дюйм 667 дюйм 3125 дюймов 7 дюймов 67 дюйм 5 дюймов 7 дюймов 159375 дюймов 6875 дюйм 7 дюйм 179 667 дюймов 9013 9013 9013 1,833333333 дюйм Дюйм 1.3333 дюйм 7 дюйм 96875 дюйм 67 дюйм
пикселей дюймов
97 пикселей 1,010416667 дюймов
98 пикселей 1,020833333 дюймов
99 пикселей 1.03125 дюйм
100 пикселей 1,041666667 дюйм
101 пиксель 1,052083333 дюйм
102 пиксель 1,0625 дюйм
10310 1,083333333 дюйм
105 пикселей 1,09375 дюйм
106 пикселей 1,104166667 дюйм
107 пикселей 1,114583333 дюйм
125 дюймов
109 пикселей 1,135416667 дюймов
110 пикселей 1,145833333 дюймов
111 пикселей 1,15625 дюймов
112 901 1,177083333 дюйм
114 пикселей 1,1875 дюйм
115 пикселей 1,197
116 пикселей 1.208333333 дюйм
1.20833333321875 дюймов
118 пикселей 1,22
119 пикселей 1,239583333 дюймов
120 пикселей 1,25 дюймов
123 пикселя 1,28125 дюйм
124 пиксель 1,2
125 пикс 1,302083333 дюйм 126
127 пикселей 1,322
128 пикселей 1,333333333 дюймов
129 пикселей 1,34375 1,34375
1309 1309 9013 9013 9013 1,364583333 дюйм
132 пикселя 1,375 дюйм
133 пиксель 1,385416667 дюйм
134 пиксель 1,395833333 дюйм
40625 дюймов
136 пикселей 1,416666667 дюймов
137 пикселей 1,427083333 дюймов
138 пикселей 1,4375 9013 9013 9013 9013 1409 9013 1.458333333 дюйм
141 пиксель 1.46875 дюйм
142 пиксель 1.47
143 пиксель 1.489583333 дюйм 144
145 пикселей 1,510416667 дюймов
146 пикселей 1,520833333 дюймов
147 пикселей 1,53125 дюймов
146
146 1,552083333 дюймов
150 пикселей 1,5625 дюймов
151 пикселей 1,572
152 пикселей 1,583333333 дюймов
154 пикселей 1.604166667 пикселей
155 пикселей 1,614583333 дюймов
156 пикселей 1,625 дюймов
9013 1,645833333 дюйм
159 пикселей 1,65625 дюйм
160 пикселей 1,666666667 дюйм
161 пикс 1,677083333 дюйм
163 пикс 1,697
164 пиксель 1,708333333 дюйм
165 px 1,71875 дюйм
9013 901
16169 1,739583333 дюйм
168 пикселей 1,75 дюйма
169 пикселей 1,760416667 дюйм
170 пикселей 1,770833333 дюйм
78125 дюймов
172 пикселей 1,7
173 пикселей 1.802083333 дюймов
174 пикселей 1,8125 дюймов
177 пикселей 1,84375 дюйм
178 пикселей 1,854166667 дюйм
179 пикселей 1,864583333 дюйм
186 пикселей 1.9375 дюйм
187 пикселей 1.947
188 пикс 1.958333333 дюйм
190 пикселей 1.97
191 пиксель 1.989583333 дюйм
192 пикселя 2 дюйма
9013 9013 901 9013 9013 901 7 дюйм 145833333 дюймов 2,1977 дюйм 67 дюйм 239583333 дюйм 9013 9013 909 9013 909 9013 2,2667 дюйм 2 7 дюйм 903 427083333 дюйм 7 дюйм 2.4767 дюйм 2 520833333 дюйм 9013 901 9013 901 9013 901 9013 901 2,5727 дюйм 614583333 дюйм 2,666666667 дюймов 7 дюймов 8333333 дюйм 67 дюйм 667 дюймов 667 269 269802083333 дюймов 7 дюймов 895833333 дюйм 6667 дюйм 2,3333 дюйм 901 9013 281 9013 903 903 902 2.9477 дюймов 67 пикселей 989583333 дюйм
пикселей дюймов
193 пикселей 2,010416667 дюймов
194 пикселей 2,020833333 дюймов
1953 1953 901 901 901 901 901 901 901 9013 901 197 пикселей 2.052083333 дюйм
198 пикселей 2,0625 дюйм
199 пикселей 2,072
200 пикселей 2,083333333 дюйм
2,104166667 дюйм
203 пикселя 2,114583333 дюйм
204 пиксель 2,125 дюйм
205 пикс 2,135416667 дюйм
207 пикселей 2,15625 пикселей
208 пикселей 2,166666667 дюймов
209 пикселей 2,177083333 дюймов 9013 9013 9013
212 пикселей 2,208333333 дюйм
213 пикселей 2,21875 дюйм
214 пикселей 2,22
216 пикселей 2,25 дюйма
217 пикселей 2,260416667 дюйм
218 пикселей 2,270833333 дюйм
221 пиксель 2,302083333 дюйм
222 пиксель 2,3125 дюйм
223 пиксель 2,322
3333333 дюймов
225 пикселей 2,34375 дюймов
226 пикселей 2,354166667 дюймов
227 пикселей 2,3645833331,3645833331
9013 9 2,385416667 дюйм
230 пикселей 2,395833333 дюйм
231 пиксель 2,40625 дюйм
232 пикселей 2,416666667 дюйм
234 пикселя 2.4375 дюйм
235 пиксель 2.447
236 пикс 2.458333333 дюйм
239 пикселей 2.489583333 дюйм
240 пикселей 2,5 дюйма
241 пиксель 2.510416667 241 пиксель
243 пикселя 2,53125 дюйм
244 пикселя 2,541666667 дюйм
245 пиксель 2,552083333 дюйм
248 пикселей 2,583333333 дюйм
249 пикселей 2,59375 дюйм
250 пикселей 2,604166667 дюйм
252 пикселя 2,625 пикселя
253 пикселя 2,635416667 дюйм
254 пиксель 2,645833333 256 пиксель 9013 9013 9040 9013
257 пикселей 2,677083333 дюймов
258 пикселей 2,6875 дюймов
259 пикселей 2,697
261 пиксель 2,71875 дюйм
262 пиксель 2,72
263 пиксель 2,739583333 дюйм
2,739583333 дюйм
2,760416667 дюймов
266 пикселей 2,770833333 дюймов
267 пикселей 2,78125 пикселей
268 пикселей 2,7
269 269 2,7
270 пикселей 2,8125 пикселей
271 пикселей 2,822
272 пикселей 2,833333333 дюймов
2,833333333 2.854166667 дюйм
275 пикселей 2.864583333 дюйм
276 пикселей 2,875 дюйм
277 пикселей 2.885416667 дюйм
279 пикселей 2, дюйм
280 пикселей 2,
281 пикс
284 пикселей 2.958333333 дюймов
285 пикселей 2.96875 пикселей
286 пикселей 2.97
288 пикселей 3 дюйма
Преобразователи связанных пикселей

© 2016-2021 www.pixelto.net

Учебное пособие по цифровой визуализации — базовая терминология


1. Базовая терминология

Ключ Концепты

цифровой изображения
разрешение
размеры пикселей
битовая глубина
динамический диапазон
размер файла
сжатие
форматов файлов

дополнительный чтение

ПИКСЕЛЕЙ РАЗМЕРЫ — горизонтальные и вертикальные измерения изображения, выраженные в пикселей.Размеры в пикселях можно определить, умножив оба ширина и высота в точках на дюйм. Цифровая камера также будет иметь пиксель размеры, выраженные в количестве пикселей по горизонтали и вертикали которые определяют его разрешение (например, 2048 на 3072). Рассчитать полученное dpi разделив размер документа на соответствующий размер в пикселях против которого он выровнен.

Пример:

Ан 8 » документ x 10 дюймов, сканированный с разрешением 300 dpi, имеет размер
пикселей: 2400 пикселей (8 x 300 dpi) на 3000 пикселей. (10 дюймов x 300 точек на дюйм).

Реальность Чек

Что — это размеры в пикселях фотографии 5×7 дюймов, отсканированной с разрешением 400 dpi?

Ответ (отметьте один):

Реальность Чек

Если страница 8,5 x 11 дюймов сканируется и имеет размер 2550 пикселей. x 3300, что такое dpi?

© 2000-2003 Библиотека / Исследовательский отдел Корнельского университета

resize — Что такое «пиксель»?

Если мой клиент попросил изображение с разрешением 1920×1080 пикселей, то — это первое, что нужно знать о его предполагаемом использовании.Это для Интернета, для печати или для того и другого?


В мире печати пиксель (или элемент изображения — [pict-el]) не имеет значения или определения. Пиксели никак не измерить. У них нет заранее определенного размера или единицы измерения, чтобы рассчитать их размер. Следовательно, это не термин «реального мира». Это строго цифровой термин и относится только к цифровому миру.

В широком смысле пиксель — это небольшое пятно на экране или мониторе, окрашенное светом с подсветкой (ЭЛТ), светодиодами, плазмой или другими технологиями.Каждое из этих маленьких разноцветных пятен (пикселей), собранных вместе, формирует изображение для человеческого глаза. Чтобы использовать аналогию с реальным миром, представьте, что это кирпичная стена … каждый пиксель будет кирпичом … изображение будет стеной.

Во многих приложениях и для многих людей 1 пиксель = 1 балл. (Adobe даже использует эту теорию.) Однако это тоже не совсем точное . Точка — это просто наименьшая единица измерения, используемая большинством дизайнеров в реальном мире, в отличие от цифрового мира.

Не существует такой вещи, как 1 дюйм = 72 пикселя или что-то даже отдаленно близкое. Каждый экран на Земле имеет разную плотность пикселей . Сколько пикселей умещается на дюйм, составляет полностью , в зависимости от плотности пикселей вашего монитора.

При работе в Photoshop для Интернета то, что вы вводите в поле Разрешение для нового документа, в значительной степени не имеет значения. Изображение, предназначенное для Интернета (или экрана), будет использовать его ширину и высоту в пикселях и вообще не будет ссылаться на настройку разрешения.См. Здесь для получения дополнительной информации о разрешении (ppi) и веб / экране: обязательно ли сохранять изображения с разрешением 72DPI для веб-дизайна? Для Интернета единственное отличие, которое предлагает поле разрешения, заключается в том, что оно позволяет создавать более детальные работы в Photoshop. Но при выводе поле разрешения игнорируется с использованием Сохранить для Интернета . Если вы используете Export , а не Save for Web , то разрешение используется для изменения ширины и высоты изображения в пикселях в зависимости от вашей операционной системы .Приложения Macintosh предполагают, что на каждом дюйме 72 пикселя, а приложение Windows предполагает, что на каждом дюйме 96 пикселей. Ни то, ни другое не является точным или правдивым, но инженерам пришлось использовать или . Таким образом, более высокое разрешение при Export приведет к увеличению ширины и высоты пикселей.

Теперь, когда печать встречается с пикселями ….. разрешение или точек на дюйм (DPI). DPI — это, по сути, плотность точек, которая создается фотонаборником (или изготовителем форм) при выводе печатных форм.Все печатаемые изображения должны пройти обработку полутонов . В дополнение к конкретному линейному экрану или строкам на дюйм (LPI), который определяет, сколько рядов точек будет напечатано. Плотность точек в полутонах определяет уровень детализации и качества самого изображения. Полутон с более высоким DPI и LPI будет выглядеть намного лучше, чем полутон с низким DPI и низким LPI. При поиске любой корреляции между экраном и печатью чаще всего пользователи находят небольшую логику, думая, что 1 пиксель = 1 точка.Это не совсем , но достаточно близко, чтобы не создавать проблем, если использовать это предположение. Здесь люди меняют термины PPI и DPI, думая, что это одно и то же. На самом деле они совсем не те, но думать, что они такие, нет большого вреда.

Для печати критически важно поле Разрешение в окне нового документа Photoshop. Чаще всего для печати изображений требуется разрешение 260 или выше. Это соответствует 260DPI, что является оптимальным значением для 175LPI (обычный линейный экран).Чаще всего используется 300dpi, потому что это хорошее, ровное, круглое число, которое нужно запомнить, и большее количество DPI никогда не является проблемой. Общий расчет фактически в 1,5 раза превышает LPI, равный DPI. Итак, 1,5 х 175 = 262,5. Таким образом, он округляется до 300 точек на дюйм.

Если вы знаете, как использовать …

  • Если это для Интернета или экрана, просто создайте новый документ с разрешением 1920×1080 пикселей и любым желаемым разрешением. Более высокое разрешение позволит вам более детально работать в Photoshop, но не изменит вывод изображения на веб / экран.Независимо от разрешения (ppi) изображение будет выводиться с разрешением 1920×1080 пикселей (при использовании «Сохранить для Интернета»).

  • Если изображение предназначено для печати или и того, и другого, я бы использовал Photoshop, чтобы дать мне представление о физическом размере при печати. Просто создайте новый документ с размерами 1920×1080 и вставьте 300 для разрешения.

Теперь переключите раскрывающееся меню «пикселей» на дюймы:

Используется внутренняя теория Adobe 1px = 1pt, которая ничуть не хуже любой другой.Но это дает вам общее представление о том, что изображение будет примерно 6,5 «x3,5». Затем я проконсультируюсь с клиентом, чтобы убедиться, что изображение размером 6,5×3,5 дюйма соответствует его потребностям.

Привет [клиент],

Изображение с разрешением 1920×1080 пикселей соответствует примерно 6,5×3,5 дюймов при печати. Вам подойдет такой размер? Следует ли мне увеличить размер для печати?

Спасибо!

Понимание пикселей и других единиц CSS · Документы WebPlatform

Винсент Харди, Сильвен Галино

Резюме

В этом руководстве рассматривается взаимосвязь между пикселями CSS и другими единицами измерения, а также между пикселями CSS и пикселями устройства.

Введение

Растущее число единиц длины CSS предоставило веб-авторам новую гибкость (см. Спецификацию значений и единиц CSS). Например, единица «rem» (root «em») позволяет использовать размер шрифта корневого элемента для изменения размера во всем документе.

Они помогают разработчикам размещать контент независимо от размера и разрешения дисплея.

Независимость дисплея: адаптация макета

Современный контент должен быть готов для различных сред просмотра: смартфоны, планшеты, большие мониторы или даже телевизионные экраны охватывают огромный диапазон размеров, соотношений сторон, плотности пикселей и расстояний просмотра.Доступен ряд инструментов, которые помогут разработчикам оптимизировать макет для лучшего взаимодействия, например чтобы избежать или минимизировать неудобную прокрутку.

Медиа-запросы и настройки области просмотра

Большинство разработчиков теперь знакомы с использованием медиа-запросов. Они позволяют применять правила CSS в зависимости от таких факторов мультимедиа, как размер или соотношение сторон. Их можно использовать для определения отдельных таблиц стилей для каждой целевой среды или для уточнения и адаптации основной таблицы стилей.

Понимание и настройка области просмотра дисплея особенно важно для мобильных клиентов, поскольку это позволяет вашему контенту соответствовать дисплею устройства пользователя.

Процентные единицы

Доступно с CSS1, проценты позволяют изменять размер элементов относительно их содержащего блока. Например, мы можем настроить тело документа так:

  body {
       ширина: 80%;
       максимальная ширина: 900 пикселей;
       маржа слева: авто;
       маржа-право: авто;
}
  

… чтобы тело было не более 900 пикселей и в противном случае занимало 80% ширины области просмотра.(Обратите внимание, что пиксели CSS не являются пикселями устройства; это будет подробно обсуждено позже)

Прочие относительные единицы полезного использования

Несколько других типов модулей CSS поддерживают адаптацию макета. В следующей таблице перечислены некоторые из них:

до 1 em — это вычисленное значение font-size для элемента, в котором он используется. Например, для элементов заголовка

размер шрифта можно установить равным 3em, а для тела — 1em, чтобы при всех условиях отображения текст заголовка был в 3 раза больше, чем основной.Следует отметить, что при использовании в качестве значения свойства font-size единица em относится к размеру шрифта родительского элемента. Таким образом, в нашем примере элемент

внутри

с размером шрифта: 2 em будет иметь текст в 6 раз больше, чем в теле.

из 1 ex — высота текущего шрифта по оси x. Высота по оси x обычно (но не всегда, например, если в шрифте отсутствует «x») равна высоте строчной буквы «x» На практике редко используется.Может использоваться для изменения размера встроенных изображений в соответствии с высотой x текущего шрифта для визуальной гармонии.
шасси 1 ch — продвижение символа «0» (ноль) в текущем шрифте. ‘Ch’ обозначает характер. Может использоваться для стилизации моноширинного текста или шрифта Брайля.
рем 1 rem — вычисленное значение свойства font-size для корневого элемента документа.

Эту единицу часто проще использовать, чем единицу em, потому что на нее не влияет наследование, как на единицы em.

Например, при заданном размере шрифта корневого элемента 20 пикселей установка размера шрифта 0,5 em для элементов
  • приведет к разрешению 10 пикселей для
  • первого уровня, но
  • второго уровня будет иметь шрифт 5 пикселей — размер. Установка font-size на 0,5 rem приведет к появлению элементов 10px
  • независимо от их уровня вложенности.
  • VW 1vw составляет 1% ширины области просмотра. «Vw» означает «ширина области просмотра». Используется для изменения размера боксов, которые адаптируются к разной ширине области просмотра.
    vh 1vh — это 1% высоты области просмотра. «Vh» означает «высота области просмотра». Используется для изменения размера боксов, которые адаптируются к разной высоте области просмотра. Например, может использоваться для установки максимальной высоты изображения, чтобы оно не превышало размеры области просмотра.
    vmin Равно меньшему из «vw» или «vh» См. Vh / vw
    vmax Равно большему из «vw» или «vh» См. Vh / vw

    А как насчет сценариев использования холста и «полного управления пикселями»?

    До сих пор мы сосредоточились на стилизации элементов документа с помощью CSS.Однако в некоторых случаях требуется полный контроль приложения над каждым нарисованным пикселем, например в видеоигре.

    Для удовлетворения таких требований могут использоваться как контекст Canvas 2D, так и масштабируемая векторная графика, а также WebGL. Также можно использовать абсолютно позиционированный контент для повышения производительности в очень специфических обстоятельствах (например, в играх).

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

    Рендеринг независимо от разрешения

    Но вернемся к основам: что такое независимость от разрешения и почему это важно?

    Определение независимости разрешения

    Когда контент отрисовывается на носителе вывода, таком как принтер или экран, программное обеспечение преобразует описание того, что нужно нарисовать, в фактические пиксели. Например, строка текста сначала преобразуется в набор геометрических контуров, определяемых данными шрифта; эти контуры затем «растрируются» или превращаются в пиксели.Тот же процесс происходит с более простыми формами, такими как прямоугольник, нарисованный в определенном месте (координата x / y) и с определенным размером (шириной и высотой).

    Что касается подхода к визуализации, независимость от разрешения требует, чтобы объекты описывались таким образом, чтобы не зависеть от точных характеристик выходного носителя. Цель состоит в том, чтобы иметь возможность указать, что нужно рисовать, и позволить базовому программному обеспечению понять, как это сделать для конкретного устройства вывода во время выполнения.

    Это особенно важно, когда размер и плотность пикселей устройств вывода различаются так же широко, как и на современных устройствах просмотра.Например, на экране с разрешением 96 точек на дюйм (dppi = пиксель устройства на дюйм) миллиметр будет иметь длину около 4 пикселей устройства, поэтому прямоугольник, расположенный на (x = 10 мм, y = 20 мм), будет расположен на уровне x = 40 пикселей устройства и y = 80 пикселей устройства. В то время как на дисплее с разрешением 300 точек на дюйм миллиметр будет около 12 пикселей устройства в длину, а прямоугольник должен располагаться в точке x = 120 пикселей устройства и y = 240 пикселей устройства. Однако, и это важная часть, прямоугольник будет отображаться в том же физическом положении на дисплее по модулю округления i.е. примерно 10 мм по оси X и 20 мм по оси Y.

    Масштабируемое содержимое

    Чтобы не зависеть от разрешения, система должна иметь возможность масштабировать контент в зависимости от условий рендеринга. Postscript и PDF — это примеры технологий, основанных на концепции единиц, которые затем можно масштабировать по мере необходимости для соответствия доступному разрешению экрана. Оба используют «точку» и определяют ее как 1/72 дюйма.

    Scalable Vector Graphics (SVG) делает то же самое и имеет концепцию пользовательской единицы, от которой в конечном итоге происходят все остальные единицы; CSS определяет пиксели CSS, единицу измерения, к которой разрешают все остальные (пользовательская единица SVG совпадает с «px» в CSS).

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

    Прежде чем мы углубимся в модуль «px» CSS, отметим, что масштабируемые форматы, такие как SVG, являются очень эффективным способом достижения независимости от разрешения или отзывчивости для ваших графических ресурсов.

    Примечание. Иконочные шрифты — еще одна популярная практика с 2013 года. E.грамм. см. http://css-tricks.com/html-for-icon-font-usage/ или http://nimbupani.com/markup-free-icon-fonts-with-unicode-range.html. А еще есть очень умные хаки OpenType, такие как Chartwell или Symbolset. Сегодня они являются частью масштабируемого арсенала.

    О CSS-пикселях, физических единицах и масштабируемости

    Хотя спецификация CSS Values ​​and Units определяет все единицы CSS в одном документе, может потребоваться некоторая работа, чтобы понять, как CSS связывает свои единицы с реальными мерами или физическими единицами.Все, что указано в спецификации, может быть указано как:

    96 пикселей = 1 дюйм

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

    • На устройстве с высоким разрешением — лазерных принтерах сегодня, экранах в будущем — рендеринг CSS должен сопоставлять дюйм с его физическим размером (это то, что в спецификации называется «соотнесением физических единиц с их физическими размерами»). В результате единица «px» CSS (поскольку она составляет 1/96 дюйма) может преобразоваться в дробное количество пикселей устройства.Например, на экране с разрешением 300 точек на дюйм (пикселей устройства на дюйм) соотношение пикселей устройства и пикселей CSS составляет 300/96 = 3,125. Как следствие, если вы применили стиль к элементу:
      граница: сплошной синий цвет 1px;
      

    … его граница должна иметь ширину 3,125 пикселя устройства. В зависимости от растеризатора — части программного обеспечения, преобразующей основные формы в пиксели — вы можете полностью покрыть 3 пикселя синим цветом, а затем частично покрыть 4 пиксель, используя сглаживание для смешивания с фоном.

    • На устройстве с низким разрешением спецификация рекомендует «связать пиксельный блок с эталонным пикселем и дополнительно рекомендует, чтобы пиксельный блок относился ко всему количеству пикселей устройства, которое наилучшим образом приближается к эталонному пикселю». В нашем предыдущем примере синяя рамка могла быть полным пикселем устройства.

    Еще несколько лет назад пиксель CSS обычно отображался в один пиксель экрана. Как следствие, дюйм CSS не всегда соответствовал фактическому физическому дюйму; если истинное разрешение ноутбука составляет 120 точек на дюйм, дюйм длиной 96 пикселей будет 96/120 = 0.8 физических дюймов!

    С появлением экранов более высокой плотности мы видим устройства с двумя пикселями устройства на пиксель CSS (например, Apple Retina), а также дисплеи с дробным соотношением пикселей (см. Эту статью MDN). Обратите внимание, что дробное соотношение пикселей может привести к дополнительному сглаживанию при визуализации, как и при визуализации с высоким разрешением.

    Простой пример

      
    
        
            
            
             Единицы CSS в пикселях / в тесте 
            
           
        
    
        <стиль>
        тело {
            фон: # 404040;
        }
    
        .css-box> span {
        дисплей: встроенный блок;
           высота: 1em;
        border-right: сплошной черный 1px;
        }
    
        .css-box.px> span {
           ширина: 96 пикселей;
            фон: #fefefe;
        }
    
        .css-box.in> span {
           ширина: 1 дюйм;
            фон: # 4166B5;
        }
        
        
            

    Рисунок 1. Отрисовка в OSX Safari

    Когда мы пытаемся отобразить этот документ на разных устройствах, мы видим, что:

    • Во всех случаях светлый и синий прямоугольники абсолютно одинакового размера.Это потому, что 1 дюйм CSS всегда равен 96 пикселям CSS; белые прямоугольники имеют ширину 96 пикселей, а синие — 1 дюйм. Итак, как и ожидалось, их ширина совпадает.
    • На 15-дюймовом дисплее MacBook Pro с разрешением 110 точек на дюйм физическая ширина коробки составляет: 96 * 1/110 = 0,872 дюйма. Это потому, что соотношение CSSpx / пиксель устройства равно 1. Используя линейку на моем экране, я измерил 0,88 дюйма, и разница в моей рудиментарной линейке и приблизительном зрении :-). Таким образом, дюйм CSS на 22,8% отличается от физического дюйма.
    • На iPhone 5 с разрешением 326 точек на дюйм физическая ширина коробки составляет 96 * 2/326 = 0,589 дюйма. Это потому, что на этой платформе отношение CSS px к устройству равно 2. Снова используя линейку, я получил 1,592 дюйма. Опять же погрешность измерения. Здесь дюйм CSS меньше на 41,1%
    • На принтере (я использовал Canon Pixma MP600) физический дюйм коробки составляет… 1,05 дюйма !! Так что это 5% ошибка на этом конкретном принтере.

    Итак… пиксель — это не пиксель, а дюйм — это не дюйм?

    Ну, это почти так, но не так плохо, как кажется.Вот почему:

    • Пиксель CSS является «эталонным» пикселем, а не пикселем устройства. Это вводит в заблуждение, и лично я предпочитаю понятие «пользовательская единица», которое использует SVG, потому что я думаю, что тогда легче объяснить сопоставление с физическими единицами и пикселями устройства. Но если понять, что «px» на самом деле является эталоном, а не пикселем устройства, все становится более понятным. Следует помнить, что CSS-пиксель — это абстрактная единица измерения, и существует соотношение, определяющее, как он: а) сопоставляется с фактическими пикселями устройства и б) сопоставляется с физическими единицами (фиксированное отношение всегда составляет 96 пикселей CSS к пикселям устройства). дюйм).
    • дюйм CSS точно или «близко» к дюйму . На устройствах с высоким разрешением и если никакие другие параметры не мешают (например, масштабирование пользователя или преобразования CSS), дюйм будет физическим дюймом, как и ожидалось. На устройствах с низким разрешением возможна погрешность, как описано выше.
    • Важнее всего масштабируемость и адаптируемость . Наиболее важным аспектом для большинства разработчиков является то, что макет контента может изменяться и адаптироваться по мере изменения масштаба единиц предсказуемым и разумным образом.Хотя концепция сохранения точного соотношения сторон на всех устройствах может показаться привлекательной, она имеет нежелательные последствия для устройств с низким разрешением (например, нежелательное сглаживание, вызывающее размытость рендеринга).

    Заключительные мысли

    Итак, что должны иметь в виду веб-разработчики, чтобы наш контент хорошо отображался на дисплеях различных размеров, форм-факторов и плотности пикселей? Вот несколько выводов:

    1. Используйте медиа-запросы, чтобы использовать желаемый макет в зависимости от условий визуализации (например,г., маленький экран устройства, планшетный тип, рабочий стол, большой дисплей).
    2. Настройте область просмотра для отображения на мобильных устройствах с помощью метатега.
    3. Используйте блоки CSS и макет CSS, чтобы настроить поток и размер содержимого по желанию. Используйте новейшие единицы, такие как «rem», «vh» и «vw» (проверьте их статус реализации) или более старые, но все же полезные единицы, такие как «проценты», «em» или «pt».
    4. Помните, что пиксели CSS ссылаются на абстрактный ссылочный пиксель и что главное правило, о котором следует помнить, состоит в том, что 96 пикселей CSS всегда имеют такую ​​же длину, как 1 дюйм CSS .
    5. Используйте SVG (или шрифты значков, более ограниченные, но более широко поддерживаемые) везде, где вы можете (в зависимости от типа изображения и / или ваших целевых браузеров), чтобы иметь контент, который естественным образом масштабируется до более высоких плотностей или размеров пикселей.

    См. Также

    пиксель — это не пиксель

    Если вы веб-разработчик или дизайнер, который в последнее время работал над проектами для мобильных устройств, не займет много времени, прежде чем вы поймете, что пиксель больше не равно пикселю .

    Вы заметили это, потому что посмотрели разрешение экрана нового Galaxy S6 и были озадачены тем, как оно может иметь большее разрешение, чем ваш широкоформатный настольный монитор 1080p, и тем не менее веб-сайты по-прежнему отлично читаются и, похоже, отображаются с тем же размером как всегда. Что-то буквально не складывается.

    Для веб-разработчика это означает, что с появлением дисплеев высокой плотности вы больше не можете рассчитывать на разрешение экрана устройства, чтобы определить, какой ширины должна быть страница.Когда Apple впервые применила это в своем дисплее Retina, они разделили понятие пикселей на аппаратных пикселей и программных пикселей . Аппаратный пиксель — это отдельная световая точка на дисплее. Программный пиксель, также называемый в веб-мире CSS-пикселем , является единицей измерения.

    Производитель устройства определяет, сколько аппаратных пикселей соответствует одному программному пикселю, концепция, известная как соотношение пикселей устройства . На дисплее Retina от Apple один пиксель CSS содержал четыре аппаратных пикселя (2 пикселя в ширину и 2 пикселя в высоту), что означает, что соотношение пикселей устройства равно 2.Samsung Galaxy S4 продвинулся дальше, представив соотношение пикселей устройства равное 3, что означает, что каждый пиксель CSS содержит 9 аппаратных пикселей. LG G3 был первым с соотношением четыре, и теперь Galaxy S6 следует его примеру. (Производители телефонов: скоро мы перестанем заботиться об этом. Не будь Gillette.)

    Пиксель CSS, с другой стороны, разработан так, чтобы быть примерно одинаковым для всех устройств. Если вы загружаете один и тот же веб-сайт на параллельные устройства с одинаковыми физическими размерами, но с разным соотношением пикселей, веб-сайт будет выглядеть примерно одинакового визуального размера.

    Так в чем же дело? Если пиксели CSS на самом деле вообще не изменились, каковы преимущества более высокой плотности пикселей? Вот несколько.

    Более четкий текст

    Вы заметите, что текст выглядит более резким на дисплее с высокой плотностью. Размер шрифта такой же относительно остальной части страницы, но текст отрисовывается на уровне аппаратных пикселей . Таким образом, размер шрифта 14 пикселей займет 14 пикселей CSS, но при рендеринге будет 28 аппаратных пикселей. (Улучшенная визуализация текста обрабатывается браузером автоматически — вам вообще не нужно ничего делать, чтобы воспользоваться этой функцией.)

    Более четкие значки

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

    Изображения с высоким разрешением

    Их также называют изображениями Retina , потому что впервые эти методы были разработаны Apple. Он включает в себя доставку другого набора изображений на дисплеи с более высокой плотностью, чтобы они отображались с использованием аппаратных пикселей, а не программных пикселей. Это приводит к гораздо более четкому изображению, при этом сохраняя полную обратную совместимость с экранами с плотностью 1: 1.

    Как использовать эту функцию: Для стандартных изображений HTML просто используйте изображение, в два раза превышающее ширину и высоту, которые необходимы для отображения на странице.Затем используйте CSS или встроенный HTML, чтобы изменить размер изображения до нужных размеров. (Также проверьте Retina.js в качестве потенциального решения.)

    Однако чаще вы будете использовать этот метод для элементов с фоновыми изображениями CSS и использовать медиа-запросы для доставки различных изображений в зависимости от плотности пикселей. Следующий пример CSS заменит фоновое изображение версией с высоким разрешением, подходящей для устройства.

     1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21 год
    22
    23
    24
    25
     
     / * Это оригинальный логотип.* /
    .logo {
    ширина: 197 пикселей;
    высота: 182 пикселей;
    / * Размер исходного изображения 197 пикселей на 182 пикселей. * /
    фон: url ('img / logo.png') центр без повтора;
    }
    
    / * Это заменит логотип 2x версией на устройствах с соотношением сторон 2: 1, таких как устройства Apple. * /
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
    / * Размер исходного изображения составляет 394 пикселей на 364 пикселей. * /
    фоновое изображение: URL ('img / [электронная почта защищена]');
    размер фона: 197px 182px;
    }
    }
    
    / * Это заменит логотип трехкратной версией на устройствах с соотношением сторон 3: 1, таких как Samsung Galaxy S5.* /
    @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
    .logo {
    / * Исходное изображение имеет размер 591 на 546 пикселей. * /
    фоновое изображение: URL ('img / [электронная почта защищена]');
    размер фона: 197px 182px;
    }
    } 

    Эти носители предназначены только для дисплеев с высокой плотностью пикселей и будут игнорироваться другими устройствами. Обозначения @ 2x и @ 3x произвольны — изображение может иметь любое имя файла, если вы не используете Retina.js — но это соглашение, установленное Apple, которое стало стандартом. Обратите внимание на использование свойства background-size, с помощью которого мы уменьшаем размер изображения до нужных нам размеров CSS-пикселей.


    Итак, как веб-дизайнер, можете ли вы делать вещи так, как всегда, и полностью игнорировать аппаратные пиксели? Ага. Вся эта новая технология отображения полностью обратно совместима, и ваши данные по-прежнему будут работать на дисплеях Retina. Но это не тот вопрос.Ваша работа должна заключаться не в том, что вам «сойдет с рук», а в том, как вы можете воспользоваться преимуществами новых технологий, чтобы создать лучший продукт для себя и для клиентов.

    В настоящее время большинство сайтов не используют преимущества доступных функций высокой плотности. Если у вас есть iPad, вы определенно заметите разницу, когда столкнетесь с ним! (Посетите домашнюю страницу школ сообщества Dubuque на iPad.) В конце концов, оптимизация с высокой плотностью записи станет нормой, поскольку все больше и больше устройств поддерживают ее, и игровое поле будет выровнено — но в то же время это легко и просто. полезный способ дистанцироваться от конкурентов.

    Ресурсы

    Если вы хотите узнать больше об оптимизации для дисплеев с высокой плотностью пикселей, на следующих сайтах есть действительно полезная информация.

    Список дисплеев по плотности пикселей (mydevice.io)
    Это лучший ресурс для поиска плотности дисплеев на определенных устройствах. Он постоянно обновляется при выходе новых устройств.

    The Insanely OCD Mobile Media Queries CSS File
    Это, по общему признанию, немного перебор, но это отличный ресурс, если вы хотите получать медиа-запросы для некоторых из наиболее популярных устройств.

    .

    Станьте первым комментатором

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    2019 © Все права защищены. Интернет-Магазин Санкт-Петербург (СПБ)