🔤Типографика|digital

Пиксель

Обозначение: pxВесь мир

0,75pt0,0625pc0,010417in0,026458cm0,264583mm

Что такое Пиксель (px)?

Формальное определение

Пиксель (сокр.: px) — наименьший адресуемый элемент растрового изображения или экрана дисплея. В цифровой графике пиксель представляет одну точку цвета, определённую значениями в цветовой модели (обычно RGB). В контексте CSS один CSS-пиксель определён как приблизительно 1/96 дюйма (0,2646 мм) при стандартном расстоянии просмотра.

Слово «пиксель» — портманто от «picture element» (элемент изображения). Общее число пикселей определяет разрешение дисплея: дисплей 1920×1080 содержит 2 073 600 пикселей.

CSS-пиксель vs аппаратный пиксель

В современной веб-разработке различие между CSS-пикселями и аппаратными пикселями критически важно. CSS-пиксель имеет фиксированный угловой размер (~1/96 дюйма). Аппаратный пиксель — физический элемент экрана. Дисплеи HiDPI (Retina) используют несколько аппаратных пикселей для отрисовки одного CSS-пикселя. Отношение называется Device Pixel Ratio (DPR): DPR = 2 означает, что каждый CSS-пиксель отрисовывается сеткой 2×2.

Этимология

Происхождение слова

Слово «pixel» впервые опубликовано в 1965 году Фредериком Биллингсли из Лаборатории реактивного движения NASA. Термин — сочетание «picture» (или «pix» — неформальное сокращение для «pictures» с 1930-х) и «element».

В русском языке «пиксель» — прямое заимствование из английского. Сокращение «px» стало стандартом в CSS с 1996 года и стало самым узнаваемым символом единицы в веб-дизайне.

История

Телевидение и ранняя съёмка

Концепция пикселя предшествует слову на несколько десятилетий. Инженеры телевидения в 1920-1930-х обсуждали изображения в терминах «элементов изображения».

Космические исследования

Цифровые пиксели появились в 1960-х с развитием цифровой съёмки для космоса. Миссия Ranger 7 (1964) вернула первые цифровые снимки Луны.

Революция HiDPI

Появление Retina-дисплея на iPhone 4 в 2010 году (326 PPI) стало поворотным моментом: отдельные пиксели стали невидимы невооружённым глазом.

Современное применение

В веб-дизайне

Пиксель — самая используемая единица в веб-дизайне. Размер шрифта тела обычно 16 px, ширина страницы — 1200 px. Однако адаптивный дизайн всё чаще использует относительные единицы (em, rem, vw, vh).

В цифровой фотографии

Разрешение камеры измеряется в мегапикселях. 12-мегапиксельная камера даёт изображения ~4000×3000 пикселей. Для качественной печати нужно 300 PPI.

В дисплеях

Основные разрешения: Full HD (1920×1080), 2K (2560×1440), 4K (3840×2160), 8K (7680×4320). Плотность пикселей: от ~100 PPI (мониторы) до 500+ PPI (смартфоны).

Применение в быту

Покупка техники

При покупке телевизора, монитора или смартфона характеристики пикселей — ключевой параметр. 4K означает ~8 млн пикселей.

Социальные сети

Instagram: 1080×1080 px (квадрат). YouTube рекомендует 1920×1080 для HD. Facebook обложка: 820×312 px.

Цифровое искусство

Пиксель-арт — форма цифрового искусства на уровне отдельных пикселей — переживает возрождение в инди-играх.

В науке и промышленности

В медицинской визуализации

Цифровой рентген — ~3000×3000 пикселей. КТ — 512×512 пикселей на срез. МРТ — 256×256 до 1024×1024.

В дистанционном зондировании

Разрешение спутников описывается размером пикселя на местности (GSD). Landsat — 30 м, WorldView-3 — 0,31 м.

В компьютерном зрении

Нейросети обрабатывают изображения как массивы пиксельных значений. ImageNet использует изображения 224×224 px.

Интересные факты

1

Первое цифровое изображение (1957) — скан фотографии сына учёного Рассела Кирша — имело разрешение 176×176 пикселей.

2

Retina-дисплей Apple основан на пределе зрительной остроты: глаз не различает пиксели при плотности выше ~300 PPI на типичном расстоянии просмотра.

3

Каждый пиксель OLED-дисплея состоит из трёх субпикселей (красный, зелёный, синий), управляемых независимо.

4

Слово «мегапиксель» вошло в обиход с появлением цифровых камер в конце 1990-х. Первая потребительская камера свыше 1 Мп — Fujifilm DS-300 (1997).

5

В CSS: 1 px = 1/96 дюйма, 1 pt = 1/72 дюйма. Поэтому 1 pt = 96/72 px ≈ 1,333 px.

6

Общее число пикселей в мировых дисплеях оценивается в более чем 100 квадриллионов (10¹⁷).

7

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

Таблица конвертаций

ЕдиницаЗначение
Пункт (pt)0,75pxpt
Пика (pc)0,0625pxpc
Дюйм (in)0,010417pxin
Сантиметр (cm)0,026458pxcm
Миллиметр (mm)0,264583pxmm

Часто задаваемые вопросы

Что такое пиксель?
Пиксель — наименьший адресуемый элемент цифрового изображения или экрана. Представляет одну точку цвета. Слово — от «picture element». Миллионы пикселей образуют изображение на экране.
Сколько пикселей в дюйме?
В CSS — 96 px/дюйм (по определению). На физических дисплеях PPI варьируется: мониторы — 96-110, Retina — 200-300+, смартфоны — до 500+.
Чем отличается CSS-пиксель от аппаратного?
CSS-пиксель — абстрактная единица (1/96 дюйма). Аппаратный — физический элемент экрана. На HiDPI-дисплеях один CSS-пиксель отрисовывается несколькими аппаратными. DPR = 2 означает сетку 2×2.
Как перевести пиксели в пункты?
При стандартном разрешении (96 DPI): 1 px = 0,75 pt. Обратно: 1 pt = 1,333 px. Потому что 1 дюйм = 96 px = 72 pt.
Что означает разрешение 4K?
4K Ultra HD — 3840×2160 пикселей, ~8,3 млн пикселей. «4K» отсылает к ~4 000 горизонтальных пикселей. Full HD (1080p) — 1920×1080, ровно четверть 4K.
Сколько пикселей нужно для печати?
Для качественной печати — 300 DPI. Для отпечатка 20×30 см: 20/2,54 × 300 = 2362 px по ширине, 30/2,54 × 300 = 3543 px по высоте (~8,4 Мп).
Как пиксели связаны с единицей em?
Связь зависит от размера шрифта. По умолчанию в браузерах: 1 em = 16 px. При изменении размера шрифта меняется и значение em. Em — относительная единица, пиксель — абсолютная в CSS.