Работа с графическими изображениями
Графические изображения (а также аудио - и видеоклипы), как вы помните, являются внедренными элементами, т. к. они не помещаются в сам НТМЬ - код Web-cтpaницы, а хранятся в отдельных файлах. Дело в том, что графика принципиально отличается от текста, кодируется и хранится иначе, чем текст. Поэтому совместить в одном файле НТМЬ-текст и графику невозможно.
Примечание
Здесь нужно сделать оговорку. Существует язык VRML (Virtual Reality Markup Language— язык разметки виртуальной реальности), с помощью которого создаются целые виртуальные миры, которые можно исследовать. Эти миры записываются в виде текстовых тегов, аналогичных тегам HTML, встраиваемым прямо в HTML-код. Также фирмой Microsoft разработан язык VML (Vector Markup Language — язык разметки векторов), служащий для создания графических изображений, тоже в виде текстовых тегов. Но этот язык распространен очень слабо и поддерживается пока только Internet Explorer, начиная с версии 5.0.
Два вида графических изображений
Все графические изображения делятся на две большие группы по принципу кодирования, хранения в файлах и отрисовки на устройствах вывода (экран, принтер и т. п.). Давайте их рассмотрим.
Растровые изображения представляют собой набор точек; каждая такая точка может иметь какой-либо цвет, от белого до черного. Цвета всех точек, составляющих подобное изображение, записываются в массив, который, в свою очередь, вместе с некоторой служебной информацией сохраняется в файле. Такой массив называется растром.
К растровым относятся хорошо вам известные изображения форматов GIF (Graphie Interchange Format — формат обмена графикой) и JPEG (Joint Pictures Encoding Group — группа кодирования неподвижных изображений), которые вы загружаете из Интернета, чтобы полюбоваться творениями Бориса Вальехо. К растровым относится также стандартный формат хранения изображений в Windows — BMP (BitMaP — битовая матрица). Еще стоит упомянуть весьма напористого новичка — формат PNG (Portable Network Graphics — перемещаемая сетевая графика). Этот пока еще малораспространенный формат может стать преемником формата GIF, если недавние попытки сделать последний платным все-таки увенчаются успехом.
На самом деле, растровых форматов огромное множество, но подавляющее большинство из них — либо "фирменные", поддерживаемые одной программой, либо малораспространенные в силу каких-то причин, либо просто не используемые в Интернете.
Достоинствами растровых изображений являются исключительно простая обработка и вывод на устройство отображения. Действительно, что может быть проще, чем считать массив значений цветов точек и эти самые точки показать пользователю. Недостатки: большой размер (особенно, качественных изображений с большим количеством цветов) и резкая потеря качества при масштабировании.
Хотя большой размер — не такой уж и непреодолимый недостаток. Форматы GIF, JPEG и PNG стандартно поддерживают сжатие массива данных с помощью специальных алгоритмов. Однако тут кроется другая опасность. Дело в том, что эти алгоритмы реализуют так называемое сжатие с потерями, при которых часть информации, не очень существенная для отображения, отбрасывается, в результате чего объем массива сильно уменьшается. ("Обычные" программы архиваторов, которыми вы пользуетесь, например Zip или Rar, реализуют сжатие без потерь.) При этом, если задать слишком сильное сжатие такого изображения, может пострадать его качество из-за того, что слишком большая часть информации будет отброшена. Впрочем, это уже проблема Web-художника, который будет готовить подобное изображение к публикации в Интернете.
Какие форматы растровых изображений используются в Web-дизайне? В основном, GIF и JPEG. Угадайте, почему? Конечно, потому, что они поддерживают сжатие. Причем, изображения GIF применяют для элементов оформления страниц (линии, маркеры списков и т. п.) и штриховых рисунков, a JPEG — для полутоновых рисунков с большим количеством цветов. Это вызвано тем, что для сжатия изображений этих форматов применяются разные алгоритмы, имеющие свои сильные стороны и свои недостатки.
Формат GIF имеет особое свойство, за что его любят Web-художники. Дело в том, что из-за особенностей этого формата в один GIF-файл можно записать последовательность графических изображений, фактически настоящий фильм. Многочисленные "живые" (даже слишком) рекламные картинки — баннеры — которые в последнее время просто залепили Web-страницы, сделаны в формате "анимированный GIF". Иногда такими картинками злоупотребляют, и ничего хорошего из этого не получается.
Другое достоинство формата GIF — возможность задать "прозрачный" цвет. Впоследствии Web-обозреватель вместо точек, имеющих этот цвет, будет подставлять точки "фона" родительского элемента. Говоря просто, можно сделать рисунок с "дырками", сквозь которые "просвечивает" то, что находится под рисунком.
Формат PNG, как говорят его создатели, объединяет возможности GIF и JPEG, не "прихватывая" заодно с собой их недостатки. Но пока он что-то не очень популярен в Сети. Однако если GIF все-таки сделают платным...
Internet Explorer также поддерживает формат BMP. Непонятно, зачем это нужно, ведь другие Web-обозреватели его не поддерживают.
Осталось только привести расширения, под которыми сохраняются файлы того или иного формата. Файлы GIF, PNG и BMP имеют "говорящие" расширения gif, png и bmp, а файлы JPEG — jpeg, jpg или jpe.
Вторая разновидность графических изображений — векторные. В отличие от растровых, состоящих из точек, они состоят из линий, называемых примитивами. Каждый такой примитив описывается определенной формулой, имеющей конкретный набор параметров. Вот эти параметры и сохраняются в массиве данных. К векторным относится формат изображений, созданных в популярнейшей программе Macromedia Flash, а также второй стандартный формат хранения изображений в Windows — WMF (Windows MetaFile — ме-
Тафайл Windows). Вообще, существует много форматов векторных изображений, здесь перечисляться они не будут.
Что предлагают нам векторные изображения? Во-первых, небольшой объем, т. к. параметры какой-нибудь загогулины занимают значительно меньше места, чем весь набор составляющих ее точек. Во-вторых, исключительно простое масштабирование: Web-обозревателю достаточно перевычислить формулы с новыми параметрами размеров и нарисовать новую картинку на основе результатов этих вычислений. Недостаток: очень сложные алгоритмы вывода, включающие вычисление сложных формул. К тому же, чем векторное изображение сложнее, тем оно больше и тем дольше выводится на экран.
В Web-дизайне широко используется только один формат векторной графики — Flash. Но назвать это чудо программистского искусства графической программой не поворачивается язык — это мощнейший мультимедийный комплект, позволяющий создавать целые фильмы со звуковым сопровождением, причем, фильмы интерактивные, реагирующие на действия пользователя. При этом файлы, имеющие расширение swf, отличаются небольшими размерами и быстро грузятся даже по относительно слабым каналам. Все Web-обозреватели имеют в своем составе дополнительные модули, позволяющие просматривать фильмы Flash, а те, кто их не имеет, могут без проблем загрузить с сайта Macromedia.
( Примечание )
Формат VML, о котором говорилось выше, также растровый.
