Плотность пикселей PPI — что это такое и как влияет на изображение | Смартфоны | Блог

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

Что такое PPI

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

Очевидно, что чем меньше размер пикселей, тем менее они заметны. Однако с уменьшением размера пикселя неизбежно вырастет их количество (мы же не хотим, чтобы экран тоже уменьшался). О количестве пикселей говорит такой параметр, как разрешение экрана. Например, разрешение 2400х1080 означает, что на экране умещается 2400 пикселей по горизонтали и 1080 по вертикали. Много это или мало?

Чтобы ответить на этот вопрос, одного разрешения недостаточно, ведь неизвестна величина экрана. А вот если поделить количество пикселей по горизонтали на ширину экрана (или по вертикали – на высоту), то получится PPI — количество пикселей на дюйм длины (по-английски PPI так и расшифровывается — «Pixel Per Inch», в переводе на русский — «Пикселей На Дюйм»). Так, 200 PPI означает, что на дюйм экрана приходится 200 пикселей.

PPI, разрешение и размер экрана

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

Так, для смартфона Samsung Galaxy S21+ с 6.7-дюймовым экраном, имеющим разрешение 2400 на 1080, плотность пикселей будет составлять

Сколько PPI нужно на самом деле

Установлено, что большинство людей с остротой зрения 10/10 способны различить объекты размером 1 угловую минуту. Это проистекает из устройства нашего глаза, точнее, из количества колбочек, воспринимающих свет.

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

Значение плотности пикселей, соответствующее этому размеру, равно 358 PPI. Таким образом, для большинства людей более высокая плотность пикселей смысла просто не имеет.

PPI и тип устройства  

Теперь для сравнения возьмем другое устройство. Например, 65-дюймовый телевизор Sony KD65A8BR2.

При разрешении в 3840х2160 плотность пикселей составляет всего 67! Почему так мало? Потому что телевизор мы смотрим на расстоянии 2-5 метров, а не 25 сантиметров. А та же 1 угловая минута на 2 метрах соответствует 0,5 мм. Т.е. максимальный PPI на таком расстоянии составит всего 50.

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

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

Устройство	Расстояние до экрана	Оптимальное значение PPI
Смартфон	20-30 см	350-400
Планшет	40-60 см	200-250
Ноутбук	60-80 см	150-200
Монитор	80-100 см	100-150
Телевизор	1-5 м	40-100

Следует отметить, что эти значения будут приблизительными.

Во-первых, расстояние от экрана до глаз у каждого свое: кто-то «утыкается носом» в телефон, кто-то держит его «на отлете». Кто-то сидит в метре от телевизора, а у кого-то он висит на стене, метрах в 5 от дивана. Во-вторых, на понятие «хорошего» PPI влияет уровень развития техники.

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

Что такое плотность пикселей и количество на дюйм (PPI)?

Опубликовано 30.09.2020, 09:09   · Комментарии:15

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

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

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

Например, стандартное разрешение Full HD 1920 × 1080 приведет к разной плотности пикселей (или соотношению пикселей на дюйм) на 24-дюймовом экране (92 PPI) и на 27-дюймовом экране (82 PPI).

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

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

Плотность пикселей и расстояние просмотра

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

Кроме того, некоторые приложения плохо масштабируются. Например, если у вас 27- дюймовый монитор 4K (163 PPI), вы можете найти 150% масштабирование как идеальное для вас, тогда как некоторые приложения масштабируются только до 100% и 200%.

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

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

Итак, если у вас 24-дюймовый монитор 1080p с плотностью пикселей примерно 92 пикселя на дюйм, вам нужно будет находиться на расстоянии 37 дюймов (94 см) от экрана; на таком расстоянии ваши глаза не смогут различать пиксели на мониторе.

Другими словами, при расстоянии просмотра 37 дюймов (или больше) 24-дюймовый монитор 1080p — это Retina. Если у вас 27-дюймовый монитор с разрешением 1080p, вам необходимо находиться на расстоянии 42 дюйма (107 см) от экрана и так далее.

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

Размер экрана	Разрешение экрана	Плотность пикселей	Оптимальное расстояние просмотра
24″	1920×1080	92 PPI	37″ (94cm)
24″	2560×1440	122 PPI	28″ (71cm)
24″	3840×2160	184 PPI	19″ (48cm)
27″	1920×1080	82 PPI	42″ (107cm)
27″	2560×1440	109 PPI	32″ (81cm)
27″	3840×2160	163 PPI	21″ (53cm)
32″	1920×1080	70 PPI	49″ (124cm)
32″	2560×1440	93 PPI	37″ (94cm)
32″	3840×2160	140 PPI	25″ (64cm)
29″ UltraWide	2560×1080	96 PPI	36″ (91cm)
34″ UltraWide	2560×1080	82 PPI	42″ (107cm)
34″ UltraWide	3440×1440	110 PPI	31″ (79cm)
38″ UltraWide	3840×1600	111 PPI	31″ (79cm)
43″	3840×2160	104 PPI	33″ (84cm)

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

Конечно, если вам нужно лучшее качество изображения, стремитесь к более высокой плотности пикселей. Мы не советуем приобретать монитор с плотностью пикселей ниже ~ 90 PPI, если нет другой альтернативы.

Что касается телевизоров, то в этой статье вы можете увидеть, как сравниваются разрешения 1080p и 4K с точки зрения расстояния просмотра и плотности пикселей.

Экраны и плотность пикселей. Основы UI дизайна — UXPUB

Мир – это ваш холст, но у него есть определенные ограничения.

Добро пожаловать в четвертую часть основ UI-дизайна. На этот раз мы рассмотрим экраны, для которых вы, вероятно, будете проектировать. Это также часть бесплатных глав из книги «Designing User Interfaces».

99% интерфейса = пиксели экрана*

• 1% предназначен для голосовых интерфейсов и, возможно, в ближайшем будущем для нейронных соединений.

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

На заре Интернета все было довольно просто – вы проектировали где-то между разрешением в 640 x 480 и 800 x 600 пикселей. Мы, конечно, можем вернуться еще дальше – к первому Macintosh или самому первому десктопному интерфейсу Xerox, но давайте возьмем за основу старые цветные ЭЛТ-мониторы. Именно тогда я начал проектировать для Интернета (1998).

У меня был такой 🙂

Но это было в конце 90-х, и после этого все начало быстро меняться. Большинство дисплеев той эпохи имели одинаковые диапазоны разрешения, были очень тяжелыми и не могли отображать слишком много цветов. У них также была низкая частота обновления, что приводило к некачественному скроллу страницы. Дисплеи той эпохи часто ограничивали визуальные возможности веб-сайтов.

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

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

Быстрое сравнение. Типичный ЭЛТ-дисплей конца 90-х годов имел разрешение примерно в 6 раз меньше разрешения дисплея нынешнего iPhone, который намного меньше по размеру

PPI или пиксели на дюйм

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

Руководство дизайнера по DPI и PPI

Но в чем разница?

Разрешение – это количество отдельных пикселей дисплея. Например, первый iPhone имел базовое разрешение 320 x 480. Apple решила, что такого разрешения должно быть достаточно для удобного интерфейса, поэтому установила для платформы базовую планку плотности 1x.

Источник: Engadget

Все изменилось после появления iPhone 4 с Retina-дисплеем. Суть нового дисплея заключалась в том, что пиксели были настолько плотными, что больше не было видно отдельных пикселей. Базовое (или 1x) разрешение было таким же, как у предыдущего iPhone, но плотность пикселей была множителем этого разрешения, что приводило к более четкому тексту и изображениям. iPhone 4 удвоил количество пикселей до 640 x 960, но фактический дизайн элементов был сохранен на уровне 320 x 480 и увеличен на устройстве.

Хорошо, но почему дизайн все еще вел себя, как 320 x 480? Почему бы просто не использовать 640 x 960 в качестве «видимого разрешения»?

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

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

Например, современный iPhone X использует базовое разрешение 375 на 812 пикселей, но фактическое количество пикселей в три раза больше (3x) и составляет 1125 на 2436 пикселей.

Приведу пример – если вы проектируете кнопку, вам нужно сделать ее высотой не менее 44 точек. Это означает, что при проектировании в масштабе 1x это будет 44 пикселя (при 1x пиксель – это то же самое, что и точка), а при 2x это будет 88 пикселей, но в вашем дизайне будут все те же 44 точки.

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

Но вам не нужно помнить об этом

Большинство инструментов дизайна предоставляют вам шаблон 1x для всех популярных размеров экрана. Вы просто проектируете на 1x, а закодированный интерфейс автоматически масштабируется. Какое облегчение! ?

Но имейте в виду, что есть фрагментация.

Что такое фрагментация?

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

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

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

На данный момент у актуальных моделей iPhone есть 5 возможных разрешений

Но больше всего страдает фрагментация внутри одной категории устройств. Самый распространенный пример – мобильный телефон – имеет так много возможных разрешений и соотношений сторон, что невозможно сделать один дизайн подходящий для всех. В магазине Google Play представлены десятки разрешений экрана для мобильных Android-устройств. Несколько лет назад Apple использовала более последовательный набор настроек, но с тех пор отказалась от этого пути и перешла к индивидуальным разрешениям почти для всех устройств.

Как бороться с фрагментацией?

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

Проще говоря: не создавайте дизайн специально для iPhone Pro Max. Проектируйте для iPhone Pro.

Доступность для большого пальца

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

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

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

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

Основные выводы

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

1. Всегда учитывайте плотность пикселей 1x.
2. Все инструменты дизайна имеют встроенные размеры экрана (не нужно их запоминать).
3. Сделайте основную навигацию доступной на мобильных устройствах.

В следующей статье из этой серии мы рассмотрим артборды и фреймы – пространство, в котором вы будете создавать дизайны.

