Форматы графических файлов

Графических форматов существует множество. Каждая уважающая себя компания - разработчик пакета по обработке графики - считает своим долгом создать собственный формат. Многие из этих форматов оказались настолько удобными, что превратились в стандарты, негласно принятые в тех или иных областях, где применяется графика.

Здесь идет речь о форматах растровой графики. При этом изображение рассматривается как прямоугольная матрица, состоящая из точек разного цвета - что-то наподобие узора для вышивания крестиком.

Есть и другой способ сохранения изображений - векторный. При этом изображение рассматривается как набор геометрических фигур, обладающих определенными свойствами, - координатами, формой контура, цветом контура и внутренней области и т.п.

У каждого из этих способов хранения изображения - векторного и растрового - есть свои преимущества и недостатки. Так, растровые форматы обеспечивают более естественное, - а значит, и более компактное - сохранение таких изображений, где сложно выделить определенные геометрические объекты, где все решает переход цвета. Это относится, например к фотографиям. Векторные форматы, наоборот, более эффективны при сохранении рисунков и чертежей, т.е. таких изображений, которые сформированы набором линий, цветовых областей с четко очерченными краями и других объектов, которые можно легко описать математически.

Так сложилось, что в электронной полиграфии прижились главным образом растровые форматы. Все попытки создать универсальный, общепринятый векторный формат для Web пока привели к весьма ограниченным результатам, таким как Flash.

В Internet главным образом используются два растровых графических формата - GIF (Graphic Interchange Format), первоначально разработанный компанией CompuServe, и JPEG, созданный Объединенной группой экспертов по фотографии (Joint Photographic Experts Group). Им соответствуют файлы с расширениями *.gif и *. jpg. У каждого из этих форматов есть своя область применения, в соот­ветствии с его особенностями. Рассмотрим эти особенности подробнее.

Сжатие. В обоих форматах - и в GIF, и в JPEG - используется внутреннее сжатие изображений. Для того чтобы в этом убедиться, достаточно сжать файл любого из этих форматов с помощью программы-архиватора. Размеры архива и исходного файла практически не отличаются. Нетрудно догадаться, что именно поэтому данные форматы были выбраны для представления графики в Internet: зачем нагружать линии связи лишними байтами?

Но алгоритмы сжатия в форматах GIF и JPEG отличаются. Изображения в файлах GIF сжимаются без потерь информации, в то время как в JPEG реализовано сжатие с потерями. В результате файл JPEG может оказаться втрое меньше файла GIF с тем же изображением.

Количество цветов. В формате GIF количество цветов не может превышать 256. При этом, если в рисунке используется меньшее количество цветов, например 2 - черный и белый, - то информация об остальных 254 цветах не сохраняется. В JPEG допускаются полноцветные изображения с 16,7 млн цветов. Но если в рисунке цветов меньше, то он все равно преобразуется в полноцветное изображение, и для каждого пикселя сохраняется информация о наличии/отсутствии каждого цвета. Поэтому, как правило, изображения, состоящие из небольшого количества цве­тов, - рисунки, чертежи - сохраняются в формате GIF, а изображения, где важно сохранить всю палитру цветов, например фотографии, в формате JPEG.

Кроме того, в отличие от палитры JPEG, одному из 256 цветов палитры GIF присвоено значение "прозрачного". Это очень полезное свойство широко используется Web-дизайнерами.

Первое, очевидное его применение - когда нужно разместить на странице непрямоугольное изображение, фон которого отличается от фона страницы. Такое изображение помещается в файл GIF с прозрачным фоном - и задача решена.

Кроме того, прозрачный "цвет" нашел в Web-дизайне еще одно применение: в виде GIF-файла, в котором хранится 1 "прозрачный" пиксель.

Какая польза от такой, с позволения сказать, картинки?

Внешность, - а в данном случае, отсутствие всякой внешности - обманчива. Однопиксельные прозрачные GIF-изображения применяются в Web-дизайне сплошь и рядом - везде, где дизайнер не хочет полагаться на порой ненадежные средства стандарта HTML. Мы еще не раз с ними встретимся, а пока приведем только два примера такого применения.

1. Точный отступ между строчками. Как известно, в HTML существует два варианта отступа: большой (между абзацами) и поменьше (между строчками). Если мы хотим сами регулировать это расстояние, можно воспользоваться прозрачным GIF, "растянув" его в высоту, насколько нужно (рис. 8.16).

