Форматы графических файлов. Начиная работу над новой веб-страницей, помимо прочего вам придется решить

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

Прежде всего следует определиться с тем, что подразумевается в данном случае под словом «графика». Часто под этим термином подразумевают любые изображения, то есть не текст (хотя текст может быть частью графического элемента). Есть два способа представления данных об изображении — растровый (растровая или точечная графика) и векторный (векторная графика).

Растровые изображения характерны тем, что каждая их точка (пиксел) описывается отдельно. Это предоставляет богатые возможности для редактирования, так как все пикселы можно обрабатывать независимо друг от друга. Однако при таком представлении затруднено изменение размеров изображения. Дело в том, что графический редактор располагает только теми данными, которые представлены в файле изображения. При уменьшении изображения объем данных должен уменьшиться и программа решает сравнительно простую задачу — «что лишнее?». Если же изображение надо увеличить, то объем данных должен увеличиться и программе приходится «выдумывать» недостающие сведения. Кроме того, сам файл изображения может иметь большой объем.

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

WWW поддерживает 3 основных формата изображений — GIF, PNG и JPEG.

GIF

Формат файлов GIF (Graphical Interchange Format — Графический формат обмена) был впервые применён фирмой CompuServe (онлайновая информационная служба) для предоставления информации в стандартном графическом формате. Файлы этого формата имеют расширение *.gif.

GIF стал первым форматом файлов, поддерживаемых WWW. Этот формат хорош для изображений с «малым» количеством цветов (не более 256) и достаточно четкими границами линий, как на этом рисунке:

Этот формат позволяет сохранять в одном файле несколько изображений. Браузеры способны демонстрировать все эти изображения по очереди, получая в результате несложную анимацию. В файле анимации хранятся не только кадры анимации, но и параметры её демонстрации. GIF-анимация в силу своей простоты наиболее распространена в WWW. Кроме того, один из цветов в палитре индексированного изображения можно объявлять прозрачным. В браузере сквозь участки этого цвета будет виден фон страницы как в средней картинке:

К сожалению, с 1995 года разработчик GIF компания Compuserve сделала платным любое его использование в программных продуктах. Это приводит к постепенному вытеснению этого популярного формата из Интернета. Можно сказать, что на поверхности его держит только способность содержать анимацию. Она используется для создания рекламных баннеров.

PNG

PNG (Portable Network Graphics, читается «пинг») — формат хранения графической информации, использующий сжатие без потерь. PNG был создан как для улучшения, так и для замены формата GIF графическим форматом, не требующим лицензии для использования. Файлы этого формата имеют расширение *.png.

Формат PNG хранит графическую информацию в сжатом виде. Причём это сжатие производится без потерь, в отличие, например, от JPEG. Кроме замены устаревшего и более простого формата GIF, формат PNG, в некоторой степени, спроектирован также для замены значительно более сложного формата TIFF.

Формат PNG позиционируется прежде всего для использования в сети Интернет и редактирования графики. Он имеет следующие основные преимущества перед GIF:

· практически неограниченное количество цветов в изображении;

· поддержка 256 градаций прозрачности.

Существует два подформата: PNG8 и PNG24, цифры означают максимальную глубину цвета, возможную в подформате. В PNG24 реализована поддержка 256 градаций прозрачности. С помощью этой функции, например, полупрозрачный логотип может выглядеть одинаково на абсолютно любом фоне. PNG8 поддерживает то же количество цветов, что и GIF.

Однако, на данный момент все веб-браузеры одинаково отображают содержимое PNG-файла. Узким местом является именно частичная прозрачность. В Microsoft Internet Explorer эта проблема решена только в седьмой версии браузера. Ещё одним недостатком PNG, является то, что он не поддерживает анимацию.

JPEG

При разработке графического оформления веб-сайта часто приходится пользоваться готовыми изображениями, например, фотографиями. В большинстве случаев такие изображения доступны в формате JPEG/JPG (Joint Photographic Experts Group — Объединенная группа экспертов фотографии). Этот формат позволяет хранить цветные изображение с глубиной до 24 битов (16 777 216 цветов), а также изображения в оттенках серого. Во многих случаях формат JPEG существенно эффективнее GIF, особенно для больших изображений. Файлы в формате JPEG занимают меньше места и, соответственно, быстрее загружаются. Файлы этого формата имеют расширение *.jpg.

Основная особенность формата JPEG — высокая степень сжатия данных, достигаемая методом сжатия с потерями. Этот метод основан на удалении из изображения той части информации, которая слабо воспринимается человеческим глазом. То есть часть данных во время сжатия отбрасывается. Это приводит к снижению качества картинки (теряются мелкие детали, появляются разводы и муар), но позволяет достичь хорошего сжатия изображения. Разумеется, такой подход неприменим к чертежам, схемам и другим видам графики, требующим передачи четких линий и надписей. Но для фотоизображений, особенно имеющих большие размеры, подобные алгоритмы сжатия вполне подходят.

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

TIFF

Как только что было сказано, файлы растровых изображений могут иметь большой объем. В полиграфии и других областях, где нет необходимости постоянного переноса изображений с одного компьютера на другой, это не имеет большого значения. В веб-дизайне все по-другому. Здесь главное — добиться высокой скорости передачи данных, а файлы большого размера этому вовсе не способствуют. Поэтому для графического оформления сайтов используют форматы, использующие сжатие изображений, которое позволяет уменьшить объем передаваемой информации. Это действительно важно при работе в Интернете, но не всегда удобно при подготовке графического оформления сайта. Дело в том, что изображения для веб-страниц в большинстве случаев сжимаются за счет потери некоторой части информации. Это приводит к различного вида искажениям, снижающим общее качество изображения. По этой причине на промежуточных этапах чаще всего используются форматы, не вносящие искажения, например, TIFF или PSD.

Формат TIFF (Tagged Image File Format — формат файлов изображений, снабженных тегами) является одним из наиболее широко распространенных форматов, используемых при подготовке графики. TIFF является популярным форматом для хранения изображений с большой глубиной цвета, используется при сканировании, отправке факсов, распознавании текста, в полиграфии, широко поддерживается графическими приложениями. Файлы этого формата имеют расширение *.tif или *.tiff. Этот формат полностью сохраняет внешний вид картинки без внесения какой-либо компрессии (как JPEG), но не пригоден для Интернета.