Покращуємо кольору у вебі (для эплофилов)

Останні декілька років спостерігається значне поліпшення технології виробництва дисплеїв. Спочатку це було оновлення до екранів з більш високою роздільною здатністю, що почалося з мобільних пристроїв, а потім перейшло на настільні комп'ютери і ноутбуки. Веб-розробники повинні були зрозуміти, що значить для них високе значення DPI, і знати, як розробляти сторінки, що використовують таке високе дозвіл. Таке революційне поліпшення дисплеїв відбувається прямо зараз: поліпшення передачі кольору. У цій статті я хотів би роз'яснити, що це означає, і як ви, розробники, можете виявляти такі дисплеї і забезпечувати кращу взаємодію для ваших користувачів.

Візьмемо типовий комп'ютерний монітор — тип, який ви використовуєте вже більше десяти років, — дисплей sRGB. Останні розробки Apple, включаючи Retina iMac (кінець 2015 р.) і iPad Pro (початок 2016 р.), можуть показувати більше квітів, ніж дисплей sRGB. Такі дисплеї називаються дисплеями з широким колірним охопленням (роз'яснення термінів «sRGB» та «колірний діапазон» буде дано далі).

Чому це корисно? Система з широким колірним охопленням часто забезпечує більш точне відтворення оригінального кольору. Наприклад, у мого колеги по імені Хобер є помітні кросівки.


Яскраво-помаранчеві кросівки Хобера

На жаль, те, що ви бачите вище, не передає, наскільки насправді вражаючі ці кросівки! Проблема в тому, що колір матеріалу кросівок не може бути представлений на дисплеї sRGB. Камера, якій зроблена ця фотографія (Sony a6300), має матрицю, воспринимающую більш точно колірну інформацію і відповідні дані є в оригінальному файлі, проте дисплей не може показати їх. Тут показаний варіант фотографії, на якій кожен піксель, що має колір, що виходить за межу типового дисплея, замінений світло-блакитним:


Ті ж яскраво-помаранчеві кросівки Хобера, але тут всі пікселі, що виходять за кордон охоплення, замінені блакитними

Як можна бачити, колір матеріалу кросівок і значної частини трави виходить за кордон дисплея sRGB. Фактично, точно представлені кольори лише менш ніж у половини пікселів. Будучи веб-розробником, вам необхідно рахуватися з цим. Припустіть, що продаєте такі кросівки через онлайн-магазин. Ваші клієнти не будуть точно знати, який колір вони замовили, і можуть бути здивовані, коли їх купівля прийде до них.

Ця проблема зменшується при використанні дисплея з широким колірним охопленням. Якщо у вас є один з пристроїв, згаданих вище, або подібне, то ось варіант фотографії, яка покаже вам більше кольорів:


Ті ж яскраво-помаранчеві кросівки Хобера, але доданий колірний профіль

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

У всякому разі, це хороша новина! Дисплеї з широким колірним охопленням є більш яскравими і забезпечують більш точне відображення реальності. Очевидно, є бажання переконатися, що ви зможете надати вашим користувачам таке формування зображень, в якому дана технологія буде корисна.

Нижче представлений наступний приклад, на цей раз зі згенерованим зображенням. Користувачі на дисплеї sRGB бачать внизу однорідний за кольором червоний квадрат. Однак це, в деякому роді, трюк. Насправді, на зображенні дано два відтінки червоного, один з яких можна побачити тільки на дисплеях з широким колірним охопленням. На такому дисплеї ви побачите блідий логотип WebKit всередині червоного квадрата.


Червоний квадрат з блідим логотипом WebKit

Іноді відмінність між нормальним зображенням і зображенням з широким колірним охопленням дуже тонка. Іноді воно виражено значно більш різко.

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

Визначення
Нижче дано коротке пояснення термінів, що часто використовуються при обговоренні кольору.

Колірний простір. Колірний простір — це те оточення, в якому можна задавати і порівнювати кольору. Є кілька типів колірного простору, кожен з яких використовує різний набір параметрів для опису кольорів. Наприклад, сіре колірний простір має тільки один параметр, керуючий рівнем яскравості при переході від чорного до білого. Ви, мабуть, знайомі з колірними просторами типу RGB, які використовують червоний, зелений і синій кольори в якості параметрів, що складаються разом на дисплеї для створення потрібного кольору. Процеси друку часто використовують колірні простори типу CMYK, де колір чорнила складається з блакитного, пурпурного, жовтого і чорного кольорів.

Кольоровий профіль. 1993 році група постачальників утворила Міжнародний консорціум по засобам обробки кольорових зображень (ICC, щоб задати стандарт, що описує колірні простору. Колірний профіль являє собою дані, що визначають колірне простір пристрою, і може бути використаний для переходу між різними колірними просторами. Найбільш поширені отримали імена, як, наприклад, sRGB (або більше формально, IEC 61966-2-1). Моє використання вище назви sRGB тепер придбало більше сенсу: такий дисплей може відображати кольори, відповідні колірного простору sRGB. Колірний профіль може бути записаний у деякий файл або вбудований безпосередньо в зображення, що дозволяє комп'ютеру розуміти, що насправді означають значення кольору в зображенні.

Колірний обхват. Колірний обхват являє собою спектр кольорів, який може обробляти пристрій або який може поставити колірне простір. Охват для дисплея комп'ютера — це всі кольори, які дисплей можна точно показувати. Поняття візуалізації колірного охоплення видається дещо важчим, але це трохи схоже на цветоподборщики, наявні в ПО розробника. Уявіть собі палітру всіх можливих кольорів, накладену на поверхню, з первинними квітами в декількох точках екстремумів. При русі до червоного екстремуму колір стає більш червоним. При русі до синього — більш синім і т. д. Колірний обхват — це область на розглянутої уявної поверхні, що показує, наскільки колір у цього пристрою може бути зрушений в тому чи іншому напрямку. Охват можна зрозуміти на основі діаграми, представленої нижче; тут кольорова поверхня показує палітру кольорів, що сприймаються людським оком. Білий трикутник — область колірного простору sRGB (як можна бачити, вона істотно менше тієї, що бачить око).


Діаграма, що показує охват sRGB

Ці діаграми можуть трохи дезорієнтувати, тому що вони показують вам, які кольори ви можете явно бачити, а потім повідомляють вам, що охват не містить ті кольори. Тим не менш, вони дають хороший спосіб порівнювати розмір різних колірних обхватів. Зазначимо також, що тут ви бачите двовимірне представлення поверхні колірного охоплення, коли насправді вона розташована в трьох — або чотиривимірному просторі (все це досить складно — ми зараз намагаємося дати просте введення в тему).

Широкий колірний обхват. Цей термін неформально діє в промисловості для опису пристроїв або колірних просторів, що мають колірний обхват, що перевищує такий у sRGB (яким володіють майже всі комп'ютерні дисплеї, використовувані в останні приблизно десять років). Дисплеї з більш широким колірним охопленням вже є на ринку деякий час, але вони були обмежені, в основному, професійним застосуванням. Тепер вони стають доступними для звичайних споживачів, а це означає, що з'являється більше доступних кольорів. Іноді широкий колірний обхват називають розширеною передачею кольору. Сучасні дисплеї Apple підтримують колірний простір Display P3, що приблизно на 25% ширше sRGB.

Глибина кольору. Комп'ютери можуть використовувати різні рівні точності або глибини для представлення кольору. Це не те ж саме, що колірний обхват, що описує палітру кольорів. Скоріше це кількість окремих кольорів всередині охоплення, яке може бути задано. Веб-розробники, як правило, знають синтаксис CSS
rgb()
, що має 0-255 значень для червоного, зеленого і синього. Це дає глибину 8 біт на канал — всього 16 777 216 кольорів. Якщо додати четвертий компонент кольору / ступінь прозорості, то можна зберегти колір 32 бітах. Якщо використовується глибина 8 бітів на канал, то можна відтворити завжди тільки одне і те ж кількість квітів, незалежно від використовуваного колірного простору — буде просто інший набір кольорів. При виборі 16 біт на канал простір буде більш глибоким, і можна отримати більше кольорів всередині того ж колірного охоплення. Хорошим прикладом є проведення градієнта між схожими кольорами: можна побачити полосчатость, коли комп'ютер і дисплей не мають необхідну глибину, щоб показати плавний діапазон кольорів між кінцевими точками.

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

Знижена глибина кольору демонструє чіткі переходи між схожими кольорами.


Градієнт від світло-червоного до темно-червоного з чіткими смугами

При збільшенні глибини кольору переходи стають набагато менш помітними.


Градієнт від світло-червоного до темно-червоного без виражених смуг

Після такого введення розглянемо більш детально колір в мережі і останні вдосконалення WebKit, допомагають розробляти контент з поліпшеним розумінням питань, пов'язаних з кольором. Ми також дамо інформацію про деякі особливості, введених нами W3C, які дозволять вам отримати ще більше корисної від цієї нової технології для дисплеїв.

Кольори у вебі
Мережа часто намагається з усіх сил обробляти кольору правильно. Я впевнений, що серед читачів є ті, хто з болем згадує безпечні веб-кольори! Оскільки ми йшли від цього, у нас все ще є обмеження, такі як робота HTML і CSS тільки колірного простору sRGB. Як у прикладі з кросівками Хобера, це означає, що є багато квітів, які ваші CSS, зображення і полотна не можуть відтворити. Це — проблема, якщо ви намагаєтеся показати вашій родині весняні квіти, які цвітуть у вашому саду, або покупки для яскраво-червоного спортивного автомобіля, допомагають, безсумнівно, розв'язання вашого кризи середини життя.

Так, коли ми показуємо фотографію кросівок вище, дисплей sRGB стискає всі кольори за межами колірного обхвату sRGB в кольори, які він може показати. Але дисплей з розширеним колірним охопленням, такий як Display P3, не виробляє такий зсув у палітри sRGB. На малюнку нижче можна бачити різницю між колірного простору sRGB і Display P3.


Порівняння колірного обхвату sRGB та P3

Пофарбований трикутник являє собою простір sRGB. Білий трикутник показує простір Display P3. Воно значно більше, ніж у sRGB, особливо на ділянках найбільш насичених кольорів — червоного, жовтого, зеленого та фіолетового. Чорний контур показує можливості типового людського ока.

Пам'ятайте червоний квадрат з блідим логотипом WebKit? Зображення було створене у колірному просторі Display P3, заповнено 100%-але червоним
rgb(255, 0, 0)
, а потім був введений логотип з дещо відмінним червоним кольором
rgb(241, 0, 0)
. На дисплеї sRGB логотип не видно, оскільки всі значення червоного вище 241 в Display P3 знаходяться вище верхньої межі червоного в sRGB; червоний 241 і червоний 255 сприймаються як один колір.

Примітка. Я бачив в Твіттері, що тут виникає невелике непорозуміння, тому спробуємо альтернативне пояснення. Принципово все повністю червоні значення між 241/255 і 255/255 в колірному просторі Display P3 не розрізняються при перегляді в sRGB. Це не означає, що червоний 241 у Display P3 такий, що червоний 255 у sRGB, — на жаль, тут не так просто, і я не хотів би вдаватися в деталі у цій вступній статті. Для тих, кому це цікаво: в macOS є додаток Color Sync Utility, яке дозволяє різними шляхами перетворювати колірні простору, а також порівнювати охоплення.

Отже, тепер ви розумієте, чому треба знати глибше ситуацію з кольором і що цю технологію можна використовувати для забезпечення користувачам кращої взаємодії. Сказане вище є основою — тепер поговоримо, що це означає для WebKit.

Узгоджені за кольором зображення
Вище було згадано, що мережа «заточена під використання sRGB. WebKit/Safari на Mac працюють в цьому колірному просторі багато років, забезпечуючи користувачеві узгоджені кольору на різних дисплеях (до часу написання цієї статті більшість інших ядер браузерів працює в т. н. колірному просторі приладу, тобто вони не обробляють значення кольору, поки ті не пройдуть через апаратне забезпечення дисплея).

WebKit погоджує за кольором всі зображення як в iOS, так і в macOS. Це означає, що для зображення, що має колірний профіль, можна бути впевненим у правильності подання кольори на дисплеї, незалежно від того, це звичайний дисплей, або дисплей з широким цифровим охопленням. Це корисно, оскільки багато цифрові камери не використовують sRGB у своєму вихідному форматі, з-за чого просто інтерпретація значень червоного, зеленого і синього, як таких, навряд чи дасть правильний колір. Зазвичай користувач не бажає робити що-небудь для отримання цього узгодження кольору. Майже все програмне забезпечення для обробки зображень дозволяє вставляти зображення колірний профіль; багато програми роблять це за замовчуванням.

На прикладах, наведених вище, можна бачити це дія узгодження кольору Safari від OS X 10.11.3 і вище, а також на iOS 9.3 і вище (пристрої Retina). Все, що я повинен був зробити, це переконатися, що містили зображення відповідний колірний профіль.

Якщо зображення не несе з собою профіль, то WebKit приймає, що має місце sRGB. Це дозволяє легко у вашій створюваної ілюстрації (наприклад, рамка або фонові зображення) узгодити те, що було задано вами в CSS. Це означає, що CSS-значення
rgb(255, 0, 0)
буде відповідати відповідним значенням для повного червоного кольору в sRGB.

Примітка. Припущення, що зображення, що не несе відповідних тегів (про колірний профіль), не слід відносити до sRGB, вимагає деякого коментаря. Причина, по якій ми робимо це, пояснена вище: такий підхід дозволяє забезпечити узгодження кольорів у зображенні з CSS-квітами на сторінці.

Ситуація є нормальною для технології дисплеїв, використовуваної останні десять років. Але зараз, коли з'явилися дисплеї, що підтримують розширений колірний обхват, виникає бажання більш повно керувати тим, в якому вигляді постає ваш контент.

Виявлення дисплея
Вище було пояснено, чому краще зображення з широким колірним охопленням подавати на такий же дисплей. Якщо зображення з широким колірним охопленням надходить на звичайний дисплей, то WebKit, погоджуючи кольору зображень, покаже його в просторі sRGB. Однак це перетворення в sRGB може бути виконано кількома способами, і немає гарантії, що воно пройде однаково на різних браузерах або платформах. У досвідченого веб-розробника є бажання мати можливість перетворювати зображення офлайн, щоб краще контролювати те, що буде бачити кінцевий користувач. До того ж вбудовування колірного профілю трохи збільшує розмір файлу. Не завжди є бажання відправляти ці спеціальні дані, якщо вони не потрібні.

Найкращим рішенням є надавати зображення з широким колірним охопленням, коли у користувача є такий дисплей, і sRGB-зображення — при іншому дисплеї. Ця ситуація є одним з напрямків адаптивних зображень і точно показує, що повинні обробляти елементні та медіа-запити.

WebKit тепер підтримує (новий по відношенню до CSS Color Level 4) медіа-запит на колірної охоплення. Нижче показано, як використовувати його:

<picture>
<media source="(color-gamut: p3)" srcset="photo-wide.jpg">
<img src="photo-srgb.jpg">
</picture>


Цей запит можна використовувати також всередині таблиці стилів:

.main {
background-image: url("photo-srgb.jpg");
}

@media (color-gamut: p3) {
.main {
background-image: url("photo-wide.jpg");
}
} 

Або як скрипт:

if (window.matchMedia("(color-gamut: p3)").matches) {
// Do especially colorful stuff here.
} 

Запит на охват приймає значення
р3
та
rec2020
як значення, що є навмисно неточними термінами, щоб задати палітру кольорів, що підтримуються системою, включаючи ядро браузера і апаратне забезпечення дисплея. За замовчуванням, оскільки майже всі дисплеї підтримують sRGB, немає необхідності перевіряти на таку функціональність. Але типовий сучасний дисплей з широким колірним охопленням може підтримувати всю або майже всю палітру кольорів, яка входить у простір DCI P3, і буде відповідати медіа-запитом. Наприклад, простір Display P3, згадане вище, є одним з варіантів DCI P3. Значення rec2020 показує, що система має дисплей, що підтримує навіть більш широкий колірний обхват, як, наприклад, визначається простором Rec. 2020 (нині досить рідко можна зустріти в мережі з апаратним забезпеченням, яке, насправді, підтримує Rec. 2020, — не варто турбуватися про це).

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

Майбутні напрямки
Надання та візуалізація зображень з широким колірним охопленням є відносно простими процесами, але що, якщо необхідно об'єднати якесь зображення з іншими елементами сторінки, як, наприклад, колір фону, або ввести зображення елемент полотна? Це — деякі з проблем, з якими стикаються органи стандартизації, і я хотів би поговорити про те, чого тут можна очікувати.

Широкий колірний обхват в CSS
Вище було показано, що
rgb(241, 0, 0)
в Display P3 — те ж саме, що
rgb(255, 0, 0)
в sRGB. Що необхідно зробити, якщо потрібно колір, заданий в CSS, ввести як-то зображення з широким колірним охопленням? Ми ж не можемо поставити ці кольори в CSS.

Нижче описано те, що учасники проекту WebKit запропонували для CSS. Ідея полягає в додаванні нової функції, званої
color()
, яка може містити колірний профіль, а також параметри, що визначають колір:

/* NOTE: Proposed syntax. Not yet implemented. */
strong {
color: color(p3 1.0 0 0); /* 100% red in the P3 color space */
} 

На практиці її, ймовірно, використовували б з правилом
@supports
:

strong {
color: rgb(255, 0, 0); /* 100% red in the sRGB color space */
}

@supports (color: color(p3 0 0 0)) {
strong {
color: color(p3 1.0 0 0); /* 100% red in the P3 color space */
}
}


Примітка. Я спочатку допустив помилку, показавши синтаксис
color(p3, 255, 0, 0)
. Це є одним з незручностей існуючої функції
rgb()
. Нова функція
color()
прийматиме числа з плаваючою комою в якості параметрів, а не 8-розрядні цілі числа.


CSS буде задавати деякі відомі назви колірних профілів, завдяки чому можна буде легко знайти необхідні значення кольору. Йде ще деяка дискусія про дозвіл авторам посилатися на зовнішні профілі або, можливо, вказувати зображення, яке має вбудований профіль.

Додатково CSS може прийняти рішення, що дозволяє визначати значення за межами 0-255 (або 0-100%) в існуючій функції
rgb()
. Наприклад,
rgb(102.34%, -0.1%, 4%)
означатиме колір трохи більше червоний, трохи менше зелений і трішки більше синій. Складність тут полягає в тому, що розуміння цих значень може бути непростою справою (наприклад, що означає негативний зелений колір?).

Інша пропозиція полягає у завданні колірного простору для всього документа та інтерпретації в ньому регулярних CSS-значень кольору. Для зовнішніх зображень з вбудованими профілями буде, відповідно, відбуватися узгодження кольору.

Ці обговорення йдуть в робочій групі W3C CSS в даний час. Ваша думка цікавить нас — групі треба знати більше, що думають веб-розробники. Якщо ви зацікавлені в участі, то зверніть увагу на повідомлення електронної пошти з темою, що починається з "[css-color]", списку адрес електронної пошти, WWW-стиль.

WebKit сподівається реалізувати ці властивості, коли ми будемо впевнені, що вони виправдовують себе.

Широкий колірний обхват в HTML
Хоча CSS працює з більшістю уявлень HTML-документів, є одна важлива область, в якій це колірний простір не діє: елемент полотна. Як 2D, так і WebGL-полотна приймають, що вони працюють колірного простору sRGB. Це означає, що навіть на дисплеях з широким колірним охопленням неможливо створити полноцветовой полотно.

Як рішення пропонується додавання опціонального прапорця до функції
getContext
, який задає те колірне простір, на яке повинен бути налаштований за кольором полотно. Наприклад:
// NOTE: Proposed syntax. Not yet implemented.
canvas.getContext("2d", { colorSpace: "p3" });

При цьому з'являються деякі моменти, що підлягають розгляду, наприклад, як створювати полотна, що мають підвищену глибину кольору. Наприклад, в WebGL можна використовувати half-float-текстури, дають точність 16 біт на один колірний канал. Однак навіть якщо такі більш глибокі текстури використані в WebGL, ви будете обмежені точністю 8 біт, вбудовуючи це WebGL-зображення в документ.

Необхідно дати розробнику метод завдання глибини колірного буфера для елемента полотна.

Цього досягають більш складним способом, комбінуючи функції
getImageData/putImageData
(або еквівалент
readPixels
в WebGL). При сьогоднішніх 8 біт на кожен буфер каналу не відбувається втрата точності при введенні в полотно і виведення з нього. Перетворення також може відбуватися ефективно, як по продуктивності, так і по пам'яті, оскільки дані полотна і програми мають один тип. Якщо глибина кольору різна, то це може виявитися неможливим. Наприклад, half-float-буфер WebGL не має еквівалентного типу в JavaScript, що означає або вимушене деякий перетворення даних при читанні або запису, а також використання додаткової пам'яті при їх зберіганні, або необхідність роботи з вихідним буфером масиву і виконання громіздких математичних операцій з бітовими масками.

Такі обговорення йдуть в даний час на сайті WhatWG і будуть продовжені скоро W3C. І знову запрошуємо вас приєднуватися.

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

Програмне забезпечення WebKit дає розробникам великі можливості поліпшення колірних характеристик шляхом узгодження кольору і виявлення охоплення, наявних сьогодні в Safari Technology Preview, а також у macOS Sierra і iOS 10 betas. Ми також зацікавлені в початку реалізації більш досконалих колірних характеристик, таких як завдання широкого охоплення в CSS, введення профілів елементи полотна і використання збільшеної колірної глибини.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.