2.

Красная строка. Как известно, дескриптор <Р> не предусматривает принятой в отечественной полиграфии "красной строки" в начале абзаца. Однако реализовать соответствующий отступ можно с помощью прозрачного GIF, "растянув" его в ширину на соответствующее количество пикселей (рис. 8.17).

!Анимация.

 В отличие от JPEG, формат GIF позволяет сохранить в одном файле несколько изображений, снабженных управляющими блоками. Это широко используется для создания небольших анимированных картинок.

Анимированные GIF-изображения широко используются в баннерах и прочей Internet-рекламе. Кроме того, на Web-страницах, посвященных развлечениям, много анимированных кнопок, маркеров и других художественных элементов. В Internet есть целые хранилища таких готовых аксессуаров. Однако пользоваться анимацией следует осмотрительно: мелкие мельтешащие объекты отвлекают внимание посетителя от того основного дела, ради которого он пришел на вашу страницу, и довольно часто вызывают раздражение. Лучше пользоваться таким правилом: анимацию, как и любой другой броский элемент, следует использовать только тогда, когда на то есть серьезные причины.

Резюмируем вышесказанное.

Для размещения графических элементов на Web-странице используется следующая технология: изображение сохраняется в отдельном файле, а в HTML-код вставляется ссылающийся на него дескриптор <IMG>. Свойства изображения, размещаемого на странице, определяются параметрами дескриптора <IMG>.

Имя файла, в котором находится изображение, и путь к нему определяются параметром src. Задавая путь, нужно руководствоваться правилами, принятыми для записи URL. Эти правила отличаются от правил записи пути к файлу в ОС Windows. В частности, имена папок и файлов разделяются не обратными, а прямыми косыми, а строчные и прописные буквы различаются. Кроме того, в именах файлов, передаваемых по Internet, не рекомендуется использовать пробелы и кириллицу.

Ширина и высота изображения определяются параметрами width и height, соответственно, и задаются в пикселях. Эти параметры можно использовать как для изменения параметров изображения, так и для того, чтобы определить их заранее. Первый способ применения параметров width и height используется достаточно редко, так как при увеличении маленьких изображений ухудшается их качество, а уменьшение приводит к нерациональной загрузке линий связи. Второй способ применяется достаточно широко, так как позволяет сразу, не дожидаясь окончательной загрузки изображений, разместить элементы Web-страницы в соответствии с замыслом дизайнера.

Часто изображения снабжаются комментирующими надписями, указанными в качестве значения параметра alt. Эти надписи появляются рядом с указателем мыши, наведенным на изображение.

Для определения способа обтекания графики текстом используется параметр align. Этот параметр описывает выравнивание не только по горизонтали - по левому краю (значение left) или по правому краю (значение right), - но и по вертикали относительно той строки, в которой размещено изображение. Значение absbottom соответствует выравниванию по нижним выступающим элементам букв в строке, baseline и bottom - по нижнему краю строки, absmiddle и middle - по середине, texttop - по верхнему краю и top - по верхним выступающим элементам. Для отмены обтекания изображения текстом используется дескриптор <BR> с параметром clear, который принимает значения right (отмена обтекания справа), left (отмена обтекания слева) и all (отмена всех типов обтекания)

Для отделения изображения от текста используются два средства - рамки и отступы. Параметр border определяет толщину рамки в пикселях. Цвет такой рамки всегда черный. Для создания более сложных рамок следует использовать графический редактор. Горизонтальный и вертикальный отступы между изображением и текстом задаются в пикселях с помощью параметров hspace и vspace.

Изображения для Internet обычно хранятся в файлах форматов GIF и JPEG. Выбор этих форматов для Internet определяется компактностью хранения информации: она хранится там в сжатом виде и, следовательно, при ее передаче нагрузка на линии связи меньше, чем при передаче несжатых изображений. В формате JPEG сохраняются полноцветные изображения, в частности качественные фотографии. В формате GIF хранятся изображения с ограниченным количеством цветов, а также анимированные изображения и изображения с прозрачным фоном. Кроме того, в Web-дизайне широко применяется GIF-изображение, представляющее собой 1 пиксель прозрачного "цвета". С его помощью можно, в частности, регулировать расстояние между строками, а также создавать отступы заданной величины.