Статьи из серии:

Часть 1: Заливки и границы. Основы UI дизайна

Часть 2: Все, что вам нужно знать о фигурах и объектах. Основы UI дизайна

Часть 3: Тени и размытие. Основы UI дизайна

Часть 4: Экраны и плотность пикселей. Основы UI дизайна

Часть 5: С чего начать проектирование мобильного приложения. Основы UI дизайна

Часть 6: 5 советов по улучшению дизайна кнопок. Основы UI дизайна

Плотность пикселей повысили в 20 раз

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

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

Достигнутый американскими учеными результат превосходит все существующие запросы. Даже при разрешении 32k созданной по этой технологии дисплей будет иметь диагональ всего шесть дюймов и плотность пикселей около 6 000 ppi. В лабораторных условиях удалось достичь показателя в 10 000 ppi, а теоретический максимум — вдвое больше. В опубликованной на портале IEEE Spectrum статье с описанием результатов разработки пока не указано, когда на рынке появятся подобные OLED-матрицы.

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

Вышеописанный метод позволяет создавать относительно дешевые панели с плотностью пикселей порядка 100-200 ppi. Для смартфонов, где нужна более высокая четкость картинки (в iPhone 12, например, — 460 ppi), используют другой метод. В нем органический светоизлучающий слой заключен между тончайшими листами металла. Они имеют микроскопические отверстия, пропускающие свет нужного оттенка. Эта технология дороже и сложнее в изготовлении. Кроме того, обе они имеют ограничения по плотности пикселей, которые будут достигнуты уже в ближайшие годы.

Изображение наностолбиков, полученное при помощи сканирующего электронного микроскопа

Предложенный инженерами Samsung и учеными из Стэнфордского университета способ подразумевает сравнительно дешевую и более перспективную альтернативу. В их технологии излучающий белый свет слой органического материала с одной стороны закрыт серебряной фольгой, а с другой — метаповерхностью. Она состоит из огромного количества наностолбиков высотой 80 нанометров и диаметром 100 нанометров.

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

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

Вывод чётких изображений на экранах с высокой плотностью пикселей / Хабр

Много лет тому назад существовали мониторы с разными разрешениями, а после того, как индустрия перешагнула отметку в 1024×768, экраны, с увеличением разрешения, становились больше.

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

Далее, в 2010 году, вышел iPhone 4 (ёшкин кот, 11 лет назад), разрешение его экрана составляло 640×960. А в iPhone 3 имелся экран почти такого же размера, но с разрешением 320×480. Разрешение выросло вдвое, а физический размер экрана остался примерно таким же, как раньше. В результате вдвое выросла плотность пикселей экрана.

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

В веб-разработке соотношение логических и физических пикселей известно как DPR (Device Pixel Ratio). DPR iPhone 4 равняется 2 (иногда такие экраны называют «2x-экранами» или «2dppx-экранами»).

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

Насколько популярны экраны с высокой плотностью пикселей?

Мэтт Хоббс, который занимается проектом

gov.uk

, любезно предоставил мне данные за апрель 2021 года по плотности пикселей экранов устройств посетителей сайта. Я поработал с этими данными и оказалось, что 80% пользователей ресурса применяют устройства, DPR которых составляет 1,5 и выше. А именно:

• Это — более 99,9% их пользователей, применяющих мобильные телефоны.
• Это — 32% их пользователей с обычными компьютерами.
• Это — 78% их пользователей, работающих с ресурсом на планшетах.

Конечно, gov.uk — это сайт, ориентированный, в основном, на Великобританию, но его аудиторию составляют широкие слои населения страны. Это — не только «технари» и богатые люди. Полагаю, на основе вышеприведённых данных мы можем с высокой долей уверенности в своей правоте сделать следующие выводы:

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

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

Зачем ориентироваться на нужды экранов с высокой плотностью пикселей?

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

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

0,5x-изображение
1x-изображение

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

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

Сжатие изображений для экранов с высокой плотностью пикселей

Вот — 1x-версия нашего изображения шириной 400 пикселей.

1x-изображение (WebP, качество 80, размер 14,9 Кб) / запасная ссылка

Я преобразовал изображение в формат WebP с уровнем качества 80. Если попробовать более низкий уровень качества — начнутся потери серьёзных деталей изображения. Размер графического файла составляет 14,9 Кб. Неплохо!

Если я попробую, пользуясь теми же настройками, сделать 2x-версию того же изображения, его размер уже будет составлять 45,2 Кб. Это довольно много. Количество пикселей, формирующих изображение, выросло в 4 раза. Но нужно ли, создавая такой вариант изображения, пользоваться старыми настройками?

Вот — пара вариантов 2x-изображения.

Примечание: Эти два изображения надо вывести в таком же размере, что и предыдущее.

2x-изображение (WebP, качество 80, размер 45,2 Кб) / запасная ссылка
2x-изображение (WebP, качество 44, размер 21,2 Кб) / запасная ссылка

На мой взгляд, 2x-версия изображения, размер файла которого составляет 21,2 Кб, выглядит достаточно хорошо. Это — не то же самое, что и картинка размером 45,2 Кб, но сжатие эту картинку не испортило.

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

Примечание: исходные файлы тут те же, что и в двух предыдущих примерах, но они при выводе на страницу должны быть увеличены в 2 раза.

2x-изображение (WebP, качество 80, размер 45,2 Кб), увеличенное в 2 раза / запасная ссылка
2x-изображение (WebP, качество 44, размер 21,2 Кб), увеличенное в 2 раза / запасная ссылка

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

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

Для того чтобы получить 2x-изображение, я воспользовался Squoosh.app и уменьшал его оригинал до тех пор, пока оно не приняло размер, в котором оно будет выводиться на странице. Потом я просто понижал уровень качества до тех пор, пока не ухудшился внешний вид изображения.

В результате оказалось, что можно перейти от 1x-изображения, размер файла которого составляет 14,9 Кб, к 2x-изображению с файлом размером в 21,2 Кб, и при этом, сильно выиграв в резкости изображения, не слишком серьёзно увеличить размеры его файла.

Для экранов, обладающих ещё более высокой плотностью пикселей, качество можно понижать ещё сильнее, но не так сильно, как при переходе от 1x-варианта к 2x-варианту, поэтому в данном случае игра не всегда стоит свеч.

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

Подготовка 1x- и 2x-изображений — это не всегда просто и понятно

Вот — код, демонстрирующий схему описания простого отзывчивого изображения:

<img
  srcset="
    image-700.jpg   700w,
    image-1000.jpg 1000w,
    image-1300.jpg 1300w,
    image-1600.jpg 1600w
  "
  sizes="…"
  alt="…"
/>

У меня есть достаточно подробная

статья

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

srcset

сообщает браузеру о том, какие версии изображения, имеющие разную ширину в пикселях, имеются в его распоряжении. Атрибут

sizes

сообщает браузеру о размере элемента

<img>

в CSS-пикселях.

Получается, что браузер может выбирать подходящее изображение, рассуждая примерно следующим образом: «Так, это изображение будет выведено в элементе шириной 500 CSS-пикселей, но сделано это будет на 2x-экране, поэтому я загружу изображение image-1000.jpg». Замечательно!

Правда, всё не так уж и замечательно. Предположим, мы подготовили изображение image-1000.jpg в расчёте на то, что оно будет выводиться на мобильном устройстве с экраном, отличающимся высокой плотностью пикселей. Поэтому мы сохранили это изображение в низком качестве. На мобильном устройстве результат будет очень хорошим, пользователь увидит резкое изображение, на загрузку которого не потребуется много трафика. Но, к несчастью, браузер может выбрать то же самое изображение на настольном устройстве с 1x-экраном, и выглядеть это изображение будет плохо, вроде вышеприведённого увеличенного изображения красной панды.

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

Как решить эту проблему?

«Ленивое» решение

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

блога

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

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

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

<picture>
  <source type="image/avif" srcset="red-panda.avif" />
  <source type="image/webp" srcset="red-panda.webp" />
  <img src="red-panda. jpg" alt="A red panda" />
</picture>

Вот — варианты этого изображения в разных форматах.

Изображение в формате JPEG (размер файла — 99,2 Кб)
Изображение в формате WebP (размер файла — 57,5 Кб) / запасная ссылка
Изображение в формате AVIF (размер файла — 37,5 Кб) / запасная ссылка

Этот метод далёк от идеала. Размер WebP-файла составляет 57,5 Кб, но мы уже видели, что изображение такого формата, со знанием дела оптимизированное для мобильных устройств, занимает 21,2 Кб. Налицо серьёзная разница в размерах файлов. Правда, большая часть пользователей загрузит AVIF-файл, размер которого составляет 37,5 Кб. И тут ещё нужно учесть нагрузку на систему, связанную с декодированием достаточно крупных изображений, но… но…

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

Но не будем руководствоваться ленью. Сделаем всё как нужно.

Полноценное решение

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

<picture>

и

<source>

, к счастью, позволяют нам это сделать.

<picture>
  <source media="(-webkit-min-device-pixel-ratio: 1.5)" srcset="…" />
  <img srcset="…" alt="A red panda" />
</picture>

В теге

<source>

используется медиазапрос (

-webkit-min-device-pixel-ratio: 1.5

), нацеленный на устройства, пиксельная плотность экранов которых составляет, как минимум, 1,5x. «Правильный» способ работы с изображениями, соответствующий веб-стандартам, заключается в использовании конструкции (

min-resolution: 1. 5x

), но браузер Safari это не поддерживает. Поэтому остановимся на

-webkit-min-device-pixel-ratio

. Эта

конструкция

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

А теперь нужно лишь разобраться с атрибутами sizes и srcset. В настоящий момент один и тот же блок sizes надо повторять в <img> и в каждом <source>, но я работаю над изменением спецификации, в результате настанет время, когда будет достаточно одного такого атрибута в теге <img>.

