Как изображение отображается на мониторе?

Обновлено: 17.05.2024

Ключевые слова: адаптация яркости, легкость, CRT, LCD, гамма-коррекция, sRGB, формат файла изображения, TIFF, OpenEXR, HDR, RAW, PNG, JPEG, JPG, HDRI, изображения с плавающей запятой, бит на пиксель, RGB, RGBA, альфа-канал, маска, PPM, растровое изображение, битовая глубина, квантование.

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

Линейное цветовое пространство

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

Человеческое зрение: адаптация к яркости

Рисунок 1. Нелинейная перцептивная реакция человеческого зрения на яркость называется яркостью и примерно соответствует кривой кубического корня. Источник, яркость которого составляет всего 18 % от эталонной яркости, кажется примерно вдвое менее ярким.

На предыдущем уроке мы уже узнали довольно много вещей о физиологии восприятия цвета, таких как трехцветное цветовое зрение, скотопическое (зрение в условиях низкой освещенности) и фотопическое зрение (зрение в условиях нормального освещения), функция яркости, которая описывает зрительную чувствительность человеческого глаза к свету с различной длиной волны и т. д. Еще одно важное свойство человеческого зрения, о котором мы еще не говорили, — это то, как оно реагирует на яркость. При очень слабом свете мы уже способны различать вещи. Свечи достаточно, чтобы начать различать вещи в комнате, хотя она гораздо менее яркая, чем солнце. В целом диапазон интенсивности света, к которому может адаптироваться человек, очень велик и составляет примерно от \(\) до \(>\). Однако мы не можем сразу воспринять этот диапазон интенсивностей. Свет свечи вряд ли повлияет на воспринимаемую яркость сцены, наблюдаемой в солнечный день. Способ, которым наш глаз справляется с таким большим диапазоном уровней освещенности, заключается в изменении его чувствительности к общей яркости сцены. Эта способность глаза очень быстро адаптироваться к уровням интенсивности света (в основном за счет расширения и сокращения радужной оболочки) известна как адаптация к яркости. Кроме того, реакция на уровни интенсивности света также нелинейна. Это просто означает, что глаза могут локально адаптироваться к различным уровням освещенности сцены и воспринимать более темные области намного ярче, чем они есть на самом деле, по сравнению с яркими частями сцены (человеческое зрение более чувствительно к небольшим изменениям яркости в темных областях, чем человеческое зрение). в светлых областях). Например, источник, яркость которого составляет всего 18% от эталонной яркости, кажется примерно вдвое менее ярким. Нелинейная перцептивная реакция человеческого зрения на яркость называется яркостью. Обычно считается, что эта характеристика (воспринимаемая яркость по сравнению с реальной яркостью) приблизительно представляет собой функцию кубического корня (рис. 1):

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

Компьютерные дисплеи: гамма-коррекция

Рисунок 2: нелинейная зависимость между напряжением и интенсивностью света ЭЛТ-монитора.Применение обратной гаммы позволяет скорректировать сигнал и получить линейный выходной сигнал.

У компьютерных экранов тоже есть свои свойства, о которых нам нужно знать, когда мы хотим отображать изображения контролируемым образом (т. е. быть уверенными, что после создания изображения разные зрители могут видеть одинаковые цвета и яркость уровней независимо от используемых устройств отображения). На заре компьютеров в большинстве мониторов использовались ЭЛТ (электронно-лучевые трубки). Проблема с этими экранами заключалась в том, что энергия или напряжение, используемые для управления яркостью точки на экране, и яркость этой точки не были линейными. Зависимость напряжения и яркости пикселей не была линейной. График используемого напряжения в зависимости от яркости, воспроизводимой на экране, дал кривую с рисунка 2. Эта нелинейная зависимость между яркостью и напряжением может быть представлена с помощью следующего уравнения:

где показатель степени этой степенной функции, называемый \(\gamma\) (греческая буква гамма), находится где-то между 2,35 и 2,55. Что примечательно в кривой на рисунке 2, так это то, что она выглядит противоположной кривой на рисунке 1, но это всего лишь совпадение. Это свойство ЭЛТ-мониторов было серьезной проблемой, поскольку оно изменяет уровни отображаемых изображений, делая более низкие значения заметно темнее, чем они должны быть на самом деле. Решением этой проблемы было применение обратной гаммы, которая называлась гамма-коррекцией.

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

Гамма-кодирование

