Пиксель — единица растровой графики¶

Пиксель (англ. pixel — от picture element, «элемент изображения») — наименьший адресуемый элемент растрового изображения или экрана, представляющий собой квадратную или прямоугольную ячейку определённого цвета. Пиксели образуют пиксельную сетку, из которой состоит цифровое изображение: совокупность пикселей с их цветовыми значениями и есть файл картинки или кадр на мониторе. Понятие «пиксель» применяется и в веб-разработке, где пиксельная графика используется для оформления сайтов, иконок, интерфейсов и рекламных материалов.

¶История

Термин «пиксель» появился в 1960-х годах в лабораториях, где разрабатывались системы компьютерной графики и телевизионные технологии. Одним из первых его употребил инженер Джека Килби (Jack Kilby) в контексте работы над цифровыми изображениями. Практическое распространение термин получил с развитием растровых графических редакторов — в частности, с выходом Adobe Photoshop в 1990 году, где пиксель стал базовой единицей обработки изображений.

В веб-дизайне пиксельная графика стала основой оформления сайтов в конце 1990-х — начале 2000-х годов, когда браузеры получили поддержку форматов GIF и PNG, а скорость интернет-соединений позволила загружать графические макеты страниц. В то же время появился термин «пиксель-арт» — стиль изображений, создаваемых вручную по пиксельной сетке.

¶Характеристики

Ключевые параметры пиксельного изображения:

• Разрешение — количество пикселей по горизонтали и вертикали (например, 1920×1080). Чем больше пикселей, тем детальнее изображение.
• Глубина цвета — число бит, отводимых на один пиксель. Определяет, сколько оттенков может отображать пиксель: 1 бит — 2 цвета, 8 бит — 256 оттенков, 24 бит — около 16,7 млн цветов.
• Формат пикселя — в идеале квадратный, но на некоторых дисплеях (например, старых телевизорах) пиксели были прямоугольными, что влияло на пропорции изображения.
• Размер физического пикселя — реальные габариты ячейки на экране, измеряемые в миллиметрах или дюймах.

¶Пиксельная графика на сайтах

В веб-разработке пиксельная графика применяется для создания:

• Фонов и декоративных элементов — паттерны, текстуры, разделители.
• Иконок и кнопок — особенно в интерфейсах с ограниченной палитрой.
• Рекламных баннеров — форматы GIF, PNG, JPEG для размещения на сайтах.
• Иллюстраций и логотипов — в стиле ретро или пиксель-арта.

Для веба используются сжатые форматы: GIF (анимация, ограниченная палитра), PNG (прозрачность, без потерь), JPEG (фотографии, с потерями). Векторные форматы SVG в ряде случаев заменяют пиксельную графику, так как масштабируются без потери качества.

¶Пиксель-арт

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

Современный пиксель-арт — самостоятельное направление, применяемое в инди-играх, иллюстрациях, анимации и оформлении сайтов. Характерные черты: чёткие контуры, ограниченная палитра, крупные «видимые» пиксели. Инструменты для создания: Aseprite, Pyxel Edit, GraphicsGale, а также растровые редакторы с настройкой сетки.

¶Пиксельная плотность и ретина-экраны

С развитием дисплеев с высокой плотностью пикселей (Apple Retina, AMOLED с 4K-разрешением) возникла необходимость в адаптации пиксельной графики. Технология retina-изображений предполагает создание графики в двойном разрешении, чтобы она отображалась чётко на экранах с высокой плотностью. В CSS для этого используется единица px, которая на retina-экранах соответствует нескольким физическим пикселям.

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

• Самый ранний известный пиксельный образ — фотография Бабушкиной головы (1957), одна из первых цифровых фотографий, состоящая из 128×128 пикселей.
• В японском языке слово «пиксель» (ピクセル) используется как заимствование, но для обозначения пикселей в играх часто применяют термин «dot» (ドット).
• Пиксель-арт стал предметом художественных выставок: работы в этом стиле выставляются в галереях и музеях по всему миру.

Источники:

• «Computer Graphics: Principles and Practice», J.F. Hughes, A. van Dam, 2013
• «The Pixel Art Tutorial», Lospec (сайт о пиксель-арте)
• Adobe Photoshop User Guide
• W3C Web Content Accessibility Guidelines (WCAG) — о разрешении и масштабировании изображений
• «Game Art: Pixel Art», Gamasutra / Game Developer