05. Формирование изображения на экране монитора

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

Пиксель. Пространственное разрешение монитора

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

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

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

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

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

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

Однако информация, которую мы видим вживую, и информация на экране монитора всё-таки различаются.

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

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

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

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

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

Изображение на экране монитора состоит из пикселей. Что такое пиксель и как эти самые пиксели увидеть?

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

Пиксель (англ. picture element — «элемент изображения») — наименьший элемент двумерного цифрового изображения на экране монитора.

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

В конце XIX века во Франции появилось особое направление в живописи — пуантилизм. Художники-пуантилисты рисовали маленькими мазками в виде точек (либо квадратиков), при этом старались не смешивать цвета на палитре. Для целостного восприятия картины её следовало разглядывать издалека.

Что такое пиксель, мы выяснили. Теперь поговорим о том, как пиксель выглядит.

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

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

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

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

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

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

Размер монитора характеризуется длиной диагонали экрана, выраженной в дюймах (). Мониторы бывают с диагональю , , и более дюймов.

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

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

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

С понятием «разрешение» иногда возникает путаница, так как разрешение может иметь не только монитор, но и другие устройства ввода-вывода. Кроме того, разрешение может быть у изображения. И речь здесь идёт именно о растровом изображении.

Пространственное разрешение монитора — это свойство монитора, которое выражается в пикселях.

Разрешение изображения — свойство изображения, определяющее количество точек на единицу длины. Измеряется эта величина в пикселях на дюйм (англ. pixels per inch — ppi ). Поэтому разрешение изображения нередко называют плотностью пикселей.

Задаётся эта величина при сканировании изображения или при его создании в графическом редакторе и связана с размером изображения.

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

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

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

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

Цветовые модели. Кодирование цвета

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

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

Чем один пиксель отличается от другого? Своим положением и цветом. Положение пикселя определяется его координатами. Их можно выразить числами и перевести в двоичный код. Отличие координатной сетки экрана от привычной вам системы координат только в расположении начала координат (оно находится в левом верхнем углу экрана) и в направлении оси (эта ось при определении координат точки считается направленной вниз).

Итак, информацию о положении пикселя можно передать в память компьютера в цифровом виде. А как быть с цветом?

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

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

Похожий принцип закрашивания клеток используется в японских кроссвордах.

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

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

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

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

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

Для представления и кодирования различных цветов используются цветовые модели. Для формирования цвета на экране монитора используется цветовая модель RGB. В данной модели основными являются цвета: красный, зелёный и синий.

При совмещении каких-либо основных составляющих получаются другие цвета, при совмещении всех трёх составляющих получается нейтральный цвет, который в зависимости от яркости может иметь оттенки серого цвета или белый цвет. Отсутствие всех трёх компонентов образует чёрный цвет. В модели RGB каждый новый оттенок получается суммированием яркостей составляющих компонентов. Поэтому эту цветовую модель называют аддитивной (англ. add — добавлять, прибавлять).

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

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

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

Цветовой тон указывается в градусах от до , насыщенность и яркость — в процентах от до . Приведённый ранее в качестве примера ярко-васильковый цвет в данной цветовой модели имеет значение ().

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

Создавать и обрабатывать цветные изображения принято в модели RGB, при печати RGB-рисунка на цветном четырёхцветном принтере рисунок будет преобразован в цветовую модель CMYK.

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

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

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

Даже если добавить к двоичному коду всего один бит, количество возможных цветов возрастёт вдвое, они будут иметь коды от до .

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

Глубина цвета — длина двоичного кода, который используется для кодирования цвета пикселя.

Количество цветов в палитре и глубина цвета связаны формулой , с которой вы уже наверняка знакомы из курса информатики.

Например, при глубине цвета бита в изображении можно использовать не более цветов (2³). Глубина цвета бит позволит использовать , то есть различных цветов.

Наиболее часто в современных компьютерах используется глубина цвета бита (или байта). Такое кодирование называют режимом истинного цвета (True Color). В этом режиме на кодирование яркости каждой цветовой составляющей (красной, зелёной и синей) отводится по бит ( байт). Таким образом, яркость каждой составляющей может принимать значения от (это двоичных нулей) до ( двоичных единиц), всего различных значений. () — код чёрного цвета, () — код белого цвета. Код синего цвета кодируется последовательностью чисел (). Значения синей составляющей немного меньше указывают на оттенок синего цвета.

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

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

Вернёмся к нашему маленькому монохромному изображению (рис. 38) и определим, сколько же места в памяти компьютера оно будет занимать.

Количество цветов , значит, глубина цвета бит ().

Пикселей всего — строк по пикселей в каждой ().

Для кодирования одного пикселя нужен бит памяти. Тогда пикселя будут занимать бита: . .

А если в изображении используется 16-цветная палитра (рис. 39)?

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

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

Задача

Объём видеопамяти составляет мегабайта. Определите максимальное количество цветов, которые можно использовать при создании растрового изображения, занимающего весь экран монитора с разрешением на пикселей.

Запишем кратко условие задачи.

Решение

Переведём объём видеопамяти из мегабайт в биты: бит.

Запишем формулу , из которой выразим глубину цвета .

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

бит.

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

Видеосистема компьютера

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

Видеосистема включает монитор и видеоадаптер.

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

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

В современных компьютерах чаще всего используются жидкокристаллические мониторы, основу которых составляет LCD-матрица (Liquid Crystal Display). Ячейки матрицы содержат жидкие кристаллы, которые под действием электрического напряжения могут менять структуру и оптические свойства. В результате свет яркой лампы (подсветки), расположенной с обратной стороны экрана, пропускается или блокируется.

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

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

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

Современные видеоадаптеры содержат видеопамять, объём которой выражается в гигабайтах, например гигабайта, гигабайт или даже гигабайта.

Видеокарты, содержащие видеопамять большого объёма, как правило, используются на компьютерах, специально предназначенных для обработки графики и видео, например для компьютерных игр, 2D- и 3D-моделирования.

Видеопроцессор называют также графическим или дисплейным процессором.

Графический процессор (GPU — Graphics Processing Unit) выполняет сложные и необходимые для вывода изображения расчёты, освобождая от этой работы центральный процессор. Именно графический процессор обеспечивает высокую производительность при работе с изображениями. Он считывает данные из видеопамяти и с достаточно высокой частотой передаёт содержимое видеопамяти на монитор, благодаря этому мы видим на экране изображение, которое постоянно, чаще всего незаметно для нашего глаза, обновляется.

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

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

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

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

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

Полезные ссылки

1. Список рекомендованных учебников.

Проверь себя

1. Что такое пространственное разрешение монитора?

2. В чём может быть причина плохого качества растрового изображения?

3. Какая палитра используется при формировании изображения на экране монитора?

4. Что такое глубина цвета? Сколько цветов в палитре при глубине цвета 3 бита?

5. Какие компоненты включает видеосистема персонального компьютера?

Список использованных источников:

Изображения используются согласно лицензии Shutterstock / FOTODOM

Иллюстратор Шакуртова Ю. А.

Моушн-дизайнер Лопатин М. С.

Источник: wikipedia.org / название: Georges Lemmen - Thames Scene, the Elevator - 57.166 - Rhode Island School of Design Museum / атрибуция: public domain, автор: Georges Lemmen 

Источник: wikipedia.org / название: David's Tamagotchi / атрибуция: public domain, автор: David

Источник: wikipedia.org / название: NBSFirstScanImage / атрибуция: public domain, автор: Russell A. Kirsch