В начале этой главы мы говорили о том, что человеческое зрение не линейно реагирует на уровни яркости изображения. При обычных условиях освещения наше зрение следует приблизительной гамма-функции (форму которой мы показали на рисунке 1). Однако компьютерные программы ничего не знают о физиологии человека и сохраняют значения пикселей изображения в линейном пространстве. Если вы думаете о формате изображения, в котором значение 100 представляет белый цвет, то с точки зрения компьютера пиксель со значением 20 в два раза ярче пикселя со значением 10. И для этого компьютера скачки на 10 в значения (от 0 до 100) соответствуют регулярным увеличениям яркости. Однако наша зрительная система по-разному реагирует на это изображение. Он увидит гораздо большие скачки в более темных областях, но едва заметит какие-либо изменения яркости в ярких областях (глаза имеют чрезвычайно хорошую способность различать цвета и тона в темных значениях).

Рисунок 3. Яркость каждого фрагмента увеличивается на 10 % слева направо (начиная с 0 и заканчивая 1). Несмотря на то, что числовые значения составляют от 0, 0,1, 0,2 и т. д. до 1, без коррекции результат будет выглядеть как верхнее изображение. Как вы можете заметить, несмотря на то, что яркость численно регулярно увеличивается, разница в яркости между первыми двумя патчами кажется намного больше, чем 10%. С гамма-кодированием (нижнее изображение) градиент кажется правильным.

Возможно, вы уже знаете, что мы обычно используем 8 бит на канал на пиксель для сохранения изображений RGB. А с 8 битами вы можете представлять только числа от 0 до 255. Поскольку мы можем использовать 255 для каждого основного цвета (красного, зеленого и синего), это представляет в общей сложности примерно 1,6 миллиона возможных комбинаций цветов (256 * 256 * 256). Теперь, как мы упоминали ранее, компьютер знает только о числах, и естественный способ кодирования значений яркости состоит в том, чтобы сказать, что 255 (поскольку это максимальное значение, которое мы можем представить с помощью 8 битов) представляет белый цвет, 0 — черный, а 128 — средний. серый. В этой системе существует линейная зависимость между используемым значением (от 0 до 255) и уровнем яркости, который они технически представляют (шкала серого). Однако мы знаем, что человеческий глаз более чувствителен к изменениям в более темных областях изображения, чем к изменениям в более ярких областях. Таким образом, мы могли бы гораздо лучше использовать эти 8 бит, если бы значения оттенков серого ниже 50% (это произвольное число для установления границы между темными и яркими значениями) могли бы быть сохранены в файле с большей точностью, чтобы лучше фиксировать изменения значений между низкой интенсивностью, к которым глаза очень чувствительны.

Рис. 4. Гамма-кодирование 1/2,2 применяется к 8-битным изображениям. Как видите, значение 0,5 (средний серый цвет в линейном пространстве) соответствует значению, намного превышающему 128 (после преобразования в байтовое значение).

Если мы используем больше битов для кодирования темных значений, это означает, что у нас остается меньше битов для кодирования ярких, но это не имеет большого значения, поскольку мы не воспринимаем различия между яркими значениями так же хорошо, как между ними. темные значения. Как мы можем добиться этого, используя только 8 бит? Ответ прост и зависит от повторного использования гамма-трюка. Мы применяем гамму, показатель степени которой обычно составляет около 1/2,2, к значениям пикселей, поступающим с ПЗС-матрицы камеры или с устройства 3D-рендеринга. Эти значения обычно выражаются в формате с плавающей запятой (с плавающей запятой в C++). Гамма-кривая выглядит так, как показано на рисунке 4. После применения гамма-кодирования мы конвертируем эти значения в тип байта (8 бит) перед сохранением данных в файл изображения. Как вы можете видеть на рисунке 4, значение 0,5 (представляющее средне-серый в линейном пространстве, предполагая, что значение с плавающей запятой 1 является белым) отображается в значение байта больше 128 после применения гамма-кодирования. Теперь у нас осталась последняя проблема. Важно понимать, что цель этого трюка состоит только в том, чтобы иметь больше места для кодирования более низких значений изображения. Мы по-прежнему хотим отображать изображение на экране в линейном пространстве. Теперь, когда мы закодировали гамму данных изображения, нам нужно удалить ее при отображении изображения обратно на экран. Что мы, естественно, и делаем, применяя к экрану гамма-коррекцию 2,2 (инверсия гаммы кодирования, которая у нас есть для данных изображения). Как мы пришли к значению 2,2, а не 2,6, объясняется ниже.