Вот как выглядит атрибут sizes для «больших» изображений из моего блога:

<picture>
  <source
    media="(-webkit-min-device-pixel-ratio: 1.5)"
    srcset="…"
    sizes="
      (min-width: 1066px) 743px,
      (min-width: 800px) calc(75vw - 57px),
      100vw
    "
  />
  <img
    srcset="…"
    sizes="
      (min-width: 1066px) 743px,
      (min-width: 800px) calc(75vw - 57px),
      100vw
    "
    width="1598"
    height="1026"
    alt="A red panda"
  />
</picture>

Всё это значит, что при ширине области просмотра в 1066px или большей, ширина изображения будет зафиксирована на значении 743px. При ширине области просмотра в 800px или больше, размер изображения будет равняться 75% ширины области просмотра за вычетом 57px. А в других случаях изображение займёт всю ширину области просмотра. Значения в

sizes

не обязательно должны быть, как здесь, на 100% точными, но чем они точнее — тем лучше браузер сможет выбрать подходящее изображение.

А как насчёт srcset? Тут, в случае с 1x, я могу срезать кое-какие углы. Статистические данные указывают на то, что 1x-экраны имеются, главным образом, в настольных устройствах, для которых характерны более широкие, чем у мобильных устройств, области просмотра. В данном случае я считаю, что разумно будет предположить, что область просмотра, вероятно, будет иметь ширину 1066px или больше. Поэтому тут я снова немного дам волю лени и сделаю одно изображение для 1x-пользователей шириной 743w.

<picture>
  <source
    media="(-webkit-min-device-pixel-ratio: 1.5)"
    srcset="…"
    sizes="
      (min-width: 1066px) 743px,
      (min-width: 800px) calc(75vw - 57px),
      100vw
    "
  />
  <img src="1x-743. jpg" alt="A red panda" />
</picture>

Так как в

<img>

имеется лишь один атрибут

src

, я могу избавиться тут от

sizes

.

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

А как быть с 2x-изображениями? Ширина области просмотра экранов мобильных устройство обычно находится в районе 320-420px, поэтому я, если говорить об областях просмотра минимальной ширины, собираюсь остановиться на 800w. О том, что я выбрал для самых широких областей просмотра, я уже рассказал. Это — 1598w. У меня никогда нет полной уверенности в том, сколько промежуточных вариантов изображений нужно готовить, поэтому я сделаю лишь один такой вариант — 1200w.

<picture>
  <source
    media="(-webkit-min-device-pixel-ratio: 1. 5)"
    srcset="2x-800.jpg 800w, 2x-1200.jpg 1200w, 2x-1598.jpg 1598w"
    sizes="
      (min-width: 1066px) 743px,
      (min-width: 800px) calc(75vw - 57px),
      100vw
    "
  />
  <img src="1x-743.jpg" alt="A red panda" />
</picture>

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

Но это — лишь JPEG! Добавим в наш код ещё пару форматов.

<picture>
  <source
    type="image/avif"
    media="(-webkit-min-device-pixel-ratio: 1.5)"
    srcset="2x-800.avif 800w, 2x-1200.avif 1200w, 2x-1598.avif 1598w"
    sizes="
      (min-width: 1066px) 743px,
      (min-width: 800px) calc(75vw - 57px),
      100vw
    "
  />
  <source
    type="image/webp"
    media="(-webkit-min-device-pixel-ratio: 1.5)"
    srcset="2x-800.webp 800w, 2x-1200.webp 1200w, 2x-1598.webp 1598w"
    sizes="
      (min-width: 1066px) 743px,
      (min-width: 800px) calc(75vw - 57px),
      100vw
    "
  />
  <source
    media="(-webkit-min-device-pixel-ratio: 1. 5)"
    srcset="2x-800.jpg 800w, 2x-1200.jpg 1200w, 2x-1598.jpg 1598w"
    sizes="
      (min-width: 1066px) 743px,
      (min-width: 800px) calc(75vw - 57px),
      100vw
    "
  />
  <source type="image/avif" srcset="1x-743.avif" />
  <source type="image/webp" srcset="1x-743.webp" />
  <img src="1x-743.jpg" alt="A red panda" />
</picture>

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

The Guardian

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

Accept

.

Итоги

Буду ли я, вместо «ленивого» подхода, пользоваться подходом «полноценным»? Готовя изображения для этого блога, возможно, не буду. Какая-то часть меня прямо-таки наслаждается процессом ружного сжатия изображений и их преобразования в современные форматы, но я не думаю, что готов повторять эту процедуру по 12 раз для каждой картинки. С меня хватит и 3 раз.

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

Как вы оптимизируете изображения для своих сайтов?

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

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

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

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

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

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

ДРУГИЕ ЯЗЫКИ

Использование дисплея Retina — Служба поддержки Apple (RU)

Узнайте о дисплее Retina вашего компьютера Mac.

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

Компьютеры Mac, оснащенные дисплеем Retina

Модели MacBook Pro:

• Модели MacBook Pro (16 дюймов), представленные в 2019 г. Штатное разрешение: 3072 x 1920, 226 пикселей на дюйм. Поддержка миллионов цветов.
• Модели MacBook Pro (15 дюймов), выпущенные в 2012 г. или позднее, за исключением MacBook Pro (15 дюймов, середина 2012 г.). Штатное разрешение: 2880 x 1800, 220 пикселей на дюйм. Поддержка миллионов цветов.
• Модели MacBook Pro (13 дюймов), выпущенные в конце 2012 г. или позднее. Штатное разрешение: 2560 x 1600, 227 пикселей на дюйм. Поддержка миллионов цветов.

Модели MacBook Air, выпущенные в 2018 г. или позднее. Штатное разрешение: 2560 x 1600, 227 пикселей на дюйм. Поддержка миллионов цветов.

Модели MacBook, выпущенные в 2015 г. или позднее. Штатное разрешение: 2304 x 1440, 226 пикселей на дюйм. Поддержка миллионов цветов.

Модели iMac:

• Модели iMac (27 дюймов), выпущенные в 2014 г. или позднее. Штатное разрешение: 5120 x 2880. Модели, выпущенные в 2014 и 2015 гг., поддерживают миллионы цветов, а выпущенные в 2017 г. или позднее — один миллиард цветов.
• Модели iMac (21,5 дюйма), выпущенные в 2015 г. или позднее, за исключением iMac (21,5 дюйма, 2017 г.) и iMac (21,5 дюйма, конец 2015 г.). Штатное разрешение: 4096 x 2304. Модель с дисплеем Retina, выпущенная в 2015 г., поддерживает миллионы цветов, а модели, выпущенные в 2017 г. или позднее — один миллиард цветов. 

Все модели iMac Pro. Штатное разрешение: 5120 x 2880. Поддержка одного миллиарда цветов.

Изменение разрешения дисплея

Компьютер Mac автоматически выбирает оптимальное для дисплея разрешение по умолчанию. Чтобы изменить разрешение:

1. Выберите меню Apple () > «Системные настройки».
2. Щелкните «Мониторы».
3. Выберите «Масштабированное», затем выберите любое из четырех или пяти масштабированных разрешений, в зависимости от модели компьютера Mac. В масштабированных разрешениях текст и объекты могут выглядеть крупнее и заметнее либо мельче, оставляя больше места для окон и приложений.

Если также используется внешний дисплей

Если внешний дисплей используется для расширения рабочего стола, можно выбрать предпочтительное разрешение для каждого из дисплеев. Чтобы отобразить дополнительные разрешения для внешнего дисплея, нажмите и удерживайте клавишу Option при выборе параметра «Масштабированное».

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

При видеоповторе дисплеев можно оптимизировать изображение для внешнего дисплея, а не для встроенного.

Использование приложений с дисплеем Retina

Если приложение выглядит на дисплее Retina или внешнем дисплее с высоким разрешением не так, как вы ожидали, попробуйте открыть приложение в режиме низкого разрешения:

1. Выйдите из приложения.
2. Откройте папку «Программы».
3. Выделите приложение одним щелчком, затем выберите пункт «Свойства» в меню «Файл».
4. В открывшемся окне «Свойства» установите флажок «Открыть в низком разрешении». 
   
5. Закройте окно «Свойства» и снова откройте приложение.

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

Использование приложения Boot Camp и Windows с дисплеем Retina

• Приложение Boot Camp поддерживает разрешения до 3840 x 2160.
• Когда компьютер Mac использует ПО поддержки Windows от компании Apple, ОС Windows запускается с максимальным поддерживаемым разрешением, которое составляет 144 точки (пикселя) на дюйм (увеличение 150 %). В результате объекты выглядят мелкими на большом пустом пространстве экрана. Для регулировки этого параметра в Windows можно использовать элемент панели управления Windows «Экран».

 

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

Дата публикации: 12 апреля 2021 г.

Запутались в дисплеях HiDPI и Retina? ― Понимание плотности пикселей в эпоху 4K

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

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

По состоянию на 2014 год самой продаваемой ЖК-моделью является 23-дюймовая модель, поддерживающая дисплей с разрешением 1920 x 1080 пикселей (полное HD), но 4K-дисплеи, которые могут похвастаться в четыре раза большим разрешением, быстро растут, и существует новая тенденция перехода к высокому разрешению. (увеличение плотности пикселей) без увеличения размера экрана

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

Примечание. Это перевод с японского языка статьи ITmedia «ЖК-монитор ITmedia, курс III: запутались в дисплеях HiDPI и Retina? Понимание плотности пикселей, важного элемента при выборе дисплеев в эпоху 4K», опубликованной 11 декабря 2014 г. Copyright 2014 ITmedia Inc. Все права защищены.

