что такое ppi дисплея
[Инструкции] Плотность пикселей (PPI) и как она зависит от разрешения
1456243454_img_20160221_124907.jpg (924.05 KB, Downloads: 64)
2020-04-15 17:18:51 Upload
25b039b9-dd00-477e-af0e-f1f4ef86470e.jpg (74.96 KB, Downloads: 55)
2020-04-15 17:16:07 Upload
300-PPI.jpg (161.13 KB, Downloads: 64)
2020-04-15 17:16:07 Upload
bILkz2Af0XXr6HsHS8Tj1z2PyypAKP.jpg (336.16 KB, Downloads: 60)
2020-04-15 17:38:40 Upload
s1200.jpg (471.18 KB, Downloads: 65)
2020-04-15 17:18:51 Upload
formula.png (3.29 KB, Downloads: 60)
2020-04-15 17:59:48 Upload
Рейтинг
Mi Comm APP
Получайте новости о Mi продукции и MIUI
Рекомендации
* Рекомендуется загружать изображения для обложки с разрешением 720*312
Изменения необратимы после отправки
Cookies Preference Center
We use cookies on this website. To learn in detail about how we use cookies, please read our full Cookies Notice. To reject all non-essential cookies simply click «Save and Close» below. To accept or reject cookies by category please simply click on the tabs to the left. You can revisit and change your settings at any time. read more
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services such as setting your privacy preferences, logging in or filling in formsYou can set your browser to block or alert you about these cookies, but some parts of thesite will not then work. These cookies do not store any personally identifiable information.
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services such as setting your privacy preferences, logging in or filling in formsYou can set your browser to block or alert you about these cookies, but some parts of thesite will not then work. These cookies do not store any personally identifiable information.
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services such as setting your privacy preferences, logging in or filling in formsYou can set your browser to block or alert you about these cookies, but some parts of thesite will not then work. These cookies do not store any personally identifiable information.
Что нужно знать о вёрстке под ретину
При создании сайтов и веб-приложений важно помнить, что пользователи будут их открывать на устройствах с разными экранами. Поэтому нужно делать всё возможное, чтобы вёрстка выглядела хорошо на любом девайсе.
Есть множество способов подготовить вёрстку, начиная от использования медиавыражений и заканчивая написанием скриптов. Мы не будем углубляться в эту тему и разберём только основные моменты, которые полезно знать начинающим веб-разработчикам.
Дисклеймер: в статье мы называем ретиной все экраны с повышенной плотностью пикселей, но знаем, что это не так. Считайте это литературным допущением.
Что такое пиксель?
Чтобы понять, чем ретина-экраны отличаются от остальных и как с ними работать, нужно для начала разобрать понятие пикселя. Пиксели бывает двух видов:
Физический пиксель — пиксель устройства — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 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. Адаптивная вёрстка и автоматизация».
Другие наши статьи о вёрстке
PPI — сколько действительно оптимально для смартфона, планшета, монитора, телевизора?
При работе с графикой возникает необходимость в понимании базовых параметров, характеризующих любое цифровое изображение. С появления первых дисплеев одной из таких мер остается PPI или попросту число пикселей, приходящихся на один дюйм.
PPI (pixels per inch) — это мера плотности пикселей, определяющая разрешающую способность изображения или дисплея, будь то монитора, телефона, телевизора или другого девайса с устройством вывода графической информации.
Под пикселем в свою очередь понимается наименьший элемент изображения — небольшой квадрат, окрашенный в определенный цвет. При расчете PPI используется дюйм — единица измерения длины, эквивалентная 2.54 сантиметрам.
Таким образом, чем больше пикселей умещается в одном дюйме, тем выше значение PPI, а соответственно, и четкость изображения, и разрешающая способность дисплея.
Оптимальное значение PPI
Поскольку средний человек пользуется телефоном на расстоянии до экрана всего 20-30 см, PPI — одна из ключевых технических характеристик, на которую следует обратить внимание при выборе смартфона, чтобы избежать зернистости экрана и снизить нагрузку на глаза.
PPI в Смартфоне
Сейчас на рынке мобильных телефонов наблюдается следующая корреляция между стоимостью девайса и плотностью пикселей:
Несмотря на то, что заметная невооруженным взглядом зернистость дисплеев практически исчезла вместе с эпохой первых кнопочных телефонов, в бюджетном сегменте еще можно встретить матрицы с низким PPI.
Обратная ситуация наблюдается с флагманами: появление смартфонов с PPI свыше 500 — не более, чем маркетинговый ход производителей, поскольку существенной разницы человеческий глаз уже не заметит.
Если для смартфонов оптимальным значением плотности пикселей принимается диапазон от 300 до 450 PPI, это однако не универсальное значение для дисплеев всех устройств.
PPI в Планшете
Такие устройства, как планшеты или электронные книги, мы держим на большем расстоянии от глаз — комфортным считается удаление в 40-60 см.
Достаточным для формирования четкого изображения на таком расстоянии считается плотность 200-250 пикселей на дюйм.
PPI в Ноутбуке
Золотой серединой для безопасной для глаз работы на ноутбуке считается удаление на расстояние вытянутой руки — в среднем это 65-85 см.
Соответствующее этой длине оптимальное значение PPI должно находится в диапазоне от 150 до 200.
PPI в Мониторе
Еще в 1980-х компания Apple ввела стандарт плотности пикселей у мониторов для Macintosh, равный 72 PPI. Этот стандарт, державшийся на протяжении десятков лет, подхватили и другие производители.
Сейчас с изменением технологий производства матриц «хорошим» значением PPI для мониторов и моноблоков считается диапазон от 100 до 150 пикселей на дюйм при условии удаления от монитора на расстояние одного метра.
PPI в Телевизоре
Экран телевизора, как правило, находится на максимальном удалении от глаз среди распространенных устройств. ТВ обычно размещается на другом конце комнаты, и расстояние до дисплея при просмотре может достигать 5 метров.
В этом случае PPI уходит на второй план, и неудивительно, что оптимальная плотность пикселей составляет уже всего 40-80 на дюйм.
Как измерить PPI?
Необходимость введения PPI как отдельной характеристики связана с невозможностью описания четкости изображения одним лишь разрешением экрана: чем больше диагональ дисплея при неизменном разрешении, тем более размытым будет изображение.
По определению PPI рассчитывается как отношение между количеством пикселей на диагональ экрана в дюймах. Чтобы определить этот показатель самостоятельно, воспользуемся формулой с применением теоремы Пифагора:
Например, у стандартного офисного 21.5-дюймового монитора с разрешением Full HD плотность пикселей составит 102.5 PPI, а телефон с диагональю 5 дюймов и HD-разрешением может похвастаться уже 293 PPI.
PPI и DPI — есть ли разница?
Схожесть терминов PPI и DPI может ввести в заблуждение — обе меры обозначают практически одно и тоже с небольшим отличием в области применения.
DPI (dots per inch) — мера, характеризующая количество точек на дюйм. Используется в полиграфии для указания разрешающей способности принтера. В большинстве случаев 1 DPI эквивалентен 1 PPI.
Возможно ли поменять значение PPI?
DPI, равно как и PPI — характеристика устройства, которую нельзя повысить или уменьшить программно. Однако, например, при создании изображений в графических редакторах или при сканировании можно задать любую плотность точек.
Стоит ли обращать внимание на PPI?
Согласно некоторым исследованиям, человеческий глаз не в состоянии различать детали изображений с плотностью пикселей на дюйм свыше 300-400, хотя предельное значение может и варьироваться в зависимости от остроты зрения человека и расстояния до изображения. Таким образом, особого смысла в сверхвысоких PPI нет — разницу между экранами с плотностью 350 и 800 PPI увидеть практически невозможно на любом расстоянии от экрана.
Сейчас большинство цифровых устройств, обладают достаточной плотностью пикселей для комфортной работы. За PPI сверх оптимальных значений имеет смысл гнаться, лишь когда этого требует специализация, — например, графическим дизайнерам.
Плотность пикселей (PPI) в смартфоне: что такое, зачем нужно знать, оптимальные значения
Частенько бывает так, что у двух смартфонов с одинаковым разрешением дисплея качество картинки разительно отличается. Плохой экран? Да, в какой-то мере.
Но обычно подобные устройства сильно отличаются габаритами, в частности – диагональю дисплея. И здесь уже играет свою роль не разрешение, а плотность пикселей, также известная как PPI.
Что же это за характеристика, и в чем ее смысл? Всё просто.
Физический смысл
Аббревиатура PPI расшифровывается как «pixels per inch», говоря по-русски – «пикселей на дюйм». Картинка любого смартфона, планшета, монитора, да что там – даже древнего телевизора с кинескопом формируется по принципу так называемого растра.
Иначе говоря, в отличие от, например, осциллографа, изображение формируется не при помощи рисования линий, а собирается из матрицы точек – пикселей.
Причем пикселем считается не просто отдельный элемент матрицы, например, жидкий кристалл, газоплазменная ячейка или органический светодиод, а точка изображения.
Она обычно формируется из нескольких подобных элементов разного цвета, за счет чего картинка в итоге получается цветной.
Коротко говоря, пиксель – наименьший элемент растрового изображения: всё, что мельче, уже относится к чисто технической части.
Отсюда легко понять, что PPI – это число пикселей, которое помещается на одном квадратном дюйме матрицы, и непосредственно от разрешения эта величина не зависит, а определяется размером самого пикселя и межпиксельным расстоянием.
Чем он меньше, тем более технически сложной, а значит, и дорогой является матрица.
Еще одной распространенной ошибкой является привязка плотности пикселей к диагонали дисплея. В большинстве случаев это, в самом деле, позволяет приблизительно прикинуть значение данной величины.
Но на практике соотношение сторон дисплея далеко не всегда одинаково: оно может быть как 18:9, так и, скажем, 22:9.
Так что для получения точного результата следует высчитывать площадь дисплея и делить на общее число пикселей, которое уже действительно определяется исключительно разрешением.
Артефакты вроде моноброви, выреза или отверстия в данном случае не принимаются во внимание.
Какая бывает PPI в смартфонах
В современных условиях, если не принимать во внимание ультрабюджетные модели с SD матрицами, где вообще говорить о каком-то качестве нелепо, минимальным можно считать дисплей с разрешением HD+ (720p) и диагональю около 6,5 дюйма.
Примерно такой, как у Xiaomi Redmi 9A. У таких устройств плотность пикселей колеблется в районе 260-270 ppi.
У более серьезных аппаратов среднего класса при той же диагонали разрешение соответствует FullHD+ (1080p). И здесь плотность пикселей может быть от 390 до 420 ppi.
Что касается флагманов, и особенно – премиум-класса, то там всё достаточно индивидуально.
Вот несколько цифр:
Вот только даже у самых дорогих моделей AAA брендов подобные значения как-то не прижились.
Чем выше PPI – тем лучше? Или.
Специалисты еще несколько лет назад достоверно установили: для подавляющего большинства людей пороговой является плотность пикселей 350 ppi, что в реалиях смартфонов соответствует разрешению FullHD.
Разницу между ней и более высокими величинами они не различают.
Отсюда проистекает неутешительный вывод: покупатели флагманских моделей платят свои деньги… за понты молодежи внушительные циферки!
Нет, есть какой-то крохотный процент людей с аномально острым зрением, которые, приглядевшись, смогут ощутить разницу. Но даже они вряд ли смогут это делать в процессе повседневного пользования смартфоном.