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

Таким образом, если, конечно, вы не хотите прослыть ходячим анахронизмом, вам придется использовать графику в своем маленьком (большом) доме в Интернете. Сегодня мы попытаемся обсудить, какие форматы используются для представления графики в Интернете и их основные возможности.

Итак, существуют три формата, в которых может представляться графика в Сети. Это GIF, JPEG и PNG. Последний формат является наиболее новым и поэтому мало распространенным. Большая часть его преимуществ сводится на нет одним огромным недостатком - он не поддерживается старыми версиями браузеров. Поскольку Сеть - формация консервативная, многие пользуются третьими или даже вторыми версиями MS IE и Netscape (а значит графику в формате PNG увидеть не смогут). Что советую делать и вам.

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

Формат GIF придуман фирмой Compuserve. В настоящее время используется версия 89a этого формата, как не трудно догадаться, за 1989 год. Формат предназначен для представления изображений в индексированной палитре без потери качества, при этом используется сжатие по алгоритму LZW. Звучит жутко, но на практике выглядит довольно просто.

Итак, термин "индексированная палитра" обозначает, что изображения в формате GIF могут использовать не более 256 цветов. Таким образом, получаем первое и главное ограничение на использование формата GIF - он не годится для передачи полноцветных изображений. Во всем остальном он превосходит JPEG, но приведенный недостаток - весьма существенный минус. Хотя, как мы сможем увидеть в дальнейшем, это свойство можно обратить себе на пользу.

Словосочетание "без потери качества" обозначает, что после преобразования в формат GIF изображение будет в точности таким же (если сравнивать попиксельно), как и до преобразования. Если вы - новичок в мире графических форматов, вам может показаться, что так бывает всегда, однако это не так, как мы сможем убедиться позже, при обсуждении формата JPEG.

Наконец, "сжатие по алгоритму LZW" означает, что при сохранении графических данных используется один из наиболее эффективных алгоритмов устранения избыточности данных, известных на сегодняшний день. Он сравним по эффективности и скорости с популярным алгоритмом, используемым в семействе архиваторов ZIP.

Кроме перечисленных базовых возможностей, GIF 89a представляет возможность использования таких средств, как маски прозрачности, чересстрочная загрузка и анимация. Маска прозрачности - это просто возможность объявления одного из цветов палитры прозрачным. Это необходимо, например, для того, чтобы представить объект непрямоугольной формы, который затем предполагается разместить на фоне текстурной заливки. Изображение в любом случае будет прямоугольным, однако ту часть его, которая не должна отображаться, следует объявить прозрачной. При наложении такого изображения на любую другую картинку она будет просвечиваться в тех частях рисунка, которые вы объявили прозрачными.

Чересстрочная загрузка - способ сохранения изображения, при котором строки хранятся не подряд, а чередуясь. Изображения, сохраненные таким образом, при загрузке появляются как бы постепенно, сначала сильно размытыми, постепенно увеличивая четкость. Это достигается за счет того, что браузер при загрузке заполняет уже считанными строками всю картинку, дублируя их. Чем больше строк считано, тем меньше количество повторов одной строки, вплоть до ровно одного изображения каждой строки в полностью загруженном рисунке.

В формате GIF можно представлять анимационные ролики. Принцип представления динамических изображений в этом формате проще всего представить себе следующим образом. Картинка хранится как бы в несколько слоев. Самый нижний представляет собой первый кадр изображения, все остальные слои прозрачны в тех местах, где изображение следующего кадра не отличается от предыдущего. В тех же местах, где кадры отличаются, на новом слое находится пиксел нового цвета. Палитра может быть общей или отдельной для каждого слоя. Это дает возможность создавать изображения, анимированные за счет манипуляций с палитрой - мерцающие, переливающиеся и т.п. Для этого создается только один непустой слой, остальные слои делаются прозрачными (при этом они, благодаря упаковке, практически не занимают места). Для каждого слоя задается своя палитра, в которой модифицируются те цвета, которые необходимо анимировать.