В заключение следует помнить, что старые ЭЛТ-мониторы были нелинейными. Отношение между значением пикселя и яркостью на экране соответствует кривой мощности, показатель степени которой составляет примерно от 1/2,35 до 1/2,5. Для компенсации нам пришлось применить к изображению гамма-коррекцию от 2,35 до 2,5. В настоящее время мы больше не используем ЭЛТ-мониторы; их заменяют технологии отображения (LCD, LED), которые являются линейными. Однако (и именно по этой причине было изобретено цветовое пространство sRGB) мы все же решили применить гамма-кодирование 1/2,2 к данным изображения, чтобы максимизировать количество более низких значений, которые мы могли бы закодировать в 8-битных изображениях RGB. Чтобы отображать эти изображения линейно, к экрану применяется гамма-коррекция 2,2 (независимо от того, какую технологию устройства вы используете, которая, вероятно, в наши дни является экраном, который может отображать значения пикселей линейно). Конец истории. Основное заблуждение относительно всей этой темы гаммы 2.2 заключается в том, что необходимо исправить нелинейность вашего экрана. Если раньше это было правдой, то сегодня это уже не так, поскольку дисплеи стали линейными. Экраны применяют гамма-коррекцию 2,2 только для «удаления» гамма-кодирования, применяемого к 8-битным изображениям RGB.

Это гамма-кодирование необходимо только для форматов изображений, сохраняющих данные с использованием 8 бит на пиксель на канал. Гамма-кодирование не требуется для форматов файлов, сохраняющих значения пикселей с использованием 16 (половина с плавающей запятой) или 32 бита (с плавающей запятой) на пиксель на канал (вы найдете более подробную информацию по этой теме в следующей главе), поскольку они обеспечивают достаточную числовую точность для хранения всех значений. нужные нам нюансы тонов. Несмотря на то, что мы могли бы использовать эти форматы вместо этого, они занимают больше места на диске и большую пропускную способность при передаче в Интернете, и по этим причинам 8-битные форматы файлов, такие как JPEG, PNG, TGA и т. д., по-прежнему являются стандартом для хранения изображений ( это относится и к видеоизображениям). Однако, если вы работаете в графической индустрии, вполне вероятно, что вы уже используете 16- или 32-битный формат файла, такой как TIFF, OpenEXR, HDR, RAW, и в этом случае важно, чтобы вы не забыли удалить гамму экрана 2.2. коррекция для просмотра этих изображений в линейном виде.

Цветовое пространство sRGB

Цветовое пространство sRGB было попыткой Microsoft и HP (в 1996 г.) разработать способ стандартизации кодирования значений пикселей в 8-битных изображениях RGB. Формат требует использования гаммы 1/2,2 (технически показатель степени равен 2,4). Кодирование гаммы изначально было мотивировано необходимостью компенсации нелинейности ЭЛТ, но теперь это оправдано по причинам, которые мы упомянули выше (мы можем кодировать больше данных в более низких тонах). В будущей версии этого документа мы предоставим больше информации об этом цветовом пространстве (технические характеристики формата легко найти в Интернете). Мы упомянули его здесь только потому, что большинство изображений, которые вы просматриваете или загружаете из Интернета, вероятно, закодированы с использованием этого формата. Помните, однако, что 3D-движки работают в линейном цветовом пространстве, поэтому, если вы собираетесь использовать изображение sRGB в качестве источника текстуры или если вы выбираете цвета из изображения, вам нужно будет сначала «линеаризовать» изображение (т.2 гамма-коррекция изображения).

Какое волшебство позволяет куску стекла отображать цифровые изображения, которые реагируют на действия пользователя?

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

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

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

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

Фактическая цепочка процессов, как это происходит, немного более глубокая, и для получения более подробной информации прочитайте страницу Википедии о технологиях мониторов, а также все, что может вам дать Google

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

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

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

Экран по сравнению с печатным цветным изображением

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

Разрешение экрана компьютера ограничено от 72 до 92 точек на дюйм. Но большая часть четырехцветной журнальной печати выполняется с разрешением 150 dpi, что примерно в четыре раза превышает разрешение экрана компьютера (150 dpi в четыре раза превышает разрешение 75 dpi, поскольку разрешение измеряется по площади, 150 × 150 на квадратный дюйм) ( рис. 11.10).

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

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

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

Сложные иллюстрации или фотографии

Приведенная ниже иллюстрация баклана (рис. 11.11) изначально была нарисована в гораздо более высоком разрешении в Adobe Photoshop (1000 × 2000 пикселей, 24-битный файл RGB). Затем мы уменьшили копию до указанного выше размера и использовали фильтр Photoshop «Нерезкая маска» (с настройкой 60), чтобы восстановить резкость. Хотя эта уменьшенная версия картины потеряла некоторое разрешение и цветовые детали, она по-прежнему показывает детали и тонкие нюансы, представленные в оригинале. Мы выбрали формат файла jpeg для графики, потому что иллюстрация относительно велика для графики веб-страницы.

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

Схемы для экрана компьютера

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

