Графика
Графические объекты компактно передают большой объем информации и оживляют Web-страницу.
По принципу формирования изображений графика делится на растровую (точечную) и векторную. Заметим, что, независимо от природы возникновения изображения, на экране дисплея мы наблюдаем растровую картину, состоящую из множества почти незаметных точек.
Достоинством растровой графики является её реалистичность, документальность. Недостаток точечных изображений - большие размеры растровых файлов. Для устранения этого недостатка современные графические форматы предполагают использование различных способов сжатия. В растровой графике каждая точка (пиксель) несет информацию о цвете, яркости, местоположении. При масштабировании изображения часть точек приходится исключать (или наоборот добавлять). В результате происходят существенные геометрические искажения изображаемого объекта. Это еще один существенный недостаток растровых картинок.
Образно растровую графику можно сравнить с вышиванием "крестиком". Изображение вышивки состоит из разноцветных объектов одинакового размера (крестиков), расположенных в строго определенных местах (в клетках, в матрице). При наблюдении растра с большого расстояния глаз перестает видеть отдельные точки, и возникает иллюзия непрерывного многоцветного изображения.
Неплохой метафорой для растровой графики может стать мозаика (панно). Однако для большего соответствия описываемой графики выбранному образу витражи должны состоять из разноцветных стёкол прямоугольной формы одинакового размера.
Растровый формат изображений легко интуитивно понимается людьми благодаря использованию в быту цифровой техники: фотоаппаратов, сотовых телефонов со встроенными фотоаппаратами, видеокамер. Одной из важнейших характеристик этих устройств является размер светочувствительных матриц, с помощью которых формируются изображения. Матрица определяет число точек, из которых будет состоять изображение, а, значит, она определяет и качество изображения
В векторной графике элементами изображений становятся не точки, а линии и фигуры, которые описываются несложными полиномами (кривые Безье). Изображение представляет собой математическую модель, которая описывает протяженность линий, их кривизну, цвет, местоположение.
Достоинством векторных изображений является их компактность. Векторная картинка масштабируется без искажений (если не учитывать искажения, возникающие в момент вывода изображения на экран монитора в точечной форме). Однако, векторные изображения схематичны, упрощенны, лишены деталей. Для векторной графики трудно подобрать метафору. Лучше всего представлять себе векторное изображение, как математическую модель этого изображения. Математическая модель содержит набор формул, каждая из которых описывает отдельный элемент векторного изображения. С большой натяжкой можно сравнить векторное изображение с вышивкой "гладью". В этом случае изображение состоит не из отдельных точек (крестиков), а из параллельных линий. При этом длина линий и их цвет могут быть разными. Скорость вышивания "гладью" выше по сравнению с вышиванием "крестиком", однако реалистичность изображения уменьшается. Как правило, векторные файлы также загружаются быстрее растровых файлов. В этом сравнении имеются неточности. В векторном изображении линии не обязательно должны быть параллельными. При формировании векторного изображения используются не только прямые линии, но и параболы. В Web-дизайне используются растровый и векторный виды графики. Растровые изображения должны быть представлены в формате GIF, JPEG или PNG. В форматах GIF и PNG применяется сжатие изображения без потерь информации. В JPEG используется сжатие с потерями. При этом сжатое изображение будет отличаться от исходного изображения в худшую сторону, причем возврат к начальному состоянию оригинала после сжатия будет уже невозможен. Формат JPEG (Joint Photography Experts Group - Объединенная группа экспертов по машинной обработке изображений) используется для отображения многоцветных фотографий (более 16 миллионов цветовых оттенков). Ниже приведен пример изображения в формате JPEG. Самара. Филармония. Основная идея сжатия изображения методом JPEG состоит в следующем. Осуществляют трансформацию изображения из пространственной области в частотную область. Для этого используют преобразование Фурье. Сжатие изображения осуществляют в частотной области, путем использования спектрального анализа. При этом из спектра частот сжимаемого изображения удаляют высокочастотные составляющие. Тем самым убирают мелкие детали изображений. Степень сжатия изображения определяется числом гармоник, используемых для описания картины. Возврат в пространственную область осуществляют с помощью обратного преобразования Фурье. Описанные приемы сжатия изображения широко используются в радиотехнике для подавления шумов и сжатия звуковых файлов. Вторая идея, которая использовалась при создании алгоритма сжатия JPEG, состоит в учете физиологических особенностей зрения человека. Человек хорошо видит изменение яркости и значительно хуже видит вариацию цветовых составляющих (число палочек в глазе намного превосходит число колбочек). Это позволяет в ряде случаев уменьшить объем передаваемой информации, характеризующей цвета отдельных областей изображения. При выборе степени сжатия в формате JPEG дизайнер экспериментально ищет компромисс между размером сжатого файла и качеством получившегося изображения. Цветовая палитра формата GIF (формат разработан компанией CompuServ) значительно скуднее (256 цветовых оттенков). Зато файлы формата GIF позволяют создавать анимацию (картинки, сменяющиеся с большой частотой). Характерной особенностью формата GIF является возможность создания "прозрачных" изображений. Рисунок, сохраненный в формате GIF, может содержать прозрачные области, сквозь которые "просвечивает" фон, расположенный под рисунком. Еще одна любопытная возможность формата GIF - чересстрочная загрузка. В таком режиме четкость загружаемого из Сети изображения улучшается постепенно. Пользователи могут не терять время на ожидание полной загрузки рисунка, который их не интересует. Идея сжатия изображения в формате GIF похожа на идею архивации методом LZW: происходит учет числа рядом расположенных одноцветных пикселей. По этой причине формат GIF эффективен для сжатия однотонных, схематичных изображений (схемы, диаграммы, баннеры). Например: Информатика 2007 Формат графических изображений PNG (Portable Network Graphics -переносимая сетевая графика), вероятно, в будущем придет на смену форматам JPEG и GIF, так как он вобрал в себя многие их лучшие свойства. Глубина цвета в этом формате составляет 48 бит. Для сравнения отметим, что глубина цвета формата GIF - 8 бит, a JPEG - 24 бита. Прозрачность каждого пикселя в формате PNG может иметь 256 градаций (в формате GIF лишь две градации: пиксель или прозрачен или непрозрачен). Прозрачность изображения определяется с помощью альфа-канала. На следующем рисунке приведен пример изображения в формате PNG. Самара. Управление железной дороги Векторная графика в Web-дизайне представлена форматом Macromedia Flash. Файлы имеют расширение SWF. Для отображения роликов в формате Flash на ЭВМ клиента должен быть заранее установлен соответствующий проигрыватель. Заметим, что после установки дополнительных приложений (plug-in) можно отображать и другие графические форматы. Краткие итоги Для отображения растровых изображений в Web-дизайне используют форматы: JPEG, GIF и PNG. Форматы JPEG и PNG целесообразно использовать для отображения многоцветных (фотографических) изображений. Формат GIF уместно использовать для отображения схематичных и анимированных изображений. Для отображения векторной Flash-графики нужно установить специальный проигрыватель. Не все пользователи имеют желание и возможности устанавливать дополнительные программы. По этой причине дизайнерам нужно взвесить все достоинства и недостатки, прежде чем использовать векторную графику на своих страницах. Формат PNG имеет объективные преимущества над форматами JPEG и GIF.