Теперь перейдем к обсуждению тех возможностей, которые предоставляет формат JPEG. Аббревиатура JPEG обозначает "Joint Picture Encoding Group", что в переводе на русский звучит как "Объединенная группа по кодированию изображения". Под этим названием скрывается группа специалистов, разработавших данный формат, являющийся почти полной противоположностью GIF. Этот формат предназначен для передачи полноцветных изображений, он использует алгоритм сжатия с потерей качества. Если GIF хорошо подходит для рисунков, то JPEG почти идеален для фотографий. Для сжатия здесь используется схема, похожая в чем-то на MPEG, используемый для сжатия аудио и видео. При ее использовании качество изображения в той или иной степени (в зависимости от степени сжатия) ухудшается.

JPEG позволяет очень хорошо (иногда - в 20 раз) сжимать фотографические или зарендеренные 3D-изображения, которые не могут быть сохранены в GIF из-за большого количества используемых цветов. Однако у этого формата есть свои недостатки: чем выше степень сжатия, тем ниже качество полученного изображения. Хуже всего по схеме JPEG сжимаются изображения, содержащие четкие, без полутонов, переходы между цветами, то есть рисунки. При этом возникает широко известный эффект, называемый по-английски dithering, а по-русски, не слишком точно, - смешение цветов. Посмотрите на рисунок.

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

Как добиться оптимального качества изображения при максимальной компрессии? Прежде всего нужно выбрать, какую схему использовать. Конечно, если вам нужны какие-либо спецэффекты, предоставляемые форматом GIF, нужно использовать его. При этом полноцветные картинки придется предварительно преобразовать в 256 цветов, что не лучшим образом отразится на изображении. Однако если речь идет о простой статичной картинке, нужно хорошо подумать, использовать ли GIF или JPEG. Общее правило таково - если изображение рисованное, содержит малое количество цветов и в нем нет или почти нет полутоновых переходов - используйте GIF. Если же изображение фотографическое или имеющее сходную структуру, полноцветное с массой плавных переходов между светом и тенью (к таким, например, относятся изображения, полученные при использовании программ трехмерного моделирования), используйте схему JPEG. Существует ряд изображений, которые невозможно однозначно отнести к одной из приведенных групп. В таком случае нужно испытать обе схемы для того, чтобы узнать, какая дает лучший результат.

Главным источником уменьшения размера изображения в формате GIF является уменьшение цветности. В несжатом виде 256-цветное изображение при одинаковых габаритах занимает в 4 раза больше места, чем 4-цветное, поскольку на кодирование одного пиксела в нем идет 8 бит против двух у четырехцветного. Конечно, дополнительная LZW-компрессия изменяет это соотношение. Цветность GIF-изображений следует уменьшать до тех пор, пока не станет заметно искажение изображения по сравнению с исходным.

Осторожно следует относиться к использованию anti-aliasing (сглаживание) при подготовке GIF-изображений. Под этим термином понимают использование плавных переходов между тонами для сглаживания изогнутых кривых за счет использования дополнительных цветов. На рисунке крупным планом изображены две окружности: левая - с выключенной опцией сглаживания, правая - с включенной. Видно, каким образом используются для сглаживания дополнительные цвета.

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

При упаковке в JPEG следует придерживатся следующего правила - следует выбирать такую степень компрессии, при которой изображение все еще выглядит приемлемо. Избегайте изображений с четкими переходами между цветами - dithering начнет сказываться даже при небольшом сжатии. В любом случае помните - сжатие изображения для web - не столько наука, сколько искусство.

В заключение коротко - о программном обеспечении для сжатия изображений. Adobe Photoshop позволяет работать с GIF и JPEG встроенными средствами, однако не имеет достаточной гибкости. Например, при сжатии JPEG отсутствует режим preview. Для работы с изображениями GIF- и JPEG- я предпочитаю использовать Ulead Web Razor. Этот пакет содержит прекрасные средства для упаковки изображений, позволяющие управлять всеми аспектами сжатия. Они оформлены таким образом, что могут работать и как отдельные программы, и как plug-ins (модули расширения) для Adobe Photoshop. Кроме того, в пакет входит ряд других полезных программ для работы с графикой.

Денис МАРГОЛИН,
[email protected]