Хотя ограничения работы с фиксированными углами линий делают этот метод непригодным для многих схематических изображений, с его помощью можно создавать сложные иллюстрации. Регулярность работы изометрических линий и отсутствие сложности перспективы упорядочивают графику, которая иначе была бы слишком сложной для представления на веб-странице. Еще одним преимуществом упрощения графики и карт является то, что графическая простота идеально подходит для алгоритма сжатия кодирования lzw, используемого в графике gif (рис. 11.12). См. раздел Графика gif ранее в этой главе.

Рисунок 11.12. Учтите ограничения GIF. Тщательно разработанная графика, направленная на оптимизацию сжатия LZW, позволяет размещать на экране очень большие изображения, не слишком замедляя загрузку страницы.

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

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

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

Рисунок 11.14. Векторная графика (например, файлы Adobe Illustrator) является гораздо лучшим вложением в графику. Одну и ту же диаграмму можно визуализировать в разных размерах без потери качества, а графику Illustrator можно распечатать с высоким разрешением.

Графический текст

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

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

Работа с большими изображениями

Один из наиболее эффективных методов управления размером файла — уменьшение размеров изображения: чем меньше пикселей в изображении, тем меньше размер файла и тем быстрее загружается изображение. Но, очевидно, бывают случаи, когда необходимы большие изображения. Ярким примером является функция «Фото дня» на веб-сайте National Geographic (рис. 11.15).

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

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

Скрытие графики

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

Рисунок 11.16. Opera использует таблицы стилей для отображения соответствующей графики для экранного (слева) и мобильного (справа) контекстов.

Способность изобразить предмет — одна из черт человечества. Одним из многих способов создания картин является мозаика. На протяжении сотен поколений наши предки собирали различные материалы (раковины, камни, керамику, дерево, кость, слоновую кость и стекло) в картины. На картинке ниже крупным планом изображена мозаика римской совы. Эта техника сегодня окружает нас почти в каждом электронном устройстве, которое мы используем; компьютеры, мобильные телефоны, банкоматы, телевизоры, доски объявлений, электронные книги и т. д.

Что такое пиксели?

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

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

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

Вот увеличенное изображение, напечатанное на лазерном принтере.

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

На электронном дисплее каждый отдельный пиксель обычно состоит из трех субпикселей, по одному красному, зеленому и синему. Это основные цвета, которые можно комбинировать в различных частях для образования других цветов. Изменяя яркость каждого субпикселя (контролируя количество красного, зеленого и синего света), на дисплее воспринимаются разные цвета. Для принтеров происходит аналогичный процесс путем печати большего или меньшего количества чернил для каждого доступного цвета. На изображении ниже увеличены буквы R для красного цвета, G для зеленого и B для синего в соответствующих цветах. Часть дополнительно увеличена, чтобы показать, что только часть пикселя освещается для создания цвета.

Разрешение экрана

Для дисплея пиксели располагаются в виде квадратной сетки, это называется растровым дисплеем. Количество пикселей по осям X и Y сетки определяет ее разрешение. Таким образом, дисплей шириной 1024 пикселя и высотой 600 пикселов имеет разрешение 1024×600 (1024×600). Чтобы получить количество пикселей, используемых дисплеем, разрешение используется для расчета. Для дисплея с разрешением 1024 на 600 просто умножьте значения X и Y. Следовательно, 1024 X 600 = 614 400 пикселей, то есть много точек. Но современный телевизор полного разрешения (1080p HD) имеет разрешение 1920х1080, то есть 2 073 600 пикселей, 2 мегапикселя — очень большая мозаика. Если бы каждая точка на HD-телевизоре была размером 1 см, это была бы мозаика площадью 14 квадратных метров, площадь которой поместилась бы в небольшой дом. К счастью, размер пикселя очень мал, поэтому HD-телевизоры могут поместиться в нашей гостиной. Количество пикселей по осям X и оси Y сетки определяет плотность отображения. Если 1024 пикселя по ширине соответствуют 8-дюймовому дисплею планшета, тогда плотность дисплея составляет 128 пикселей на дюйм (PPI), также называемых точками на дюйм (DPI). Чем выше значение PPI (DPI), тем четче изображение (при условии, что это изображение хорошего качества). Например, Apple iPhone 4S имеет PPI 326.

Что такое пикселизация?

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

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

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

Источники изображений

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

Автор: Дэниел С. Фаулер Опубликовано: 16 февраля 2012 г. Обновлено: 09 марта 2016 г.

У вас есть вопрос или комментарий по поводу этой статьи?

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

↓markdown↓ CMS быстрая и простая. Быстро создавайте веб-сайты и легко публикуйте их. От новичка до эксперта.

Как добавить звук на ноутбук с помощью клавиатуры

Как восстановить настройки монитора по умолчанию

Как просмотреть кадры с камеры видеонаблюдения на мониторе

Запятая не ставится на клавиатуре что делать

Обзор монитора Hp 25x