+7 (912) 21 99 569Секреты веб-графики
Все знают, что посредством зрения человек получает 70% информации об окружающем мире. Безусловно, появление графических браузеров дало возможность дополнять текст изображениями, и в результате Интернет приобрел мощный механизм воздействия на своих пользователей. Будучи по сути такой же компьютерной графикой, у Web-изображений все же есть ряд особенностей, обратить на которые необходимо особое внимание.
Как известно, чтобы получить любой цвет необходимо в соответствующих пропорциях смешать только три цвета: красный, зеленый и синий - в английской аббревиатуре получается RGB (Red, Green, Blue). Широко используется данный принцип в цветных фотопленках, где, при помощи изменения степени засветки зеленого, красного и синего слоев, можно получить необходимый тон. Принцип RGB перешел из цветного кино в цветное телевидение, где совмещение красных, голубых и синих лучей дает разные цвета. Безусловно, с экранов телевизоров этот принцип перешел на мониторы компьютеров. Поскольку итоговый цвет – это результат суммирования, он называется аддитивным (additive color).
Но есть еще один способ смешивания цветов при подготовке изображений на компьютерном экране – принцип вычитания (subtractive color). Он задействует удаление негативов вышеназванных цветов из белого, а именно - голубого, пурпурного, желтого, а также черного (негатива белого цвета) для лучшего контраста. В английском это аббревиатура – CMYK (Cyan, Magenta, Yellow, Black). Такой способ применяется, в первую очередь, чтобы подготовить изображение к печати на бумаге, а в Web фактически не применяется. В этой статье он интересует нас только потому, что он вообще есть.
Создавая изображение на компьютере не так нужно знать, каким образом создается определенный цвет, как знать, каким образом им управлять. Существует множество форматов графических файлов, и соответственно цветовых режимов, но на подготовку графики в Веб нужны только три-четыре. Но до того как приступить к рассмотрению этих режимов, нужно договориться о терминологии.
Палитра цветов навевает ассоциации о мастерской художника, с этюдниками, мольбертами и палитрами для смешения красок. В каком-то смысле так и есть, но такие инструменты живописи, как мольберт, кисти и краски заменяет компьютер. В компьютерной же графике палитра (или матрица) является перечнем цветов, которые используются в работе с изображением. Их число в палитре определяется глубиной.
Глубина цвета зависит от количества битов на пиксель (это единичный компонент, так сказать, "атом" изображения). По сути, сколь угодно большим может быть, как глубина цвета, так и число цветов в палитре. Однако не нужно забывать про меру. Человеческие глаза хоть и являются уникальным инструментом для работы с цветовой гаммой, однако возможность различать цвета не является бесконечной. Помимо этого, надо принимать в расчет и быстроту обсчета компьютером большого объема изображения (речь не идет файлах больших размеров - об этом ниже), а также разрешающую возможность монитора при значительной глубине цвета. Из этого получается максимум - 24 бита на пиксель (или в RGB 8 бит на каждый цвет) либо 224=16,8 миллионов цветов в палитре. Но при подготовке изображений в Веб использовать "полную" палитру (true color) не всегда конструктивно.
Огромную популярность в последнее время приобрел стиль ретро, и даже не от сам, сколько стилизация под него, и использование черно-белых, монохромных изображений, как одно из направлений ретро. В этом случае нет надобности хранить информацию обо всех цветах, сохраняется только информация об оттенках одного тона. Как раз в этом принципе используется режим градации серого (или на английском grayscale), в котором задействованы до 256 тонов серого.
Как мы уже говорили, использовать большое число цветов в изображении не всегда конструктивно. Режим индексированных цветов (или index color) предусматривает формирование тона не при помощи традиционного смешения трех "чистых" цветов в палитре - каждому пикселю присваивается свой индекс, отсюда и возникло название. Их число при этом может быть разным, однако не больше 256. Безусловно, чем меньше количества тонов в палитре, тем меньше и размер файла изображения.
Однако для полноцветных отображений, которым характерны плавные градиентные переходы, нужен режим RGB, которые дает доступ к управлению каждым цветом при помощи задавания одного из 256 тонов каждого из трех цветов. Это самый используемый режим подготовки изображений.
Несмотря на все разнообразие, в компьютерной графике изображения можно разделить по двум большим классам: векторные и растровые. У каждого из них есть свои плюсы и минусы.
Особенность создания растровых изображений заключается в том, что разрешающая способность глаза является конечной, когда при сдвигании двух точек, человеческий глаз перестает различать их. Припомните рисунки, которые создавали на заре развития компьютерных технологий при помощи ASCII-символов, и рассмотреть которые можно было лишь с некоторого расстояния. Растровый тип изображений можно представить в виде массива пикселей, у каждого из которых есть свой цвет. Таким образом, растр, если выражаться языком математики, это представление изображения путем дифференцирования (то есть деления непрерывного на простые отрезки). Собственно недостатки представления растрового изображения проистекают из его принципа. Так, размер файла изображения в 300*200 пикселей, если на пиксель необходимы три байта, в RGB будет составлять 300*200*3=180 Кбайт. А это неудобно, ведь далеко не каждый пользователь согласится ждать загрузки подобного изображения, особенно, если оно не одно. Помимо этого, каждая элементарная единица, является ли она атомом в представлении древних греков либо пикселем в нашем представлении, по сути, неделима. А значит, масштабировать растровое изображение невозможно. При увеличении подобной картинки раз в 10, все, что можно увидеть, это нагромождение цветных квадратиков, понять смысл которых можно только отойдя на приличное расстояние.
Достоинства растровых изображений проистекают из их недостатков. Только в этом режиме возможно получить доступ к каждому отдельному пикселю изображения и поменять его тон, яркость либо насыщенность, сделать белое черным. Как раз на этом базируются разнообразные графические фильтры, дающие возможность сделать изображение размытым либо, напротив, более четким, контрастным, а также по-разному его тонировать. Растровый формат применяется захвате изображения с монитора и сканировании. Всевозможные растровые графические редакторы намного чаще применяются при редактировании изображений, чем при их создании, в связи с этим вполне мирно уживаются PhotoShop и Corel Draw. Еще одной немаловажной особенностью является тот факт, что фактически все графические браузеры распознают растровые картинки без помощи подключаемых модулей (plug-in). Помимо этого, фактически каждый векторный рисунок можно легко и без искажений перевести в растровый формат. Но обратно никак.
В математике интеграл является обратной функцией дифференциалу, так же можно назвать "вектор" противоположностью растра. Любая кривая, в том числе и замкнутая, может быть описана при помощи некоторого набора математических формул и представлена как программный код. Все изображения можно представить в виде совокупности фигур (или замкнутых линий), которые окрашены в тот либо другой цвет. Как раз таким образом мы рисуем при помощи кисточек и карандашей, как раз этот принцип и выстраивает векторные форматы. Данные принципы как раз и определяют главные достоинства "вектора". Возможность не описывать все пиксели дает шанс существенно сократить объем файлов даже при достаточно крупных размерах картинки. Помимо этого, при умножении функции на константу (или постоянное число) форма кривой, описываемой ею, не меняется. Поэтому векторное изображение является идеальным объектом для масштабирования. Векторное изображение, даже увеличенное раз в десять, выглядит не хуже оригинала.
Но, получив возможности управления размерами, мы можем потерять в гибкости работы с цветом, которая свойственна растровым картинкам. В связи с этим векторные графические редакторы применяются для создания картинок, а растровые редакторы для последующей доводки и нюансировки, придания им некой реалистичности. Особое положение среди программ для оперирования векторной графикой отдается шрифтовым редакторам. В последнее время в связи с раскруткой таблиц стилей (CSS), а также появившейся возможностью загружать шрифты на компьютеры пользователей, это стало весьма актуальным.
К одной из разновидностей векторной графики можно отнести трехмерная 3D-графику. В файлах 3D просто вводится дополнительная координата, благодаря которой получается не просто изображение, а целая сцена с огромным числом нюансов, а значит и большим объемом вычислений.
Однако в Web используется малое число графических форматов при всем их разнообразии. Главным ограничителем тут выступает величина файла. Поэтому выбор формата при работе с изображением в Web определяется наилучшим соотношением двух параметров, взаимоисключающих по своей сути: объема файла и размера изображения. Но, как известно из теории вероятности, большинство схем подачи информации обладает тем либо иным уровнем избыточности. Например, конспектируя лекции, мы применяем некую систему сокращений, и при этом теряется смысла содержания. Данный принцип лежит в основе большинства режимов сжатия информации, и форматов графических файлов, применяемых в Web, в том числе. Но алгоритмы реализации одного и того же принципа разрабатываются разными профессионалами, потому результаты весьма существенно отличаются друг от друга. И к тому же необходимо помнить о том, что любой формат обладает и другими особенностями, в связи с этим при его подборе необходимо прежде всего учитывать исполнение изображения.
GIF (или Graphics Interchange Format, то есть формат взаимообмена графикой) разработала компания CompuServe Incorporated, последний вариант – GIF-89a. Изначально, как понятно из наименования, данный формат был создан для передачи графических сведений в потоке данных, а значит, в отличие от прочих, является последовательной, а не произвольной организацией. Это дает возможность задействовать минимум ресурсов процессора для его распаковки. При компрессии GIF-файлов применяется LZW-алгоритм сжатия, либо, сжатие без потерь, как его еще именуют, он наиболее результативен при крупных однотонных областях с отчетливыми границами. И поскольку сканирование картинки идет по горизонтали, поэтому и сжатие наиболее эффективно при крупных горизонталях подобных областей. Но GIF не может сохранять неиндексированные картинки, то есть способен отображать не больше 256 цветов. Подобная узость формата не дает возможности добиться постепенного перехода от одного тона к другому, что особенно видно при использовании размывок и градиентов. Безусловно, можно воспользоваться "диффузией", но получаемый при этом эффект "зернистости" смотрится скорее стилизацией, и в связи с этим далеко не всегда оправдан в контексте веб-сайта. Помимо этого, использование диффузии увеличивает неоднородность картинки, что в свою очередь ведет к уменьшению результативности компрессии. С другой стороны, ограниченность палитры в формате GIF может служить ее гибкостью. При помощи изменения размера таблицы, и соответственно, количества цветов, web-дизайнер обретает изумительный инструмент для регулирования соотношений качества изображения и размера файла. Так, при уменьшении количества цветов с 256 (или 8 бит на пиксель) до 128 (или 7 бит на пиксель) в изображении размером 100 на 100 пикселей, мы получаем 100 на 100 на 8 – 100 на 100 на 7, а значит 10 тысяч бит экономии. К еще одной особенности, существующей в последней версии формата, можно отнести возможность создания прозрачных областей в картинках, которая дает любопытные возможности в веб-дизайне. "Потоковая" натура GIF, сравнительно небольшие размеры файлов, возможность компрессии благодаря использованию прозрачных областей – все это сделало данный формат изумительным инструментом для создания анимированных картинок в Web. Применение GIF-формата целесообразно, в первую очередь, для плоскоцветных изображений, которым характерны четко обозначенные границы переходов между тонами, и также для малоразмерных изображений, по типу кнопок, превьюшных изображений и прочее.
JPEG (или Joint Photographic Experts Group). Этот формат разработала группа экспертов по фотографии (из чего и следует название формата) под эгидой Международная организация по стандартам или ISO. Данный формат весьма уникален тем, что применяет алгоритм сжатия, который отличается от используемых в прочих графических форматах, - это сжатие с потерями. Данный алгоритм прежде применялся в схеме телевизионного вещания США (NTSC). Базируется он на той же ограниченности зрения человека, неспособности человеческого глаза замечать какие-то искажения в воссозданном изображении. Сегодня данный алгоритм можно назвать одним из наиболее эффективных (поскольку коэффициент сжатия составляет 1 к 100), но данный формат не вполне хорошо справляется с картинками с резкими границами и небольшим числом цветов. В каком-то смысле JPEG является противоположностью формата GIF. Он дает возможность отображать 24-битную палитру, а значит и все 16,8 миллионов цветов, что позволяет отображать градиенты с точностью, которую можно назвать фотографической, не имея при этом прозрачных областей. Но есть в этом формате некая особенность, которой нельзя пренебрегать. Повторное сохранение картинки в формате JPEG запускает повторный алгоритм сжатия, что естественно влечет за собой ухудшение качества. А значит сохранять в нем изображение необходимо лишь после окончательной обработки.
Такие растровые форматы, как GIF и JPEG поддерживают всеми графические броузеры "по умолчанию" и обрабатывают большинство графических редакторов. Какой формат выбрать можно определить только особенностями каждой отдельной картинки, сделать это порой можно только пр помощи эксперимента.
Но в последнее время все чаще привлекают web-дизайнеров и векторные форматы. Достаточно популярным в последнее время стал такой формат, как Shockwave Flash, придуманный компанией Macromedia. Он обладает такими достоинствами векторных форматов, как сравнительно небольшой объем файла и масштабируемость, но все же не является только графическим. Инструменты для рисования в программе Macromedia Flash Direct больше похожи на растровые редакторы, чем векторные, а возможность создавать анимацию, озвучивать ее, заставлять эту анимацию откликаться на движения мыши, а также возможность работать с гиперссылками, все это делает механизм Flash похожим на формат мультимедиа. Зачастую, Flash-заставки, как отдельные элементы веб-сайта, применяются в виде интерактивных баннеров в рекламных сетях. Подобным флеш-баннерам пророчат великое будущее из-за их немалой способности повлиять на пользователей Интернета, чем способности классических баннеров, выполненных в формате GIF. Но намного чаще данный формат применяется для дизайна целой веб-страницы либо большей ее доли (классическим тому примером, на наш взгляд, можно назвать сайт компании "Дисней" http://www.disney.com/).
Серьезным минусом Flash можно назвать необходимость устанавливать дополнительный модуль, чтобы просмотреть Flash-заставки, модуль этот, хотя и распространяется бесплатно, однако весит 0,24 Мб, и его еще и нужно скачивать из Интернета, а этом может отбить всякое желание просматривать Flash. Однако возможность появления встроенного модуля уже в 4.5 варианте "Коммуникатора", а также обещания компании Microsoft создать аналогичную возможность и в IE 5.0+, все это может сделать Flash лидером среди графических форматов и существенно изменить само понимание web-дизайна.
Не стоит забывать и о трехмерных объектах, для создания которых в Глобальной паутине появился формат VRML 1.0 в ноябре 1994 года. Virtual Reality Modeling Language можно перевести, как язык моделирования виртуальной реальности. Последняя версия формата VRML 2.0 дает возможность создавать многомерные виртуальные миры со звуковым сопровождением. Чтобы создать файлы данного формата порой достаточно только простого текстового редактора (они, как HTML не требуют дополнительной компиляции), однако есть и специальные программы, которые помогают автоматизировать и визуализировать данный процесс. Помимо этого, есть 3D-пакеты, поддерживающие формат VRML 2.0. Чтобы просматривать виртуальные миры нужны дополнительные модули, которые включены в состав последних вариантов браузеров NC и IE. Но несмотря на всю привлекательность 3D-изображения пока нашли мало применения. Главными их недостатками можно назвать невозможность встроить подобные миры в формат HTML веб-страницы, а значит, «переплетать» с общим дизайном веб-ресурса, в отличие, к примеру, от того же Flash. Еще одним минусом является необходимость весьма значительного числа вычислительных ресурсов компьютера, чтобы качественно визуализировать трехмерную сцену.
При описании графики в Web, зачастую не говорят о шрифтах, в виде графических объектов. Это связано с тем, что до сегодняшнего дня в HTML-страницах была довольно ограниченная возможность управлять параметрами шрифтов. Однако уже в спецификации CSS level2 можно найти понятие встраивания шрифтов, которое дает возможность применять не только стандартные шрифты. Новые программы дают возможность создавать символьные шрифты, обретая вместо букв масштабируемые монохромные картинки. Однако и это явление не обошлось без "войны браузеров". Различная реализация "подгружаемых" шрифтов в таких браузерах, как NC и IE, увы, не дает возможности пользоваться этим форматом в полной мере.
Безусловно, в рамках статьи невозможно охватить весь океан, именуемый "web-графикой". Однако, чтобы построить дом, необходимое кое-что знать и о кирпичах. Нам думается, что этот кирпич не будет лишним при создании вашего веб-сайта.
Читайте так же:
Оставить комментарий:
- Обязательны для заполнения*