Почему свотчи в сети отличаются от реального цвета лака?..

..И почему фраза «у меня калиброванный монитор» — не панацея?

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

Для начала небольшие вводные об экранах, на которых мы смотрим свотчи.

Большинство мониторов на данный момент с жидкокристаллическим дисплеем. Про плазму не будем говорить, так как эта технология сейчас практически не используется (плазменных мониторов — так вообще никто никогда не делал). Итак, как устроен жидкокристаллический монитор? Очень упрощенно и условно говоря, у монитора есть:
— белая подсветка (попробуйте вывести на монитор единый цвет и вы увидите, что подсветка монитора не идеально ровная);
— поверх нее светофильтры (тонкая прозрачная пленка, на которой нарисованы цветные субпиксели зеленого, синего и красного цветов);
— жидкие кристаллы (представьте себе работающие жалюзи, которые либо пропускают сквозь себя весь свет, либо часть света, либо не пропускают никакого света). За счет того, что субпиксели не абсолютно полностью (это зависит от типа экрана) перекрывают идущий от подсветки свет, на экране чёрный цвет выглядит тёмно-серым.
Представляете, через какой бутерброд мы смотрим на изображение? 🙂

Самые распространенные типы матриц, их плюсы и минусы:
— TN — самые простые и дешёвые в производстве, однако у них хуже углы обзора, хуже цветопередача;
— IPS — хорошая цветопередача, углы обзора лучше, чем у TN, более высокое время отклика, то есть изображение инертно (яркий пример — если на черном экране двигается белая точка, то можно увидеть белесый след, который она оставляет);
OLED — отличается от описанных выше технологий, это технология с использованием органических светодиодов. Иными словами, каждый субпиксель — это отдельный светодиодик одного из основных цветов (синий, зеленый и красный; бывают еще и с белым цветом). Чем ярче картинка, тем выше энергопотребление; со временем выгорают и вследствие этого меняют цветопередачу. Обычно имеют очень яркие и насыщенные цвета, зачастую — чрезмерно, однако современные телефоны Samsung позволяют настраивать отображение цветов и делать его более, гхм, умеренным. OLED-экраны используются в мобильных устройствах (чаще всего в своих смартфонах технологию AMOLED используют Samsung, Microsoft (Nokia), Motorola и множество производителей помельче).
Apple для смартфонов и планшетов использует технологию IPS. Из-за разницы технологий на смартфонах Samsung и iPhone картинкосвотч может выглядеть по-разному.

Цветовой охват, что это и с чем его едят.

Для того, чтобы на экранах цветное изображение выглядело одинаково, придумали некий цветовой стандарт — sRGB.
Когда вы настраиваете монитор программными средствами (при помощи калибратора создается профиль, который потом используют операционная система и некоторые приложения, предназначенные для просмотра или редактирования цифровых фотографий), это помогает приблизить отображение цвета к стандарту; однако не может «научить» монитор отображать цвета, показать которые он физически не способен. Яркий пример «сложного» к отображению цвета — Kure Bazaar Hope. В палитре цветов sRGB такого оттенка просто нет.

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

Наш браузер (Firefox, Internet Explorer, Safari, Google Chrome) работает с профилем, который мы создали с использованием калибратора и специализированной программы, чтобы показать цветное изображение таким, каким его задумал автор (не будем затрагивать работу браузера у мониторов с расширенным цветовым охватом Adobe RGB). Когда вы экспортируете изображение из графического редактора (например, Lightroom), оно несет в себе информацию о себе для правильного отображения в браузере, в том числе некий тэг в заголовке с цветовым стандартом, согласно которому картинка должна отображаться у других людей такой, какой вы ее обработали. Графический редактор умеет вставлять в заголовок информацию о том, для какого цветового пространства было подготовлено это изображение. Однако не все графические редакторы это делают автоматически: например, если вы экспортируете картинку из Photoshop посредством пункта меню «Save for Web», вы удивитесь, но при настройках по умолчанию картинка будет преобразована в цветовое пространство sRGB (даже если редактировали вы её в профессиональном Adobe RGB), а тэг sRGB в полученном изображении указан не будет. Некоторые сайты этот тэг при загрузке изображений просто удаляют, а некоторые стандарты цветных изображений (например, .gif) вообще его не поддерживают. Хотите поиграться и проверить свои свотчи? Зайдите на сайт Jeffrey’s Exif Viewer; наведите мышкой на изображение в блоге, нажмите правую кнопку мышки и выберите пункт «Скопировать ссылку на изображение» (у меня русскоязычная операционная система, у вас может быть вариант типа «Copy image address»).
Jefferey's Exif ViewerВставьте скопированное в поле и нажмите кнопочку справа. Я использую фотографии со своего сайта, они кликабельные. То есть просматривая пост, вы видите миниатюры фотографий, которые создал WordPress. Если вы на картинку нажмете — то она предстанет перед вами в оригинальном размере, импортированным мной на сайт. Итак, посмотрим информацию миниатюрок и полноразмерных картинок:
colorprofilenocolorspacemetadataНас интересует исключительно информация о цветовом стандарте, считав который, браузер должен отобразить картинку такой, какой я ее задумала\обработала. Здесь видно, что нужного тэга sRGB нет, о чем есть соответствующее предупреждение.
ColorprofilesrgbА здесь я проверила полноразмерную картинку. Тэг, как видите, присутствует.
Почему этот тэг так важен? Существует некая организация World Wide Web Consortium, или «Консо́рциум Всеми́рной паути́ны — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины». Иными словами, она задает стандарты, по которым работают наши с вами браузеры. Эта организация задала стандарт, согласно которому, все браузеры в случае, если изображение не несет в себе тэга и неясно, в каком виде ее отображать, должны по умолчанию показывать ее в цветовом стандарте sRGB.

Как все это работает в реальности:
Google Chrome на всех платформах не меняет отображаемые цвета под профиль монитора. Иначе говоря, если у вас монитор калиброван и имеет расширенный цветовой охват, картинка не будет отображаться правильно. У некоторых мониторов цветовой охват расширен в сторону одного из основных цветов — например, в красную. Соответственно, оттенки красного будут отображаться насыщеннее, даже если монитор откалиброван. Вам повезло, если вы маковод и используете монитор Apple, их мониторы обычно хорошо настроены прямо с завода и достаточно точно соответствуют стандартам sRGB. Все браузеры, построенные на движке Chromium, имеют те же проблемы: Yandex.Браузер, Opera (начиная с 14-ой версии), Vivaldi…
Firefox имеет ровно те же проблемы на всех платформах, исправляется при помощи одной-единственной настройки (инструкция здесь).
Internet Explorer (11-ой версии) по моему скромному мнению, затмил всех и вся. Даже если у вас монитор с расширенным цветовым охватом и изображение сделано под расширенный цветовой охват (например, Adobe RGB), то браузер преобразует его в стандарт sRGB и выведет, как есть, проигнорировав цветовой профиль вашего монитора. Если же у изображения тэг отсутствует, то браузер будет считать его сохранённым в стандарте sRGB (что правильно), правда, опять же, в обход цветового профиля вашего монитора.
Safari о работе этого браузере ничего не скажу, ибо не имею мака.

Как видите, для корректной передачи цвета вашего свотча, недостаточно фотоаппарата и графического редактора.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *