Для меня оказалось откровением то, что градиенты, нарисованные в Photoshop и генерируемые браузером, сильно различаются.
По умолчанию параметр smoothness всегда устанавливается в 100%. Но чтобы градиент стал таким же, каким его отобразит браузер, этот параметр нужно установить в 0.
Об этой особенности рассказал Олег Мохов в своем докладе на UWDC2012.
PS. В комментариях добавил иллюстрации стыкующихся градиентов.
Коментарии к заметке
Я тут потыркался и подобрал неплохую эвристику – результат почти идентичен фотошопному. (http://imgur.com/ceUq5 ) Естественно, в CSS этого не сделать, но если уж оооочень надо, всегда можно в Canvasе закодить.
Занятно. Только это, скорее всего, для самых экстремальных случаев pixel-perfect вёрстки.
Ну да, для самых дотошных. :)
У меня есть подозрение, что такое поведение связано с эстетикой стыкующихся между собой градиентов. Когда они описываются линейными функциями (smoothness = 0), то их внешний вид явно проигрывается нелинейным.
Если учесть, что очень часто делают сложные гладиенты из 3-4 цветов, то сглаживание вполне оправдано. Творческие люди не обременяют себя всякими умными штуками. Главное, чтобы смотрелось хорошо.
ИМХО, то, что они там стыкуются значения не имеет. Градиент из черного в белый или наоборот и без всяких стыковок выглядит неравномерным при отсутствии этого самого Smoothness. Это заметно. Но вообще-то говоря, если монитор качественный, то никакой неравномерности быть не должно. Градиент должен иметь плавный переход от начала до конца. А если это средненький или, тем более, бюджетный экран, то могут наблюдаться слишком быстрые или слишком медленные проваливания в белый и черный (то есть у концов градиента). А стыкование просто делает это более заметным.
Так вот, получается, что вид градиента будет зависеть от качества монитора. А раз так, то и Smoothness, по логике, должен это выравнивать с учетом специфики конкретного экрана.
Хотя, конечно, не исключено, что алгоритм подстроен под среднестатистический монитор. Но тогда владельцам дорогих дисплеев придется постоянно выключать это свойство (или в настройках это глобально отрубить). Но по-хорошему алгоритм всё-таки должен учитывать особенности конкретного монитора. Тем более, что у Adobe, вроде бы, есть соответствующие утилиты, которые анализируют монитор.
Подожди. Фотошоп, да и любая другая графическая программа, о мониторе может знать только из цветового профиля, который ей сообщили. Он сам ничего не придумывает о гамме и других показателях монитора или системы.
В битмап изображения он пишет числа 0, 1, 2, 3, 4 и т.д., соответствующие яркости пикселя (предположим, что речь идет о монохромном изображении). А когда дело доходит до показа этих пикселей , то уже начинаются какие-то преобразования согласно цветовому профилю. Позже может выяснится, что монитор способен показывать только 64 градации яркости, а не 256, как ожидалось — опять преобразования, но уже в мониторе.
От сюда получается, что на разных мониторах картинка может выглядеть по-разному. Или раньше, когда у Mac OS X гамма = 1,8 (в версиях до Snow Leopard), на одном и том же оборудовании, но в разных ОС мы могли лицезреть разный результат. Это всё про калибровку, в общем.
В конкретном случае с градиентами Фотошоп вместо линейной последовательности чисел начинает применять хитрые формулы. Вместо:
0, 32, 64, 96, 128, 159, 191, 223, 255получаем:
0, 21, 52, 88, 128, 167, 203, 234, 255Все эти числа я взял пипеткой, построив два градиента шириной 9 пикселей.
Есть ещё нюанс, когда для дополнительного смягчения цветовых переходов накладывается шум ±1 уровень яркости (dithering). Более того, для компонент RGB этот шум независимый. Так «расширяется» динамический диапазон изображения еще на 2-3 бита. Но это уже трюки с обманом зрения и к математике отношения не имеют.
http://bourt.com/blog/?p=700
[…] my graphics library, I came across an interesting issue with gradients that some web designers struggle with — Photoshop gradients and browser gradients are different! That means when you design your site […]