Оптимизация изображений для Web: тонкости жанра

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

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

 Позиционная оптимизация

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

На заметку: В Illustrator альфа-каналы не поддерживаются, поэтому в этом приложении такая оптимизация невозможна.

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

Выбор канала для позиционной оптимизации

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

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

Для форматов GIF и PNG-8 с помощью альфа-канала можно управлять степенью смешения — белые области соответствуют наибольшему смешению, а черные наименьшему — а также сокращением цветовой гаммы.

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

Изменение палитры

При сохранении изображения в формате с индексированием цветов — GIF или PNG-8 — бывает желательно изменить цветовую палитру, автоматически составленную приложением. Для этого в ImageReady используется палитра Color Table (Цветовая таблица), а в других приложениях — соответствующая стыкуемая панель, расположенная в нижнем правом углу диалогового окна Save for Web (Сохранить для Web). Здесь можно добавлять новые и удалять старые цвета, а также изменять значения, на которые ссылаются индексы палитры.

Наиболее частая операция — добавление в палитру цвета, не созданного автоматически. Иногда цвет, имеющий большое визуальное значение, занимает в изображении очень маленькую площадь, и алгоритмы сокращения цветов его пропускают. Для того чтобы вручную добавить этот цвет в палитру, достаточно выделить его — проще всего прямо на изображении, с помощью пипетки — и щелкнуть на кнопке New (Создать), расположенной под таблицей цветовых образцов. Если палитра составлялась динамически, то есть с использованием перцепционного, избирательного или адаптивного метода, новый цвет заменит ближайший к нему из уже существующих в палитре цветов. Для того чтобы добавить цвет, расширив за счет него палитру (при условии, что количество ее элементов меньше предельного — 256), нужно, щелкая на кнопке New (Создать), удерживать нажатой клавишу Ctrl. Палитра преобразуется в нестандартную, без замены цветов. При переполнении палитры из нее можно удалить лишние цвета. Для этого нужно выбрать цвет, щелкнув на его образце в цветовой таблице или воспользовавшись пипеткой, а затем щелкнуть на пиктограмме в виде мусорной корзины, расположенной под образцами. Цвета можно также редактировать. Если дважды щелкнуть на образце в цветовой таблице, открывается окно цветоподборщика, где можно выбрать новое значение цвета. В результате прежний цвет палитры заменяется выбранным. Это значит, что изменится цвет каждого пикселя, значение которого указывает на эту ячейку палитры, — довольно сильнодействующая операция.

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

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

Сохранение оптимизированных файлов

Последний этап оптимизации — сохранение файла на диске. Детали и возможные варианты этой операции зависят от конкретного приложения. Проще всего в этом смысле Illustrator. Здесь достаточно щелкнуть на кнопке OK в окне Save for Web (Сохранить для Web); откроется стандартное окно сохранения файла, единственным нестандартным элементом которого является переключатель Save HTML File (Сохранить HTML-файл). Если его активировать, Illustrator одновременно с оптимизированным изображением запишет файл с HTML-кодом, необходимым для размещения изображения на веб-странице. Если для изображения была создана карта с активными зонами, в этот HTML-файл будет включен код, необходимый для работы этой карты. Иначе это будет необходимый минимум кода для размещения изображения на странице. Этот файл можно отредактировать, добавив в него другое содержимое, HTML-форматирование или разметку CSS.

Параметры выходных файлов

В Photoshop и ImageReady больше возможностей управления выходными файлами. Если щелкнуть на кнопке OK в диалоговом окне Save for Web (Сохранить для Web) Photoshop или выбрать в ImageReady команду File — Save Optimized As… (Файл — Сохранить оптимизированный файл как...), откроется расширенное окно сохранения файла. Под обычным текстовым полем, предназначенным для ввода имени файла, в этом окне расположен раскрывающийся список Save As Type (Тип файла). В этом списке есть следующие варианты: Images Only (Только изображения), HTML and Images (Изображения и HTML) и HTML Only (Только HTML). Для простых изображений, не разделенных на фрагменты, в HTML-файле записывается, в сущности, то же, что и в Illustrator — код, необходимый для размещения изображения на веб-странице.

Если изображение фрагментировано, из раскрывающегося списка, расположенного внизу диалогового окна, можно выбрать сохраняемые фрагменты — все или только некоторые. Тогда в HTML-файл будет записан код, необходимый для составления из фрагментов единого изображения (см. главу 4); каждый фрагмент сохраняется в отдельном файле — отсюда множественное число в названии режима HTML and Images (Изображения и HTML) — в отдельной папке, специально создаваемой для этой цели. Соглашениями, принятыми при именовании этих файлов, можно управлять, но предлагаемые по умолчанию тоже вполне годятся: поскольку HTML-код составляется автоматически, вам их знать вообще не обязательно.

Между этими раскрывающимися списками находится кнопка Output Settings… (Выходные параметры...), по которой открывается диалоговое окно, предназначенное для управления различными свойствами файлов с HTML-кодом и изображением, создаваемых при сохранении оптимизированного изображения. Когда это окно открывается в первый раз, в нем отражаются параметры HTML-кода. Если вы знаете HTML, их назначение будет вам понятно; если же нет, — можете спокойно закрыть окно, приняв те значения, что предлагаются по умолчанию. Вероятно, самый главный параметр — выбор между размещением фрагментов с помощью CSS или в виде таблицы. Конечно, CSS-код одобрен Консорциумом WWW, да и с практической точки зрения обладает немалыми удобствами. Но, к сожалению, большинство разработчиков браузеров внесло в реализацию CSS такую неразбериху, что будет надежнее придерживаться табличного дизайна. Если же вы хотите, чтобы ваши веб-страницы соответствовали основным стандартам, необходимо включить режим набора дескрипторов и атрибутов маленькими буквами, а все значения атрибутов заключать в кавычки. Тогда HTML-код будет удовлетворять требованиям XHTML.