Ускоряющаяся тенденция к высокому разрешению: что следует отметить в отношении дисплеев 4K

Прогнозируется, что в течение следующих нескольких лет 4K заменит Full HD в качестве основного разрешения.4K, конечно же, представляет 4000 и относится к количеству пикселей по горизонтали около этого числа. В настоящее время существует два стандарта разрешения 4K, а именно «DCI 4K» и «UHD 4K.

».

DCI 4K вдвое превышает разрешение проекторов 2048 x 1080 пикселей (4096 x 2160/прибл. 17:9) и является разрешением 4K в киноиндустрии. С другой стороны, UHD 4K (также называемый UHDTV 4K) — это разрешение 4K для телевизионной индустрии, определенное Международным союзом электросвязи (ITU). Его разрешение по горизонтали в два раза больше, чем 1920 x 1080 пикселей Full HD (3840 x 2160/16:9).

Дисплеи 4K для современных ПК в основном имеют разрешение UHD 4K, как и телевизоры 4K. Тем не менее, есть несколько продуктов, которые приняли стандарт DCI 4K, например монитор управления цветом ColorEdge CG318-4K для видеопроизводства, который будет выпущен EIZO весной 2015 года.

4K — это высокое разрешение с вдвое большим числом пикселей по вертикали и горизонтали, чем в формате Full HD, и относится к разрешениям с числом пикселей по горизонтали около 4 миллионов.На фотографии EIZO ColorEdge CG318-4K. Он поддерживает разрешение 4096 x 2160 пикселей/прибл. Дисплей 17:9, который превосходит дисплей с разрешением 3840 x 2160 пикселей/16:9 (UHD 4K), часто используемый в дисплеях 4K для ПК. Обратите внимание на разницу в горизонтальном разрешении.

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

Единственный интерфейс для 4K-дисплеев, представленный в настоящее время на рынке, который поддерживает отображение 4K с частотой 60 Гц, — это DisplayPort 1.2 с пропускной способностью 21,6 Гбит/с. Это связано с тем, что для передачи 4K 60 Гц требуется полоса пропускания 16 Гбит/с (3840 x 2160 пикселей, 32-битный цвет, 60 Гц). Это намного превышает пропускную способность, поддерживаемую DisplayPort 1.1 (10,8 Гбит/с), HDMI 1.4a (10,2 Гбит/с) и DVI Dual Link (7,4 Гбит/с). По этой причине следует отметить, что в настоящее время при подключении через DVI-D или HDMI дисплей 4K работает только с частотой 30 Гц.

Однако, что касается HDMI, пропускная способность нового стандарта HDMI 2.0 (HDMI 2.0 Level A) была расширена до 18 Гбит/с, а новые дисплеи способны отображать 4K 60 Гц с HDMI 2. 0 ввод был объявлен. По мере того как компоненты видеовыхода ПК (GPU) и других устройств начинают поддерживать HDMI 2.0, ситуация будет постепенно улучшаться.

Слева направо: входные видеоразъемы DVI-D, HDMI и DisplayPort. Дисплей 4K 60 Гц требует подключения через DisplayPort 1.2. Dual Link DVI-D и текущий HDMI 1.4a поддерживают только отображение 4K с частотой 30 Гц.

Если дисплей подключен через DisplayPort 1.2, настройку можно изменить на отображение 4K 60 Гц в настройках ОС. На изображении выше показана настройка для 4K 60 Гц на дисплее EIZO FlexScan EV3237 с диагональю 31,5 дюйма и разрешением 4K.

Текущая поддержка дисплея 4K
Интерфейс подключения	Полоса пропускания	Дисплей 4K 30 Гц	Дисплей 4K 60 Гц
DisplayPort 1. 2	21,6 Гбит/с	Да	Да
DisplayPort 1.1 / 1.1a	10,8 Гбит/с	Да	№
HDMI 1.4 / 1.4a	10,2 Гбит/с	Да	№
Двухканальный DVI	7.4 Гбит/с	Да	№

Стандарт HDMI 2.0 уровня B способен передавать сигналы 4K 60 Гц через полосу пропускания HDMI 1.4, но глубина цвета составляет YUV 4:2:0, а цвета растекаются, поэтому он не подходит для дисплеев. Нам придется дождаться распространения HDMI 2.0 уровня A для правильного отображения 4K 60 Гц через HDMI.

Более того, бывают случаи, когда система передачи 60 Гц дисплея 4K создает проблемы, даже если DisplayPort 1.2 используется. Хотя это и не широко известно, существуют две системы передачи, используемые для поддержки отображения с частотой 60 Гц с доступными в настоящее время дисплеями 4K, а именно MST (многопотоковая передача) и SST (однопотоковая передача).

В системе MST ОС распознает 4K как двухэкранный дисплей с разрешением 1920 x 2160 пикселей, поэтому для объединения вывода на один экран требуется драйвер графического процессора. В зависимости от используемой версии графического процессора и драйвера возникали такие проблемы, как синхронизация рендеринга в левой и правой частях экрана или неработоспособность в среде с несколькими дисплеями.

Причина, по которой видеосигнал целенаправленно разделяется на два экрана для передачи, заключается в том, что поставка масштабирующих устройств для отображения (микросхем для обработки видео), которые могут передавать 4K 60 Гц на один экран, отставала от поставки ЖК-панелей 4K. По этой причине у ранних дисплеев 4K не было другого выбора, кроме как использовать систему MST.

Напротив, система SST (Single Stream Transport) может передавать разрешение 4K как один экран, поэтому она способна отображать 4K 60 Гц без внутреннего синтеза изображения или других процессов.У него нет проблем, возникающих из-за разделения сигнала на два экрана, таких как MST, но есть некоторые устройства с DisplayPort 1. 2, которые имеют графические карты, не поддерживающие SST, поэтому карту следует проверить во время покупки, чтобы узнать, поддерживает ли она ТСТ. Кстати, дисплей EIZO FlexScan EV3237 с диагональю 31,5 дюйма и разрешением 4K использует систему SST.

Подобные проблемы совместимости, скорее всего, будут решены в не столь отдаленном будущем, поскольку дисплеи 4K становятся все более популярными, а поддержка со стороны графического процессора и драйверов улучшается.Конечно, эти ограничения применимы только к отображению 4K с частотой 60 Гц, поэтому, если вас устраивает частота 30 Гц, текущие HDMI 1.4a и DVI Dual Link полностью способны отображать 4K.

Дисплеи 5K уже коммерциализированы, а тестовые трансляции 8K запланированы на 2016 г.

Переход на дисплеи с высоким разрешением не останавливается на 4K. 27-дюймовые дисплеи (5120 x 2880 пикселей/16:9), поддерживающие 5K, уже поступили в продажу. Вопрос в том, для чего будет использоваться очень высокое разрешение 5K, но есть преимущество в том, что панели инструментов и другие элементы можно разместить на экране при отображении контента 4K с помощью программного обеспечения для редактирования видео.

Однако текущий DisplayPort 1.2 не поддерживает вывод 5K, поэтому следует отметить, что на данный момент дисплеи 5K требуют специальной настройки для отправки видеосигналов по двум кабелям. Хотя новый стандарт DisplayPort 1.3, анонсированный в сентябре 2014 года, еще не выпущен на рынок, он поддерживает отображение 5K (5120 x 2880 пикселей) с частотой 60 Гц и одновременное отображение UHD 4K на двух экранах через гирляндную цепочку. Как только ПК (GPU) с поддержкой DisplayPort 1.3 появятся на прилавках магазинов, вывод сигнала 5K 60 Гц будет возможен с помощью одного кабеля.

DisplayPort 1.3 делает возможным отображение 5K (5120 x 2880 пикселей) с частотой 60 Гц с помощью одного кабеля. *Источник: презентация VESA (Ассоциация по стандартизации видеоэлектроники), которая является органом по стандартизации графических устройств ПК.

Более того, мир 8K, который последует за 4K и 5K, почти наступил. Согласно заявлению Министерства внутренних дел и связи Японии, тестовые трансляции в формате 8K начнутся в 2016 году, а обычные — в 2018 году.Тестовые модели дисплеев, совместимых с 8K (7680 x 4320 пикселей/16:9), появлялись на выставках и мероприятиях, связанных с видео, и переход к еще более высокому разрешению и четкости будет продолжаться быстрыми темпами.

Подход к изменению разрешения дисплея с высокой плотностью пикселей

Поскольку разрешение дисплеев становится все выше, новым элементом, который следует учитывать при выборе дисплея сегодня, является плотность пикселей. Плотность пикселей на дисплеях — это характеристика, указывающая степень четкости, и значение обычно выражается в ppi.Ppi означает «пикселей на дюйм» (а не на квадратный дюйм). Дюйм равен 2,54 сантиметра.

Уменьшение расстояния между пикселями (шага пикселя) без изменения размера экрана ЖК-дисплея увеличивает плотность пикселей на дюйм, и чем выше это число, тем выше четкость дисплея. Например, при 100 ppi на 2,54 сантиметра приходится 100 пикселей, а при 300 ppi на одинаковую ширину приходится 300 пикселей.

Разная плотность пикселей создает различия во внешнем виде.Изображение вверху имеет увеличенный шрифт 10pt, а изображение внизу представляет собой увеличенную миниатюру фотографии. При 96 ppi шероховатость пикселей очевидна, но при 192 ppi качество значительно улучшается. При разрешении 384 ppi изображение получается гладким, зернистость пикселей и неровные края диагональных линий больше не видны.

Сегодня наблюдается тенденция к быстрому увеличению плотности пикселей. Что касается автономных дисплеев, то в последнее время горячей темой являются дисплеи со сверхвысокой плотностью пикселей и высоким разрешением 4K, упакованные в размеры экрана 24-27 дюймов.Поначалу этот жанр привлекал внимание только некоторых состоятельных потребителей, но в 2014 году недорогие товары стали появляться на прилавках одна за другой, поэтому число постоянных пользователей, проявляющих интерес, увеличилось.

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

