Плотность пикселей dpi что это
Низкий DPI vs. Высокий DPI
Больше точность, но больше шумов? Или меньше точность, но меньше шумов? Как определиться? Попробуем разобраться.
Начнем с того, что чем более низкий dpi вы используете, тем более низкую точность позиционирования курсора вы получаете. Почему так? Ответ читайте далее.
Например: если вы установите в настройках мыши 200 dpi и внутриигровую чувствительность равную 6, вы получите значительно меньшую точность позиционирования курсора, чем при настройках 8000 dpi с чувствительностью соответственно равной 0.15.
Почему чувствительность во втором случае равна 0.15? Это легко вычислить по формуле:
old_dpi / new_dpi * old_game_sens = new_game_sens;
200 dpi / 8000 dpi * 6 sens = 0.15 sens;
Получим абсолютно одинаковую скорость мыши, при новых настройках dpi.
* Мышь: Logitech G102(203) «Prodigy»
* Разрешение экрана: 1920×1080
Настройки выше сделаны для того, чтобы добиться одинаковой скорости мыши в системе при 200 и 8000 dpi для более точного тестирования. Таким образом получается, что скорость мыши будет примерно одинаковой, но установленное разрешение сенсора при этом будет различным.
Множители скорости мыши в Windows, в соответствии с положением ползунка
1=1/32; 2=1/16; 3=2/8; 4=4/8; 5=6/8; 6=1.0; 7=1.5; 8=2 9=2.5; 10=3; 11=3.5
Замечание: настройки скорости мыши Windows с недавнего времени не влияют на поведение мыши в Quake Champions, по видимому в игру добавили поддержку Raw Input, включенную по умолчанию. Поэтому можете устанавливать ползунок так, как вам удобно.
Вот что происходит на низких и высоких настройках dpi при перемещении курсора с одинаковой скоростью:
На 200 dpi провести ровную линию невозможно, курсор дрожит и создает «лесенку», т.к. количества считываемых точек поверхности просто не достаточно, для точного позиционирования на таком разрешении.
Другое дело 8000 dpi — линия получается почти ровной, а небольшие неровности это, в основном, следствие естественного дрожания руки человека.
Установка высоких значений dpi может помочь как в обычной работе, особенно если вы занимаетесь графикой, так и в играх, особенно в тех моментах, когда требуется точное наведение прицела. К примеру в Quake Champions, если вы стреляете из рейлгана на большую дистанцию, да еще и в узкий проход, то настройки с высоким dpi могут дать вам небольшое преимущество.
Кроме того есть еще один важный момент: чем выше разрешение экрана — тем больше будет заметна дрожь курсора мыши на низких dpi. Например на 4K разрешении монитора, курсор мыши, установленной на 200 dpi, будет при дрожании перескакивать на большее количество пикселей, чем при разрешении монитора FullHD.
В итоге получается, что смысла играть на очень низких настройках dpi, особенно в том случае, если вы можете позволить себе более высокие значения — просто нет. Это не только не дает никакого преимущества, но даже наоборот отнимает его. Разница, конечно, не столь значительная, особенно в таких быстрых играх вроде Quake Champions, где не требуется точной стрельбы на огромные расстояния, как например в Arma III, но все же эта разница есть.
О проблемах, с которыми можно столкнуться на очень высоких значениях dpi читайте в разделе «Дополнительная информация».
Конечно, большинство профи играют на низких значениях, но это скорее дело старой привычки. Иногда, когда приходят новые технологии, от старых привычек приходится отказываться.
Аббревиатура CPI расшифровывается как counts per inch (считываний на дюйм), но пользователи обычно говорят о DPI – dots per inch (точек на дюйм). Это связано с тем, что на экране монитора отображаются «точки», в то время как сенсор в результате своей работе выдает «считывания». Поэтому разница между dpi и cpi состоит исключительно в названии, по факту эти понятия обозначают одно и то же.
Давайте заглянем в сенсор мыши. В нем есть светочувствительная матрица, которая состоит из пикселей и линза с заданным увеличением, через которую на сенсор попадает изображение поверхности. При этом на каждый пиксель матрицы проецируется небольшой участок поверхности. Длина этого участка является минимальным элементом, который может увидеть наша матрица. В этом случае, мы понимаем CPI как «сколько пикселей нашей матрицы помещается в одном дюйме поверхности». Это и есть оптическое или «нативное» разрешение нашей системы. И поверьте, это разрешение гораздо меньше тех цифр, которые заявляются производителями для своих устройств. Например у самых продвинутых сенсоров на данный момент размер матрицы составляет всего 32х32 пикселя (1024 точки), что явно меньше чем заявленные 8000 или 16000 dpi у некоторых производителей.
Как мы можем получить более высокое разрешение? Один из способов — разделение пикселей в нашей матрице на более мелкие фотоэлементы. Однако, в этом случае приходится повышать светочувствительность каждого элемента, что в свою очередь увеличивает уровень шумов на матрице. Постепенно увеличивая количество пикселей вы достигаете определенного предела, при котором информация, получаемая пикселем не позволяет определить параметры движения мыши из-за плохого соотношения сигнал/шум.
Различают высокочастотный и низкочастотный jitter.
Важно понимать, что проблема jitter’a непосредственно связана с разрешением сенсора (dpi/cpi). И это вполне естественно. Чем больше вы поднимаете dpi, тем больше вы получаете ошибок. Приближаясь к шумовому порогу сенсора, система перестает понимать, какой сигнал представляет собой настоящее движение, а какой просто является случайным шумом на матрице.
Как на очень высоких так и на очень низких dpi есть свои слабые стороны в определении шумов. Поэтому настраивать dpi/cpi следует на промежуточные значения.
Выделяют три вида угловой ошибки сенсора: общая угловая ошибка, ошибка «3-сигма» и т. н. «угловая привязка».
Общая угловая ошибка — это систематическое отклонение угла, определяемого сенсором, от реального угла, под которым осуществляется движение мыши. При этом пользователей, как правило, этот вид ошибки не слишком беспокоит (если только она не слишком велика), они естественным образом под нее подстраиваются, даже не замечая, что мышь ведет себя как-то неправильно.
Ошибка 3-сигма — это случайное изменение общей угловой ошибки. Можно сказать, что это «ошибка ошибки». В отличие от общей угловой ошибки, к данному недостатку пользователь практически никак не может адаптироваться. Именно поэтому, величина ошибка «3-сигма» является очень важным параметром, который характеризует точность сенсора.
Угловая привязка. Фактически, угловая привязка означает наличие определенного диапазона углов, в котором наша система выдает строго горизонтальное либо строго вертикальное движение. Эта функция была реализована в некоторых сенсорах, чтобы помочь людям, которые работают в офисных либо графических приложениях, рисовать прямые линии. Но такое поведение мышки может быть неприемлемым для геймеров. Естественным желанием для геймера является «чистый» необработанный трекинг, которой позволяет им лучше чувствовать движения своей руки и быть точным, совершая даже небольшие движения мышью. Потому что при экстремальных значениях угловой привязки, рисуя, к примеру, окружность, на выходе вы можете получить вместо круга некоторое подобие квадрата.
Суть данной проблемы состоит в том, что в некоторых случаях сенсор полностью перестает понимать, куда движется мышь и не выдает никаких считываний. На практике это выглядит так: пользователь ведет мышь, а курсор на экране в какой-то момент останавливается, а затем снова продолжает свое движение.
Технически, пропуск пикселя заключается в том, что сенсор определяет движение, сравнивая между собой фотографии поверхности. И здесь весь смысл заключается в скорости фотографирования. Первыми проблемными мышками с пропуском пикселя были устройства на базе лазерного сенсора Avago 9500 (SteelSeries Xai/Sensei), где скорость фотографирования составляла 12000 кадров в секунду! Большая скорость фотографирования позволила существенно повысить точность сенсора на обычных скоростях, но при медленном движении две последовательные фотографии, сделанные с интервалом 0,000083 секунды (1/12000), становятся практически неотличимыми друг от друга. Поэтому, в последнем поколении сенсоров (например Pixart S3988/PMW3366) скорость фотографирования меняется в зависимости от скорости движения самой мышки: от 3000 до 12000 кадров в секунду.
Что нужно знать о вёрстке под ретину
При создании сайтов и веб-приложений важно помнить, что пользователи будут их открывать на устройствах с разными экранами. Поэтому нужно делать всё возможное, чтобы вёрстка выглядела хорошо на любом девайсе.
Есть множество способов подготовить вёрстку, начиная от использования медиавыражений и заканчивая написанием скриптов. Мы не будем углубляться в эту тему и разберём только основные моменты, которые полезно знать начинающим веб-разработчикам.
Дисклеймер: в статье мы называем ретиной все экраны с повышенной плотностью пикселей, но знаем, что это не так. Считайте это литературным допущением.
Что такое пиксель?
Чтобы понять, чем ретина-экраны отличаются от остальных и как с ними работать, нужно для начала разобрать понятие пикселя. Пиксели бывает двух видов:
Физический пиксель — пиксель устройства — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 480px, то подразумеваем, что по всей ширине находится 480 неделимых ячеек. Именно они с помощью цветовой схемы RGB формируют изображение на экране.
Чем больше физических пикселей на экране, тем выше его плотность и тем детальнее выводимое на него изображение. Для измерения плотности экранов используют специальную единицу PPI — Pixels per Inch. Она показывает количество физических пикселей на квадратном дюйме экрана. То есть чем выше PPI, тем лучше графика.
CSS-пиксель — относительный пиксель. Размер физических пикселей может отличаться у разных устройств и производителей. Поэтому они подстраивают выводимую на экране своих девайсов информацию под CSS-пиксель. Если этого не сделать, то изображения и тексты, размеры которых заданы в CSS, будут выглядеть по-разному даже на внешне похожих устройствах.
В свою очередь, разработчики никогда не работают с физическими пикселями устройств, только с CSS-пикселями. Чему равен один CSS-пиксель? Изначально стандарт W3C приравнивал его к значению 1/96 дюйма, то есть около 0,26 мм., а браузеры для упрощения расчетов принимали его 1:1 к физическому пикселю при масштабе 100%. Но позже многое изменилось: настало время экранов с повышенной плотностью пикселей.
Что такое ретина-дисплеи?
Ретиной называют дисплеи Apple с повышенной плотностью пикселей на квадратный дюйм. Впервые о них заговорили в 2010 году, когда Стив Джобс презентовал iPhone 4. Новый на тот момент смартфон получил экран с плотностью 326 PPI — в два раза выше, чем у его предшественника iPhone 3GS.
Ретина-дисплеи вывели смартфоны на новый уровень. По словам самого Стива Джобса, на ретина-дисплеях удалось достичь такого PPI, на котором человеческий глаз перестаёт различать отдельные пиксели. Текст стал выглядеть так, словно он выведен не на экран мобильного устройства, а напечатан в хорошей книге. Изображения стали более чёткими и плавными. Появились полутона и исчезла «зернистость» картинок.
Сейчас экраны с повышенной плотностью пикселей выпускают, пожалуй, все крупные бренды. Их нельзя называть ретиной — это название принадлежит исключительно компании Apple. Но принцип отображения аналогичен.
Слева изображение для ретина-экрана, справа — для стандартного дисплея.
Как узнать плотность пикселей на дюйм?
С устройствами Apple всё просто. Можно зайти на официальный сайт, выбрать интересующий девайс и нажать на кнопку «Спецификация». Вы попадёте на страницу с подробными техническими характеристиками, в том числе с информацией о диагонали дисплея, разрешении и PPI:
С другими устройствами может быть чуть сложнее: не все производители указывают плотность пикселей на дюйм. Например, некоторые бренды в технических характеристиках описывает только диагональ и разрешение экрана. Поэтому если вам нужно узнать PPI на конкретном девайсе, можете вычислить его сами по формуле:
Если не хочется считать вручную, можно воспользоваться любым онлайн-калькулятором. Например, такие сервисы есть на сайте 7pads.com, myresolutionis.ru или prostudio.ru. Они показывают одинаковые результаты, поэтому можете выбрать любой.
Результаты подсчёта: слева myresolutionis.ru, справа — prostudio.ru
Особенности вёрстки под ретина-экраны
Ретинизация изображений — стандарт на рынке веб-разработки. Уже сейчас многие устройства (и не только от Apple) используют экраны с повышенной плотностью пикселей. Поэтому, чтобы вёрстка выглядела хорошо, нужно научиться ретинизировать контент. Давайте разберём, какой тип контента нужно оптимизировать под экраны с высокой плотностью, а какой не нуждается в дополнительной подготовке.
Текст
С текстом ничего не нужно делать, ведь современные шрифты выполнены в векторном формате. Векторный текст сам подстраивается под параметры экрана и одинаково выглядит на всех устройствах. Поэтому все тексты на сайте нужно добавлять не изображениями, а с помощью
, и других тегов.
Исключение — логотипы: даже если они выглядят как текст, их лучше вставлять изображением. Причина в том, что если по каким-то причинам основной шрифт не загрузится, браузер заменит его на стандартный. В таком случае логотип уже не будет соответствовать фирменному стилю компании. Например, представьте себе лого Coca-Cola, написанное не узнаваемым курсивом, а стандартным Arial.
Так мог бы выглядеть логотип Coca-Cola, если бы шрифт не подгрузился.
Даже в таком, казалось бы, простом случае логотип «Техномарта» лучше сделать картинкой в формате SVG, а не написать простым текстом.
Иконки и декоративные изображения
Лучшее решение для иконок и декоративных элементов — использование формата SVG. SVG — векторный формат графики, и он, как и в случае со шрифтами, отлично выглядит на экранах с разным разрешением и плотностью пикселей и не нуждается в дополнительной оптимизации при вёрстке под ретину. Главное не забывать указывать размеры таких элементов.
Иконки категорий лучше использовать в SVG-формате. А вот главный баннер, кажется, забыли оптимизировать под ретина-экраны.
Есть и другие векторные форматы, например, AI — как на этом изображении. Такое изображение хорошо подойдет для широкоформатной печати в типографии, но не для сайта.
Контентные и фоновые изображения
Для контентных и фоновых изображений обычно используют PNG, JPG, WebP и другие растровые форматы. Почему не SVG? Потому что отрисовывать фотореалистичную графику в векторе — очень трудоемкий и технически сложный процесс.
Вся растровая графика состоит из пикселей, количество которых определяется при создании изображения и остается неизменным. Поэтому при увеличении или уменьшении такой картинки её качество ухудшается: она становится «зернистой». Из-за таких особенностей основной упор при оптимизации вёрстки под ретина-дисплеи делается именно на подготовку и добавление растровой графики: контентных и фоновых изображений.
Графика должна быть подготовлена как минимум для двух вариантов экранов. Один для обычных дисплеев, второй, с увеличенным количеством пикселей — для ретины.
Обычно дизайнеры знают про экраны с повышенной плотностью и сами готовят дополнительные изображения. Так, если вы работаете с Figma, то можете легко выгрузить изображения с индексом @1x для обычных дисплеев и @2x — для дисплеев, плотность пикселей которых в два раза выше. Обычно этих индексов достаточно. Но в некоторых проектах идут дальше и используют отдельную графику с индексом @3x и выше.
Пример: как экспортировать изображения в Figma.
При ретинизации изображений учитывается плотность пикселей экрана устройства и в зависимости от нее показываются разные изображения. Чтобы браузер понимал, какую из картинок показать пользователю, используют медиазапросы или специальные атрибуты.
Фоновые изображения вставляют с помощью медиавыражения @media(min-resolution: 2dppx) <. >.
Вариант с префиксами:
У функции image-set() есть несколько особенностей:
В Safari префикс указывать не нужно, но синтаксис функции немного другой, с использованием функции url (): background-image: (url(«platypus.png» 1x));
Пока что не во всех браузерах есть полная поддержка этой функции. Поэтому перед использованием проверьте, поддерживают ли её нужные вам браузеры с помощью сервиса Caniuse.com.
Для контентных изображений следует использовать тег
После добавления нескольких вариантов графики полезно проверять, как отображаются изображения на экранах с разной плотностью пикселей. Это можно сделать с помощью инструментов разработчика. Например, в Chrome DevTools на верхней панели можно изменить плотность экрана на DPR: 1.0, 2.0 или 3.0. А во вкладке «Сеть» или Network можно посмотреть, какие картинки загружаются на экранах с разной плотностью. Главное — при изменении DPR не забывайте перезагружать страницу.
Подведём итоги
Используйте тексты и градиенты — их не нужно дополнительно оптимизировать.
Используйте изображения минимум в двух форматах: для обычных экранов и для ретины.
По возможности отдавайте приоритет SVG.
При добавлении контентных изображений используйте тег
Для фоновых картинок применяйте медиавыражение @media(min-resolution: 2dppx) <. >или используйте CSS-функцию image-set.
Не забывайте проверять, как выглядит вёрстка на экранах с различной плотностью пикселей.
Если вы хотите более подробно погрузиться в ретиновую графику и научиться готовить вёрстку для ретина-экранов, попробуйте наш профессиональный курс «HTML и CSS. Адаптивная вёрстка и автоматизация».
Другие наши статьи о вёрстке
Что такое DPI в фотографии
Нужно изменить DPI? Воспользуйтесь программой ФотоМАСТЕР:
Для Windows 7, 8, 10, XP, Vista. Быстрая установка.
DPI в фотографии: что это и зачем нужно
При профессиональной обработке фотографий необходимо знать технические термины. Например, параметр DPI (dots per inch) помогает понять, подходит ли по фотография для печати в качестве плаката или только для маленькой открытки. Если вы распечатываете кадры или публикуете их в Интернете, сведения о количестве точек позволят убедиться, что снимки будут выглядеть наилучшим образом. В этой статье мы подробно рассмотрим, что такое DPI разрешение и как его при необходимости изменить в программе для редактирования фото.
Что такое DPI в фотографии
При увеличении цифровой фотографии можно увидеть, что она похожа на мозаику и состоит из небольших плиток, которые называются пикселями. Их количество и способ распределения влияют на разрешение.
Количество
PPI (pixels per inch) отражает количество пикселей и качество кадра. Например, у картинки с размером 4500 px по горизонтали и 3000 px по вертикали представлено 13 500 000 пикселей или 13,5 мегапикселей.
При увеличении масштаба можно увидеть квадратики, из которых состоит картинка
Плотность
Также есть второй фактор, влияющий на качество фотоизображения. DPI — это разрешение в пикселях на дюйм. Параметр обозначает то, как распределяется общее количество цветных точек. Если он представлен числом 72 — это означает, что фото включает в себя 72 единицы пикселей на дюйм.
У картинок установлено одинаковое соотношение сторон. Разница в масштабе зависит от DPI
В настоящее время единица плотности используется только при печати. Все принтеры состоят из чернил разного цвета, которые объединяются для создания каждого фрагмента фотоизображения. В принтере обычно установлено 4-6 чернил разного цвета, и ему необходимо их смешивать для получения нужного оттенка. Серия крошечных точек создает каждый пиксель. Поэтому тональность принтера будет выше, если в изображении будет высокая плотность.
Разница в плотности точек
Пример использования
Чтобы лучше понять термин, стоит разобраться, как он работает. Например, сколько в пикселях 600 dpi? Значение ди-пи-ай выражает количество пикселей на квадратный дюйм, записанных в цифровом виде. Таким образом, 600 точек означает, что у вас есть 600px в ширину и 600px в высоту на изображении размером 1 на 1 дюйм. Это 360 000 пикселей.
300 dpi — это какое разрешение в пикселях? Такое фотоизображение будет содержать 300px в ширину и 300px в высоту на каждый дюйм. Иначе говоря, картинка будет включать в себя 90 000 пикселей.
Оптимальное количество точек, необходимое для печати, повышается по мере увеличения размера отпечатков. Для вывода проекта на бумаге А4 формата потребуется выше число dots per inch, чем для открытки 10 на 15 сантиметров.
Разница в масштабе фотоснимка при разных значениях
Форматы изображения DPI
Изменение свойства «dots per inch» возможно не во всех расширениях медиафайлов.
Для настройки подходят следующие форматы:
Векторные медиафайлы не состоят из точек: их можно масштабировать без снижения качества.
Разница при изменении масштаба вектора и растра
Как узнать DPI изображения
У вас есть несколько способов определить разрешение на компьютере:
1. Чтобы проверить плотность снимка на ПК с Windows, перейдите в папку с нужным документом. Щелкните по нему правой кнопкой мыши и выберите «Свойства». Перейдите на вкладку «Подробно».
В данном примере число составляет 96
2. Где посмотреть DPI фотографии на Mac OS? Выберите медиафайл, который хотите использовать, и щелкните по нему правой кнопкой мыши. Нажмите «Свойства». Нужные сведения представлены на вкладке «Подробнее».
Меню «Свойства» на устройствах с Mac
Для чего нужно большое количество точек
После того, как вам удалось узнать разрешение DPI, вам может потребоваться его увеличить. Это необходимо в различных ситуациях. Например, струйные принтеры печатают от 300 до 720 точек на дюйм, а лазерные создают фотоизображения от 600 до 2400. Требования к значению ди-пи-ай зависит от цели использования материала:
Таблица с назначением фотки и стандартными цифрами
Как делать снимки с высоким разрешением
Существует несколько советов, которые помогут добиться четкой печати:
Снимки, сделанные на камеру и смартфон
Как изменить DPI изображения
При печати очень важно установить правильный DPI. В противном случае у вас могут получиться размытые или некачественные фотокарточки. Чтобы настроить параметр, вам потребуется воспользоваться специальным программным обеспечением. Загрузите удобное приложение ФотоМАСТЕР. Оно позволит не только изменить размер картинки, но и произвести ретушь портретов, применить эффекты, настроить освещение и добавить надписи.
Чтобы перевести разрешение в dpi, вам необходимо скачать фоторедактор с нашего сайта. Затем запустите дистрибутив и выполните стандартные действия. После завершения инсталляции откройте софт и следуйте инструкции:
Шаг 1. Загрузите материал
В стартовом меню приложения нажмите на кнопку «Открыть фото» или перенесите документ из проводника.
Импортируйте документ с популярным расширением
Шаг 2. Произведите обработку (опционально)
Интерфейс приложения разделен на вкладки:
Пример обработки портрета
Шаг 3. Установите новый размер
Как сделать разрешение фотографии 300 dpi или меньше? Для этого откройте меню «Файл» и нажмите «Изменить размер и сохранить». Вы можете выбрать готовую предустановку:
Затем настройте ди-пи-ай. Введите любое число, но лучше выберите цифру в диапазоне между 72 и 300. Важно понимать: чем больше значение, тем объемнее будет итоговый материал.
Нажмите «Применить» и укажите папку
Как определить DPI фото и удостовериться в увеличении размера? Перейдите в папку с обработанным файлом, а затем откройте свойства кадра. Как видите, редактор отлично справился с задачей.
Заключение
Теперь вы знаете, как узнать DPI фото и настроить его для конкретной цели. Если вы хотите распечатать картинку, лучше установить 300 dots per inch или выше. Фотоснимки для газет имеют число около 200 из-за низкого качества бумаги. Для веб-изображений используйте 72 точки: фото с большим числом будут автоматически уменьшены браузером.
Перед отправкой материала на принтер или загрузки в сеть обработайте картинку в программе ФотоМАСТЕР. Она позволит выполнить ретушь, избавиться от дефектов, произвести цветокоррекцию и применить эффекты. Скачайте приложение бесплатно и приступите к редактированию прямо сейчас!