|
Одной из - увы! - многочисленных
проблем веб-дизайна является отображение цветов, которая связана
с различием механизмов отображения, применямых в различных
браузерах; кроме того, на это накладываются различия в отображении
цветов различных операционных систем. Основной рекомендацией
служит использование безопасной палитры (web-safe palette),
состоящей из 216 цветов. При этом каждая из RGB-составляющей
цветов этой палитры может принимать значения 00, 33, 66, 99,
СС и FF в шестнадцатиричной системе исчисления (этим и определяется
общее число возможных комбинаций). Однако нужно признать,
что это далеко не всегда является решением проблемы, и использование
безопасной палитры является необходимым, но не достаточным
условием.
В этом легко убедиться
на простом примере. В используемом вами графическом редакторе
создайте простой квадрат и залейте его одним из цветов безопасной
палитры (в описываемом примере я использовал цвет #663399).
Затем сохраните его в трех различных форматах: jpg, непрозрачный
gif (формат gif87) и прозрачный gif (формат gif89a). В третьем
случае задайте цвет, который должен быть прозрачным (поскольку
он у нас всего один, то выбирать долго не придется). Я специально
решил не усложнять задание и проверять также формат png, поскольку
он очень редко используется. И, наконец, создайте HTML-страницу
с цветом фона, равным выбранному ранее цвету для заливки,
и вставьте в нее три полученных изображения.
Теперь откроем страницу во всех имеющихся под руками браузерах
и будем созерцать результат. Не забудьте повысить яркость
монитора до максимума, ибо некоторые отличия находятся на
пределе видимости, и увидеть их можно только так.
Итак, смотрим. IE 5 оба
gif'а показал так, что их совсем не видно на фоне (т.е. то,
что нужно); jpg оказался немного темнее фона и поэтому слегка
заметен.
NN 4.0-4.7 показали следующее: jpg немного светлее фона, непрозрачный
gif намного светлее фона и сразу бросается в глаза, прозрачный
gif не виден совсем.
Opera 4 показал jpg светлее фона (хотя и не так заметно, как
NN4), непрозрачный gif немного темнее фона, и прозрачный gif
не заметен.
Будучи заинтригованным результатами, я решил протестировать
страницу также и в NN 3.0 Gold (вот он когда пригодился!)
и в Netscape 6 Preview Release 2, который недавно установил.
Результаты оказались поразительными. NN 3.0 показал страницу
так, что я не смог увидеть jpg и прозрачный gif, а непрозраный
gif оказался лишь немного светлее фона и еле-еле заметен.
Netscape 6 показал в принципе то же, что и его предшественники
четвертой версии, разве что указанные ранее отличия больше
бросались в глаза (что я считаю еще одним подтверждением "сырости"
данного продукта, над которым предстоит еще очень серьезная
работа).
Кстати, а что насчет самого фона? Поскольку ему был явно задан
определенный цвет, следовало бы ожидать, что везде будет видна
одна и та же картина. Как бы не так! Вот что имеет место на
самом деле: IE, Opera и Netscape 6 одинаково отобразили фон
данного цвета; NN3 и NN4 тоже одинаково, но немного другого
оттенка. Я не берусь судить, какая из групп браузеров отобразила
цвет фона ближе к тому, что показал Photoshop - отличия очень
незначительные. Но они есть - вот что главное!
Итак, подведем итоги.
Победителем этого, немного спонтанного, соревнования стал
- кто бы мог подумать! - Navigator 3.0 Gold. За ним с небольшим
отставанием идет IE 5, у которого jpg больше отличается от
фона, чем непрозраный gif в NN3. Третье место разделили NN
4.0-4.7 и Opera (хотя в Opera отличия кажутся чуть-чуть бледнее),
и замыкает шествие Netscape 6.
К сожалению, не удалось сравнить работу IE различных версий
- не хотят они уживаться на одной машине. Следует уточнить,
что тестирование проводилось на PC с установленной OS Win'98
SE. Это важная деталь, так как на других платформах (Unix,
Mac, BeOS и т.д.) особенности браузеров в совокупности с используемыми
цветовыми моделями операционных систем могут дать отличные
результаты.
Какие можно сделать из
этого выводы? Во-первых, для точного совпадения цвета с фоном
необходимо использовать свойство прозрачности формата gif89a,
это единственная гарантия получения нужного результата. Однако
далеко не всегда возможно (или целесообразно) его использовать.
Классический пример - изображения высокого качества или фотоиллюстрации,
сохранение которых в формате jpg могут дать большой выигрыш
в размере файла. Что можно посоветовать в такой ситуации?
Необходимо резать изображение на части и сохранять их в разных
форматах - центральная часть должна быть в формате jpg, а
пограничные части должны быть в формате gif89a с указанием
прозрачной области, которая совпадает с фоном. Это придаст
необходимое качество иллюстрациям веб-страниц: исчезнут рамки
вокруг изображений, и в то же время не придется жертвовать
возможностью оптимизации jpg-областей. В gif89a-фрагментах,
напротив, не следует сильно урезать цветовую палитру, в противном
случае будет видна линия стыковки между частями изображения,
сохраненных в различных форматах. Недостатком такого метода
является, безусловно, более запутанная верстка страницы и
ее усложненный HTML-код. Целесообразность применения данного
метода нужно оценивать в каждом конкретном случае отдельно.
|