Что касается дисплеев ПК, большинство продуктов имеют плотность пикселей около 96 пикселей на дюйм, что соответствует плотности дисплея 96 точек на дюйм (точек на дюйм), которая является стандартом для пользовательского интерфейса рабочего стола Windows.Стандарт для нового начального экрана и других аспектов современного пользовательского интерфейса Windows 8 и более поздних версий — 135 dpi (автоматическое переключение между 100 %, 140 % и 180 % в зависимости от плотности пикселей устройства отображения), но стандарт для рабочий стол по-прежнему имеет разрешение 96 dpi.

Таким образом, до сих пор дисплеи ПК разрабатывались на основе предположения, что ОС и приложения будут иметь фиксированную плотность отображения (96 пикселей на дюйм для Windows). За этим предположением стоит стандарт 96 точек на дюйм, а размер экрана увеличивался с более высоким разрешением ЖК-панелей (увеличением количества пикселей), поэтому можно было просто считать, что чем выше разрешение (количество пикселей), тем больше рабочее пространство.

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

Это обычное мышление в отношении ЖК-дисплеев.Размер экрана увеличивался по мере увеличения разрешения ЖК-панелей, поэтому выбор дисплея с более высоким разрешением означал, что объем информации, отображаемой одновременно, был выше, а рабочее пространство больше.

Слева — 17-дюймовый квадратный экран SXGA (1280 x 1024 пикселей), а справа — широкий экран WUXGA 24,1 дюйма (1920 x 1200 пикселей). Как видите, более высокое разрешение и больший экран обеспечили гораздо большее рабочее пространство.
Напротив, когда речь идет о дисплеях со сверхвысокой плотностью пикселей класса 4K, более высокое разрешение (количество пикселей) не обязательно означает большее рабочее пространство. В последние годы плотность отображения (dpi) современного пользовательского интерфейса, ОС и приложений в Windows 8 и более поздних версиях предназначена для переменной, а не фиксированной. Другими словами, даже при одинаковом размере экрана плотность отображения не обязательно должна быть фиксированной. Благодаря функции масштабирования ОС дисплей можно плавно увеличивать.

Самым большим преимуществом этого является то, что он позволяет отображать очень высокое разрешение. Скажем, например, вы взяли 24-дюймовый дисплей UHD 4K и увеличили его так, чтобы рабочее пространство было эквивалентно 24-дюймовому Full HD.UHD 4K (3840 x 2160 пикселей) имеет разрешение по вертикали и горизонтали вдвое больше, чем Full HD (1920 x 1080 пикселей), поэтому для увеличенного дисплея будет масштабирование 200%.

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

EIZO FlexScan EV3237 31.5-дюймовый дисплей поддерживает отображение UHD 4K. Для большого внешнего дисплея он имеет высокую плотность пикселей (около 140 пикселей на дюйм) для плавного отображения очень высокой четкости. Этот продукт имеет большой 31,5-дюймовый экран, поэтому он также обеспечивает большую работу. пространство, но с 23,8-дюймовыми и 28-дюймовыми дисплеями 4K изображение слишком хорошее, поэтому для его увеличения необходимо использовать функцию масштабирования ОС.

Это разница в том, как UHD 4K (слева) и Full HD (справа) отображаются при одном и том же размере экрана. Фотографии икон сделаны примерно на одинаковом расстоянии от экрана.При разрешении UHD 4K (3840 x 2160 пикселей) дисплей увеличивается на 200%, а при разрешении Full HD (1920 x 1080 пикселей) значок отображается с таким же увеличением. Размер значков примерно одинаковый, но, как вы можете видеть, значок отображается в более высоком разрешении с разрешением UHD 4K.

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

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

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

Конечно, представленное выше увеличенное изображение рабочего пространства, эквивалентного Full HD, на 24-дюймовом 4K-дисплее — это только один пример. Если вам нужно большое рабочее пространство, даже если значки и текст немного меньше, вам просто нужно уменьшите увеличение.С другой стороны, если вы хотите иметь больший дисплей с улучшенной видимостью, даже если рабочее пространство меньше, вам просто нужно увеличить увеличение.Эта гибкость — еще одна вещь, которая дает преимущество дисплеям со сверхвысокой плотностью пикселей.

Это разница во внешнем виде, вызванная настройкой масштабирования на FlexScan EV3237 (31,5 дюйма/3840 x 2160 пикселей/прибл. 140 ppi). Изображение слева имеет обычное 100% увеличение, а изображение справа имеет увеличение 150%

Это пример отображения экрана на рабочем столе FlexScan EV3237. При 100-процентном увеличении можно полностью использовать разрешение UHD 4K 3840 x 2160 пикселей, но плотность пикселей составляет около 140 пикселей на дюйм, а шаг пикселя составляет около 0,18 мм, поэтому с нормального расстояния просмотра изображение кажется довольно маленьким (слева). Когда увеличение установлено на 150%, рабочее пространство становится меньше, но улучшается видимость текста и значков (справа).

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

Например, если для дисплея 4K выбран небольшой размер экрана, такой как 24 дюйма, как описано выше, коэффициент увеличения масштаба должен быть увеличен, чтобы обеспечить видимость. В результате у вас не может быть большого рабочего пространства по отношению к фактическое разрешение.Уменьшая расстояние, с которого просматривается экран, он может быть виден, даже если вы немного уменьшите коэффициент увеличения масштабирования. Однако, если вы подойдете слишком близко к дисплею, ваши глаза и шея должны будут совершать большие движения во время использования, что увеличит нагрузку на ваш организм, поэтому это не рекомендуется.

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

Слева FlexScan EV3237 (31.5 дюймов/3840 x 2160 пикселей/прибл. 140 пикселей на дюйм), а справа — FlexScan EV2436W (24,1 дюйма/1920 x 1200 пикселей/прибл. 94 пикселей на дюйм). Когда масштабирование на FlexScan EV3237 установлено на увеличение 150%, внешний вид текста и значков примерно такой же, как на FlexScan EV2436W при обычном увеличении. Внешний вид близок к стандарту пользовательского интерфейса рабочего стола Windows с разрешением около 96 точек на дюйм, поэтому параметр обеспечивает баланс между четкостью и рабочим пространством. Даже при увеличении 150%, используя преимущество 31.Экран с диагональю 5 дюймов обеспечивает большое рабочее пространство.

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

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

Что касается ОС Windows, то плотность отображения была изменяемой настройкой, начиная с Windows XP, но иногда она приводила к беспорядку в макете экрана, и почти не было приложений, поддерживающих ее, поэтому это не было практичной функцией.Функция увеличения масштаба достигла практического уровня, когда компоновка экрана не нарушалась, начиная с Windows 7.

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

Что касается Mac OS X, распространение дисплеев с высокой плотностью пикселей (называемых Apple «дисплеями Retina») продвигалось раньше, чем сторонниками Windows, поэтому оптимизация дизайна ОС с переменной плотностью отображения продвинулась дальше, чем предполагалось. есть с виндой. OS X Mavericks 10.9.3 и более поздние версии поддерживают отображение HiDPI на внешних дисплеях, поэтому проще комбинировать дисплеи с высокой плотностью пикселей, изготовленные другими компаниями.

Это виндовс 8.1 экран настройки коэффициента масштабирования. Если для дисплея UHD 4K установить значение «Очень большой — 200%», значки и текст будут отображаться в том же размере, что и на дисплее Full HD с тем же размером экрана. Вы также можете настроить размер текста определенных элементов, а не изменять размер всего на рабочем столе.

Состояние поддержки HiDPI операционной системой ПК
ОС	Поддержка HiDPI	Настройка плотности дисплея по дисплею
Windows 8.1 Modern UI	Yes	No
Windows 8.1 Desktop UI	Yes	Yes
Windows 8 Modern UI	Yes	No
Windows 8 Desktop UI	Yes	No
Windows 7 Desktop UI	Yes	No
Windows Vista Desktop UI	Limited	No
OS X Yosemite (10. 10)	Да	Да
OS X Mavericks (10.9.3 или новее)	Да	Да
OS X Mavericks (10.9.2 или более ранняя версия)	Ограничено (только встроенный дисплей)	Лимитед

Что касается приложений, офисный пакет Microsoft Office 2013 (Windows)/2011 (Mac), основные веб-браузеры и другие приложения начинают поддерживать HiDPI одно за другим.Программное обеспечение для редактирования изображений Adobe Photoshop Elements предлагает поддержку начиная с версии 13, а Photoshop CC имеет предварительную поддержку ручной установки 200%, поэтому заложена основа для полного использования дисплеев с высокой плотностью пикселей.

Что касается аппаратного обеспечения, то в последнее время GPU уже имеет производительность обработки, которую можно назвать избыточной для общего использования, поэтому даже ПК с не особенно высокой производительностью должны быть в состоянии работать с 4K-дисплеем (хотя наслаждаться 4K-играми и видео на них будет проблематично). другая история).В справочных целях статус поддержки GPU для дисплея EIZO FlexScan EV3237 с диагональю 31,5 дюйма и разрешением 4K представлен в таблице ниже.

Статус поддержки GPU для дисплея FlexScan EV3237 4K
Производитель	Продукт	DisplayPort (3840×2160 пикселей / 60 Гц)
драм	Radeon HD 7700 или новее	Да
	Radeon R7 или новее	Да
	Серия Fire Pro W или более поздняя версия	Да
NVIDIA	GeForce GTX 650 или новее	Да
	Серия Quadro K или более поздняя версия	Да
