Экспортирование изображения в форматы для Web-страниц

В настоящее время практически любая более или менее профессиональная программа графики и верстки позволяет генерировать документ в HTML- кодах или, в крайнем случае, экспортировать минимизированные по объему изобразительные файлы. Программа Adobe Photoshop также не исключение, и данная версия предлагает команду Save for Web (Сохранить для Web) меню File (Файл).

При экспортировании графики для Web-страниц следует иметь в виду:

• с самого начала работы над документом желательно применять цветовую модель RGB;

• для того чтобы в своей работе использовать только Web-безопасную палитру (Web-safe colors), необходимо в палитре Color (Синтез) выбрать режим Web Color Sliders (Полосы Web-независимой палитры) или в диалоговом окне Color Picker (Цветовая палитра) установить флажок Only Web Colors (Только Web-цвета);

• полный перечень Web-безопасных цветов можно также загрузить в палитру Swatch (Каталог).

Команда Save For Web

Для того чтобы получить оптимизированные изображения для Web-страницы в форматах Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG) и Portable Network Graphics (PNG-8 или PNG-24), следует использовать команду Save for Web (Сохранить для Web) меню File (Файл). В результате открывается диалоговое окно Save For Web (Сохранить для Web) (рис. 1.20.3), в котором можно не только определить параметры трех форматов, но и получить массу полезной информации, а также воочию увидеть изменение в изображении и сравнить его с исходным.

В верхней части диалогового окна, над полем просмотра, находятся ярлычки вкладок, которые позволяют изменить вид поля просмотра:

• Original (Исходное изображение) - показывает изображение, которое отображается без всякого влияния параметров экспортирования;

• Optimized (Экспортируемое изображение) — демонстрирует изображение с учетом текущих параметров экспортирования;

Рис. 1.20.3. Диалоговое окно Save For Web в режиме 4-Up

• 2-Up (Двойной блок) — показывает два варианта изображения, форматы которых выбираются пользователем;

• 4-Up (Четверной блок) -- представляет четыре варианта изображения, форматы которых выбираются пользователем.

Выбор формата для оптимизированного изображения

В настоящее время в технологии Web-дизайна используется всего три формата пиксельной графики — GIF, JPEG и PNG. Выбор формата определяется с учетом многих факторов, хотя в основном считается, что для полноцветных и фотореалистических изображений используется формат JPEG, для текстовых и простых изображений (логотипов и символов) — формат GIF, а на смену тому и другому приходит формат PNG, который объединяет достоинства обоих форматов. Правда, последний формат следует использовать с осторожностью, поскольку браузеры прошлых версий не могут его "читать", хотя у него в качестве достоинства можно отметить способность сохранять градиентную прозрачность.

Для выбора формата в диалоговом окне Save For Web (Сохранить для Web) представлен раскрывающийся список (верхний левый) в группе Settings (Установки). В нем — четыре формата: GIF, JPEG и PNG в двух вариантах — PNG-8 и PNG-24, а также WBMP. При выборе формата изменяется набор параметров в этой группе.

Форматы GIF и PNG-8

Формат GIF (Graphics Interchange Format) позволяет сохранять изображения с использованием палитры индексированных цветов (не более 256 оттенков цвета) или серой шкалы (не более 256 оттенков серого). Как правило, этот формат применяется для работы со шрифтовыми фрагментами, кнопками, логотипами и прочими изображениями, имеющими ограниченное количество цветов и резкие ясные контрасты. В формате предусмотрено сжатие без потерь.

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

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

У форматов GIF и PNG-8 в списке Color reduction algorithm (Алгоритм сокращения цветов) можно выбрать параметр цветовой таблицы, или алгоритм цветовой редукции, т. е. способ, используя который программа уменьшает количество цветов у 24-битового изображения до 8-битового:

• Perceptual (Перцепционный) — создает цветовую таблицу с учетом чувствительности и восприятия человеческого глаза;

• Selective (Селективный) — создает цветовую таблицу, в целом идентичную перцепционной, но с предпочтением цветов Web-безопасной палитры;

• Adaptive (Адаптивный) — создает цветовую таблицу из цветов, наиболее часто встречающихся в исходном изображении;

• Web (Web-безопасный) — использует стандартную таблицу из 216 цветов, включающую цвета, общие как для операционной системы Windows, так и операционной системы Mac OS. Выбор данного варианта исключает необходимость имитации (dither) отсутствующих цветов;

• Custom (Пользовательский) — сохраняет текущую цветовую таблицу в виде фиксированной, такая цветовая таблица не обновляется при работе с другим изображением.

Формат JPEG

Формат JPEG (Joint Photographic Experts Group) вполне пригоден для сохранения полноцветных изображений (он поддерживает 24-битный цвет), особенно если они предназначаются только для отображения на экране монитора. Такие изображения широко используются в сети Internet.

В некоторых случаях, например для передачи градиентных растяжек, этот формат экономнее формата GIF.

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

В раскрывающемся списке Compression Quality (Степень сжатия) представлены варианты:

• Low (Низкая);

• Medium (Средняя);

• High (Высокая);

• Maximum (Максимальная).

В соответствии с этим выбором в раскрывающемся списке Quality (Качество) отображается условное число в диапазоне от 0 (самое низкое качество) до 100 (максимально возможное качество).

В списке Blur (Размытие) можно определить уровень размытия, действие этой функции напоминает действие фильтра Gaussian Blur (Размытие по Гауссу), что позволяет смягчить некоторые излишне резкие элементы.

Установка флажка ICC Profile (Профиль ICC) позволяет сохранить в файле данные системы управления цветом, которые могут использовать некоторые браузеры.

Флажок Optimized (Оптимизированный) обеспечивает оптимизацию цветопередачи и уменьшенный размер файла, хотя не все устаревшие браузеры поддерживают эту функцию.

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