Интел	HD Graphics 4200 или новее	Да
яблоко	Mac Pro (конец 2013 г. , OS X 10.9.3 или выше, FirePro D300)	Да

Предыстория перехода на дисплеи с высокой плотностью пикселей

Эта тенденция к тому, чтобы высокая плотность пикселей стала популярной, сразу же началась, когда Apple начала внедрять дисплеи Retina в свои продукты, такие как iPhone, iPad и iMac в 2010 году. Эти дисплеи с высокой плотностью пикселей основаны на концепции обеспечения дисплея высокой четкости, который равна или превышает плотность пикселей, которую может различить сетчатка человеческого глаза.

На фото iPhone 6 Plus (слева) и iPad mini 3 (справа) с дисплеем Apple Retina. Даже присмотревшись к экранам, пиксели не различимы на дисплеях высокой четкости.

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

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

Таким образом, программная и аппаратная среды для поддержки отображения HiDPI были объединены, и в ответ производители дисплеев начали агрессивно внедрять дисплеи 4K, и импульс дисплеев со сверхвысокой плотностью пикселей резко возрос.

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

Дисплеи с высоким разрешением/высокой плотностью пикселей
Внешние дисплеи для ПК
Размер экрана	Разрешение	Соотношение сторон	Плотность пикселей	Шаг пикселя
Ширина 23 дюйма (каталожный номер)	1920 × 1080 пикселей	16:9	прибл.96 пикселей на дюйм	прибл. 0,27 мм
Ширина 23,8 дюйма (UHD 4K)	3840 × 2160 пикселей	16:9	прибл. 185 пикселей на дюйм	прибл. 0,14 мм
Сверхширокий 25 дюймов	2560 × 1080 пикселей	21:9	прибл.111 пикселей на дюйм	прибл. 0,23 мм
Квадрат 26,5 дюйма	1920 x 1920 пикселей	1:1	прибл. 102 точек на дюйм	прибл. 0,25 мм
Ширина 27 дюймов	2560 × 1440 пикселей	16:9	прибл.109 пикселей на дюйм	прибл. 0,23 мм
Ширина 28 дюймов (UHD 4K)	3840 × 2160 пикселей	16:9	прибл. 157 пикселей на дюйм	прибл. 0,16 мм
Сверхширокий 29 дюймов	2560 × 1080 пикселей	21:9	прибл. 96 пикселей на дюйм	прибл. 0,26 мм
Ширина 30 дюймов	2560 × 1600 пикселей	16:10	прибл. 101 точек на дюйм	прибл. 0,25 мм
Ширина 31,1 дюйма (DCI 4K)	4096 × 2160 пикселей	прибл. 17:9	прибл.149 пикселей на дюйм	прибл. 0,17 мм
Ширина 31,5 дюйма (UHD 4K)	3840 × 2160 пикселей	16:9	прибл. 140 пикселей на дюйм	прибл. 0,18 мм
Ширина 32 дюйма (UHD 4K)	3840 × 2160 пикселей	16:9	прибл.138 точек на дюйм	прибл. 0,18 мм
Сверхширокий 34 дюйма	3440 × 1440 пикселей	21:9	прибл. 110 пикселей на дюйм	прибл. 0,23 мм
Ширина 40 дюймов (UHD 4K)	3840 × 2160 пикселей	16:9	прибл.110 пикселей на дюйм	прибл. 0,23 мм
Встроенные дисплеи для ПК
Размер экрана	Разрешение	Соотношение сторон	Плотность пикселей	Шаг пикселя
11.ширина 6 дюймов	1920 × 1080 пикселей	16:9	прибл. 190 точек на дюйм	прибл. 0,13 мм
Ширина 13,3 дюйма	1920 × 1080 пикселей	16:9	прибл. 227 точек на дюйм	прибл. 0,11 мм
Ширина 12 дюймов	2160 × 1440 пикселей	3:2	прибл. 216 пикселей на дюйм	прибл. 0,12 мм
Ширина 13,3 дюйма	2560 × 1440 пикселей	16:9	прибл. 221 точек на дюйм	прибл. 0,12 мм
Ширина 13,3 дюйма	2560 × 1600 пикселей	16:10	прибл.227 точек на дюйм	прибл. 0,11 мм
Ширина 14 дюймов	3200 × 1800 пикселей	16:9	прибл. 256 пикселей на дюйм	прибл. 0,1 мм
Ширина 15,4 дюйма	2880 × 1880 пикселей	16:10	прибл.223 точки на дюйм	прибл. 0,12 мм
Ширина 15,6 дюйма (UHD 4K)	3840 × 2160 пикселей	16:9	прибл. 282 точек на дюйм	прибл. 0,09 мм
Планшет
Размер экрана	Разрешение	Соотношение сторон	Плотность пикселей	Шаг пикселя
Ширина 7 дюймов	1920 × 1200 пикселей	16:10	прибл. 323 точки на дюйм	прибл. 0,079 мм
Квадрат 7,9 дюйма	2048 × 1536 пикселей	4:3	прибл. 324 точки на дюйм	прибл. 0,078 мм
Ширина 8 дюймов	1920 × 1200 пикселей	16:10	прибл.283 точек на дюйм	прибл. 0,09 мм
8,9-дюймовый квадрат	2048 × 1536 пикселей	4:3	прибл. 288 точек на дюйм	прибл. 0,088 мм
Ширина 8,9 дюйма	2560 × 1600 пикселей	16:10	прибл.339 пикселей на дюйм	прибл. 0,075 мм
Ширина 9,7 дюйма	2048 × 1536 пикселей	4:3	прибл. 264 точки на дюйм	прибл. 0,096 мм
Ширина 10,1 дюйма	1920 × 1200 пикселей	16:10	прибл. 224 точки на дюйм	прибл. 0,113 мм
Ширина 10,5 дюйма	2560 × 1600 пикселей	16:10	прибл. 288 точек на дюйм	прибл. 0,088 мм
Смартфоны
Размер экрана	Разрешение	Соотношение сторон	Плотность пикселей	Шаг пикселя
Ширина 4 дюйма	1136 × 640 пикселей	прибл.16:9	прибл. 326 точек на дюйм	прибл. 0,078 мм
Ширина 4,3 дюйма	1280 × 720 пикселей	16:9	прибл. 342 точки на дюйм	прибл. 0,074 мм
Ширина 4,6 дюйма	1280 × 720 пикселей	16:9	прибл. 319 пикселей на дюйм	прибл. 0,08 мм
Ширина 4,7 дюйма	1334 × 750 пикселей	прибл. 16:9	прибл. 326 точек на дюйм	прибл. 0,078 мм
Ширина 4,95 дюйма	1920 × 1080 пикселей	16:9	прибл.445 пикселей на дюйм	прибл. 0,057 мм
Ширина 5 дюймов	1920 × 1080 пикселей	16:9	прибл. 441 точек на дюйм	прибл. 0,058 мм
Ширина 5,1 дюйма	1920 × 1080 пикселей	16:9	прибл.432 точек на дюйм	прибл. 0,059 мм
Ширина 5,2 дюйма	1920 × 1080 пикселей	16:9	прибл. 424 точек на дюйм	прибл. 0,06 мм
Ширина 5,2 дюйма	2560 × 1440 пикселей	16:9	прибл. 565 пикселей на дюйм	прибл. 0,045 мм
Ширина 5,5 дюйма	1920 × 1080 пикселей	16:9	прибл. 401 точек на дюйм	прибл. 0,063 мм
Ширина 5,6 дюйма	2560 × 1440 пикселей	16:9	прибл.525 пикселей на дюйм	прибл. 0,048 мм
Ширина 5,96 дюйма	2560 × 1440 пикселей	16:9	прибл. 493 точек на дюйм	прибл. 0,052 мм

Дисплеи ПК продолжают становиться все более разнообразными, включая 4K и HiDPI

.

Дисплеи ПК в настоящее время становятся все более разнообразными, включая представленные ранее тенденции 4K и HiDPI.Давайте обобщим тенденции размеров экрана, разрешения, плотности пикселей и соотношения сторон в современных дисплеях ПК.

Со второй половины 2000-х годов количество квадратных экранов с соотношением сторон 5:4 и 4:3 на рынке дисплеев для ПК снижается, в то время как широкоформатные экраны с соотношением сторон 16:9 и 16:10 растут и становятся все более популярными. учредил. В то же время произошел переход от квадратных экранов 17 и 19 дюймов к широким экранам 23 и 24 дюйма.

Существует также активная тенденция перехода к широким экранам с диагональю 27 дюймов и более в погоне за еще более комфортными условиями.Этот переход разделен между теми, кто ищет большее рабочее пространство, выбирая 3840 x 2160 пикселей (UHD 4K) или 2560 x 1440 пикселей (WQHD), и теми, кто ищет дисплей с большей видимостью по более низкой цене, выбирая 1920 x 1080 пикселей (full HD). ).

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

В то же время, идя в совершенно другом направлении, EIZO планирует весной 2015 года выпустить свой 26,5-дюймовый дисплей FlexScan EV2730Q с квадратной панелью и соотношением сторон 1:1. Это действительно уникальный размер экрана, но он отличается высокое разрешение с Full HD, растянутым по горизонтали до 1920 x 1920 пикселей, так что есть много рабочего пространства по вертикали и горизонтали.Учитывая большое количество пользователей, которые используют два дисплея Full HD рядом, он будет очень универсальным.

26,5-дюймовый жидкокристаллический дисплей EIZO FlexScan EV2730Q в настоящее время находится в стадии разработки. Приняв на вооружение очень редкую квадратную панель, компания предлагает новое применение.

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

Основные форматы бумаги
Тип бумаги	А4	В4	А3	A3 (длиннозернистый)	В3	А2
Размер бумаги (Ш × Д)	297 мм × 210 мм	364 мм × 257 мм	420 мм × 297 мм	прибл.483 мм × 329 мм	515 мм × 364 мм	594 мм × 420 мм

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

Например, 23-дюймовые дисплеи с разрешением Full HD, которые в настоящее время широко распространены, имеют площадь экрана около 509 мм x 287 мм, что позволяет вместить один лист формата A4 (297 мм x 210 мм) и оставляет значительное лишнее пространство.Этого достаточно для просмотра веб-страниц и простых электронных таблиц, но для отображения двухстраничного разворота формата А4 в реальных размерах его не хватает по вертикали.

При использовании его для ретуши фотографий для печати на двухстраничных разворотах формата А4 или, другими словами, бумаге формата А3 (420 мм х 297 мм), компьютерной графики, дизайнерских работ и т. д., имеющих площадь, где он может отображаться в реальном Размеры формата А3 и место для палитры инструментов позволяют работать более плавно, одновременно подтверждая, как будет выглядеть конечный продукт.В этих условиях дисплеи-кандидаты будут иметь ширину 24 дюйма (прибл. 531 мм x 299 мм) или больше.

Если вы предполагаете что-то до A3 (длиннозернистый; хотя и не стандартный, около 483 мм x 329 мм), ширина 27 дюймов (прибл. 582 мм x 364 мм) немного больше, чем это, поэтому вы можете оценить требуемый экран размер, используя формат бумаги в качестве ориентира.

На ЖК-дисплее шириной 24,1 дюйма, поддерживающем дисплей с разрешением 1920 x 1200 пикселей (WUXGA) и соотношением сторон 16:10, вы можете отобразить двухстраничный разворот формата A4 или изображение формата A3 (420 мм x 297 мм) в реальном размере на один экран, а меню и палитра инструментов находятся снаружи.На фотографии изображен EIZO FlexScan EV2436W.

Размеры экрана внешних дисплеев для ведущих ПК
Широкий ЖК-дисплей
Размер экрана	Область дисплея	Разрешение	Соотношение сторон	Плотность пикселей	Шаг пикселя
Ширина 19 дюймов	прибл. 408 мм × 255 мм	1440 × 900 пикселей	16:10	прибл. 89 пикселей на дюйм	прибл. 0,28 мм
Ширина 19,5 дюйма	прибл. 434 мм × 236 мм	1600 × 900 пикселей	16:9	прибл. 94 точки на дюйм	прибл. 0.27 мм
Ширина 20 дюймов	прибл. 443 мм × 429 мм	1600 × 900 пикселей	16:9	прибл. 92 точки на дюйм	прибл. 0,28 мм
Ширина 21,5 дюйма	прибл. 480 мм × 270 мм	1920 × 1080 пикселей	16:9	прибл.103 точек на дюйм	прибл. 0,25 мм
Ширина 22 дюйма	прибл. 474 мм × 296 мм	1680 × 1050 пикселей	16:10	прибл. 90 пикселей на дюйм	прибл. 0,28 мм
Ширина 23 дюйма	прибл. 510 мм × 287 мм	1920 × 1080 пикселей	16:9	прибл.96 пикселей на дюйм	прибл. 0,27 мм
Ширина 23,6 дюйма	прибл. 521 мм × 293 мм	1920 × 1080 пикселей	16:9	прибл. 93 точки на дюйм	прибл. 0,27 мм
Ширина 23,8 дюйма	прибл. 527 мм × 296 мм	1920 × 1080 пикселей	16:9	прибл.93 точки на дюйм	прибл. 0,27 мм
Ширина 23,8 дюйма (UHD 4K)	прибл. 527 мм × 296 мм	3840 × 2160 пикселей	16:9	прибл. 185 пикселей на дюйм	прибл. 0,14 мм
Ширина 24 дюйма	прибл. 531 мм × 299 мм	1920 × 1080 пикселей	16:9	прибл. 91,8 пикселей на дюйм	прибл. 0,28 мм
Ширина 24,1 дюйма	прибл. 518 мм × 324 мм	1920 × 1200 пикселей	16:10	прибл. 94,3 точек на дюйм	прибл. 0,27 мм
Сверхширокий 25 дюймов	прибл. 585 мм × 247 мм	2560 × 1080 пикселей	21:9	прибл.111 пикселей на дюйм	прибл. 0,23 мм
Ширина 27 дюймов	прибл. 598 мм × 336 мм	1920 × 1080 пикселей	16:9	прибл. 82 точки на дюйм	прибл. 0,31 мм
Ширина 27 дюймов	прибл. 597 мм × 336 мм	2560 × 1440 пикселей	16:9	прибл.109 пикселей на дюйм	прибл. 0,23 мм
Ширина 28 дюймов (UHD 4K)	прибл. 620 мм × 349 мм	3840 × 2160 пикселей	16:9	прибл. 157 пикселей на дюйм	прибл. 0,16 мм
Сверхширокий 29 дюймов	прибл.673 мм × 284 мм	2560 × 1080 пикселей	21:9	прибл. 96 пикселей на дюйм	прибл. 0,26 мм
Ширина 30 дюймов	прибл. 641 мм × 401 мм	2560 × 1600 пикселей	16:10	прибл. 101 точек на дюйм	прибл. 0.25 мм
Ширина 31,1 дюйма (DCI 4K)	прибл. 699 мм × 368 мм	4096 × 2160 пикселей	прибл. 17:9	прибл. 149 пикселей на дюйм	прибл. 0,17 мм
Ширина 31,5 дюйма (UHD 4K)	прибл. 697 мм × 392 мм	3840 × 2160 пикселей	16:9	прибл. 140 пикселей на дюйм	прибл. 0,18 мм
Ширина 32 дюйма (UHD 4K)	прибл. 698 мм × 393 мм	3840 × 2160 пикселей	16:9	прибл. 138 точек на дюйм	прибл. 0,18 мм
Сверхширокий 34 дюйма	прибл. 800 мм × 335 мм	3440 × 1440 пикселей	21:9	прибл.110 пикселей на дюйм	прибл. 0,23 мм
Ширина 40 дюймов (UHD 4K)	прибл. 878 мм × 485 мм	3840 × 2160 пикселей	16:9	прибл. 110 пикселей на дюйм	прибл. 0,23 мм
Квадратный ЖК-дисплей
Размер экрана	Область дисплея	Разрешение	Соотношение сторон	Плотность пикселей	Шаг пикселя
Квадрат 17 дюймов	прибл. 338 мм × 270 мм	1280 × 1024 пикселей	5:4	прибл. 96,4 точек на дюйм	прибл. 0,26 мм
19-дюймовый квадрат	прибл. 376 мм × 301 мм	1280 × 1024 пикселей	5:4	прибл. 86,3 точек на дюйм	прибл.0,29 мм
Квадрат 21,3 дюйма	прибл. 432 мм × 324 мм	1600 × 1200 пикселей	4:3	прибл. 93,9 пикселей на дюйм	прибл. 0,27 мм
Квадрат 26,5 дюйма	прибл. 476 мм × 476 мм	1920 × 1920 пикселей	1:1	прибл.102 точек на дюйм	прибл. 0,25 мм

При выборе ЖК-дисплея в эпоху 4K необходимо проверять плотность пикселей и рабочее пространство

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

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

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

Плотность

пикселей, демистификация. Как работает плотность пикселей и как она… | Питер Ноуэлл

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

Эта статья и видео изначально были созданы как часть курса UX в Sketch Master.

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

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

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

Иконки для оригинального Mac, разработанные Сьюзан Каре. С тех пор технология экранов

претерпела огромные изменения, и теперь даже самые простые компьютерные экраны имеют разрешение где-то в диапазоне от 115 до 160 пикселей на дюйм («ppi»). Но новая глава в этой истории началась в 2010 году, когда Apple представила iPhone с дисплеем Retina — сверхчетким экраном с удвоенным числом пикселей на дюйм.Результатом стала графика с гораздо большей четкостью, чем мы когда-либо видели.

Обратите внимание на разницу между конвертом значка «Почта» и четкостью текстовых меток.

Чтобы сохранить тот же физический размер для пользовательского интерфейса, размеры в пикселях удвоились. Кнопка высотой 44 пикселя теперь была высотой 88 пикселей. Чтобы приспособиться к различным устройствам, дизайнерам нужно было начать предоставлять графику (например, значки) как в исходном масштабе «1x», так и в этом новом масштабе «2x». Но появилась проблема: вы больше не могли сказать «Эй, эта кнопка должна быть высотой 44 пикселя», потому что она должна быть и высотой 88 пикселей на другом устройстве. Не существовало единицы измерения, независимой от плотности пикселей. Решением были «Очки» или «pt» для краткости. 1 точка соответствует 1 пикселю на дисплее pre-retina или 2 пикселям на дисплее 2x Retina. Они позволяют дизайнерам сказать: «Эй, эта кнопка должна быть высотой 44 точек », а затем любое устройство может просто умножить это на собственный коэффициент плотности пикселей… например, в 1x или 2x. Или в 3 раза больше в случае с большим iPhone от Apple.

Но это, конечно, не только для устройств Apple, в наши дни каждая операционная система — настольная или мобильная — поддерживает экраны с высоким разрешением ppi/dpi.Google определил свою собственную независимую от плотности единицу измерения для Android. Они не называются «точками», они называются «DIP», что означает независимые от плотности пиксели. Сокращение «дп». Это не , а эквивалентно баллам в iOS, но идея, стоящая за ними, та же. Это универсальная единица измерения, которую можно преобразовать в пиксели с использованием коэффициента масштабирования устройства (2x, 3x и т.  д.).

Возможно, вас интересует физический размер точки . На самом деле дизайнерам пользовательского интерфейса практически не нужно беспокоиться об этом, потому что у нас минимальный контроль над изменениями для конкретных устройств.Дизайнерам просто нужно верить, что производитель устройства установил плотность пикселей, подходящую для этого устройства, и сосредоточить наше внимание на подготовке ресурсов дизайна в 1x, 2x, 3x или любом другом соотношении. Но если вам действительно интересно, знайте, что на устройствах Apple нет постоянного преобразования между дюймами и пунктами. Другими словами, не существует единой плотности пикселей, представляющей 1 балл — она зависит от конкретного устройства (см. раздел «Восприятие масштаба» ниже). В iOS точка варьируется от 132 точек на дюйм до 163 точек на дюйм.На Android DIP всегда основаны на 160 ppi.

Приготовьтесь к проверке реальности. В первые дни мобильных устройств с высоким разрешением плотность пикселей была такой же простой, как 1x или 2x. Но теперь это абсолютно безумно — нужно поддерживать многих плотностей пикселей. Отличным примером является Android: на момент написания этой статьи существует шесть общих значений плотности пикселей у всех производителей устройств. Это означает, что значок выглядит как одинакового размера на всех этих экранах, на самом деле требуется 6 различных изображений.Для устройств Apple это больше похоже на две или три разные графики.

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

Второй урок заключается в том, что мы все должны проектировать в масштабе 1x. Другими словами, проектируйте с использованием точек для всех измерений, а затем масштабируйте до различных более высоких плотностей пикселей при экспорте… в отличие от проектирования с конечными размерами устройства пикселей (2x, 3x и т. д.).) и попасть во всевозможные неприятности во время экспорта. Потому что масштабирование 2-кратного изображения на 150 % для создания 3-кратного изображения дает размытые результаты, но масштабирование 1-кратного изображения на 200 % и 300 % сохраняет визуальную четкость.

Мокапы для iPhone стандартного размера должны иметь разрешение 375×667, а не 750×1334, в котором они фактически отображаются. Большинство инструментов дизайна не различают точки и пиксели (Flinto — единственное известное мне исключение), поэтому дизайнеры должны притворяться, что единицы измерения в пикселях на самом деле являются точками, а затем иметь возможность экспортировать в два или три раза больше. размер.

Это немного более продвинуто, но стоит упомянуть: иногда устройства подделывают . Они притворяются, что их соотношение пикселей к точкам является обычным, например, 3x, но на самом деле оно составляет 2,61x, а изображение , масштабированное от до 3x для удобства. Это то, что в настоящее время делает iPhone Plus. Он сжимает интерфейс, созданный с разрешением 1242×2208, до размера экрана 1080×1920 (графический чип телефона выполняет масштабирование в режиме реального времени).

Дизайн для iPhone Plus, как будто это действительно 3x.Устройство масштабирует его на 87% для вас.

Поскольку изображение уменьшено лишь немного (87%), результат все еще выглядит прилично — линия в 1 пиксель на экране с почти 3-кратным увеличением по-прежнему выглядит чертовски четкой. И есть вероятность, что хотя у меня нет инсайдерской информации, Apple, вероятно, выпустит настоящий 3-кратный iPhone Plus в будущем, поскольку эти аппаратные компоненты станут жизнеспособными для продукта, производимого в таких возмутительных количествах. Текущий iPhone Plus, вероятно, притворяется, пока не сделает это.

( Брюс Ван написал замечательную статью об экране iPhone 6 Plus. )

Приемлем ли такой подход масштабирования нецелыми числами? В конечном счете, доказательство в пудинге; Масштабирование достаточно тонкое, чтобы быть незаметным? Многие Android-устройства также используют масштабирование для достижения более стандартного соотношения пикселей к точкам, и, к сожалению, некоторые из них делают это очень плохо. Подобное масштабирование нежелательно, потому что все, что вы создали четким и точным по пикселям в определенном масштабе, станет размытым из-за интерполяции (т. е. линия в 1 пиксель становится 1,15 пикселя).Даже если вы не являетесь фанатичным ботаником по совершенствованию пикселей, как я, нельзя отрицать тот факт, что элементы дизайна должны быть выровнены с полными пикселями, чтобы казаться четкими для наших глаз. К сожалению, по мере того, как плотность пикселей достигает диапазона 4x и выше, размытие, вызванное нецелочисленным масштабированием, становится гораздо труднее воспринимать, поэтому я предсказываю, что производители устройств будут использовать этот подход все чаще с течением времени. Мы можем только надеяться, что недостаток производительности, связанный с масштабированием, отпугнет их!

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

• Зависит от точности метода ввода (т.е. касания или курсора)
• Зависит от физического размера экрана
• И зависит от вашего расстояния от экрана
1

9 Последние два типа идут рука об руку; поскольку у планшета экран больше, чем у телефона, мы держим его дальше. Затем вы переходите к ноутбуку, затем к настольному компьютеру, затем к телевизору… расстояние увеличивается с увеличением размера экрана.

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

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

Более низкая плотность пикселей

Большие экраны, которые мы используем на расстоянии, как правило, имеют более низкую плотность пикселей.Телевизор может иметь разрешение всего 40 пикселей на дюйм! Для обычного телепросмотра это допустимо. Дисплей сетчатки iPad составляет около 264 пикселей на дюйм, а дисплей сетчатки iPhone — 326 пикселей на дюйм. Поскольку пиксели на iPad больше (экран менее плотный), весь интерфейс становится немного больше. Это объясняет дополнительное расстояние от экрана iPad.

Различные размеры

Но время от времени использования более низкой плотности пикселей недостаточно… определенный элемент дизайна должен быть еще больше.Это произошло с иконками приложений на iPad. На iPhone они 60×60, но большой экран iPad предлагает гораздо больше места, поэтому использование значков приложений 76×76 имеет значительные практические (и визуальные) преимущества.

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

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

Google Device Metrics : впечатляющий список характеристик для устройств всех типов (Android, iOS, Mac, Windows и т. д.). Получите размеры экрана, плотность пикселей и даже приблизительное расстояние, на котором устройство находится от глаз пользователя. ScreenSiz.es — аналогичный ресурс.

Шаблоны значков приложений Bjango : Эти шаблоны дизайна (доступные для всех основных дизайнерских программ) чрезвычайно всеобъемлющи. Полезно как с практической точки зрения, так и в качестве справочника по последним спецификациям для Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone и т. д.

Руководство дизайнера по DPI : это обширное руководство Себастьяна Габриэля содержит еще больше деталей и практических рабочих процессов для дизайнеров Android и iOS.

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

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

Эта статья и видео являются частью Sketch Master — обучающих онлайн-курсов для профессионалов, изучающих Sketch. Вы научитесь множеству приемов и практических рабочих процессов, разрабатывая реальные проекты UI/UX и значков приложений.

Window.devicePixelRatio — веб-API | МДН

Устройство PixelRatio Интерфейс Window возвращает коэффициент разрешения в физических пикселей до разрешения в пикселей CSS для текущего дисплея устройство.

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

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

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

  значение = window.devicePixelRatio;
  

Значение

Значение двойной точности с плавающей запятой, указывающее соотношение разрешение в физических пикселях к разрешению в пикселях CSS.Значение 1 указывает на классический дисплей с разрешением 96 точек на дюйм (76 точек на дюйм на некоторых платформах), в то время как значение 2 ожидается для Дисплеи HiDPI/Retina. Другие значения также могут быть возвращены в случае необычно низкого разрешения дисплеев или, что чаще, когда экран имеет более высокую глубину пикселя, чем двойное стандартное разрешение 96 или 76 DPI.

Исправление разрешения в

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

HTML

  <холст>
  

JavaScript

  var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


размер переменной = 200;
canvas.style.width = размер + "px";
canvas.style.height = размер + "px";


переменная шкала = window.devicePixelRatio;
canvas.width = Math.floor (размер * масштаб);
холст.высота = Мат.этаж(размер * масштаб);


ctx.scale (масштаб, масштаб);

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = '18px Arial';
ctx.textAlign = 'центр';
ctx.textBaseline = 'средний';

переменная х = размер / 2;
вар у = размер / 2;

var textString = "Я люблю MDN";
ctx. fillText (текстовая строка, х, у);
  

Мониторинг изменения разрешения экрана или уровня масштабирования

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

JavaScript

Код JavaScript создает медиа-запрос, который отслеживает разрешение устройства и проверяет значение devicePixelRatio каждый раз, когда оно изменяется.

  let pixelRatioBox = document.querySelector(".Соотношение пикселей");

константа updatePixelRatio = () => {
  пусть pr = window.devicePixelRatio;
  пусть prString = (pr * 100).toFixed(0);
  pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`;
  matchMedia(`(разрешение: ${pr}dppx)`).addEventListener("change", updatePixelRatio, {один раз: true})
}

обновитьPixelRatio();
  

Строка mqString настроена как сам медиа-запрос. СМИ запрос, начинающийся с (разрешение: 1 dppx) (для стандартных дисплеев) или (разрешение: 2dppx) (для дисплеев Retina/HiDPI), проверяет, текущее разрешение экрана соответствует определенному количеству точек устройства на пикселей .

Функция updatePixelRatio() извлекает текущее значение devicePixelRatio , затем устанавливает innerText элемента pixelRatioBox в строку, которая отображает соотношение как в процентах, так и в виде необработанного десятичного значения с точностью до двух знаков после запятой.

Затем функция updatePixelRatio() вызывается один раз для отображения начальное значение, после чего создается медиа-запрос с использованием matchMedia() и addEventListener() вызывается для настройки updatePixelRatio() в качестве обработчика события change .

HTML

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

  <дел>
  <дел>
    
В этом примере демонстрируется эффект увеличения страницы
       и наружу (или перенос на экран с другим масштабированием
       фактор) на значение свойства Window.devicePixelRatio.
       Попробуйте и посмотрите, что получится!