Лекция 8. Сохранение файлов в форматах GIF и JPEG

• прозрачные области;
• анимация;
• использование не больше 256 цветов палитры RGB;
• использование режимов Grayscale (Оттенки Серого) или Indexed Color (Индексированный Цвет).

• Exact (Точный). Используется по умолчанию, если изображение содержит менее 256 цветов (в том случае, если оно высококонтрастное или черно-белое);
• System (Системный). Представлен в двух вариантах: Windows и Mac OS. Используется при создании фоновых рисунков, обоев или других элементов рабочего стола;
• Web. Используется браузерами, применяется для вывода изображения на 8-битовый монитор. Включает те 216 цветов, значения R, G и В которых нацело делятся на 51, то есть эта 216-цветная таблица LUT является пересечением множеств цветов палитр систем Windows и Macintosh;

• Uniform (Однородный). Создает однородное распределение цветов спектра. Практически не используется;
• Local (Локальный). Используется при работе с фотографическими изображениями, когда необходимо высокое качество цветопередачи. В этом режиме выделяется три вида алгоритмов сокращения количества цветов:
• Perceptual (Перцепционный). Создает заказную таблицу поиска цвета, отдающую приоритет тем оттенкам, которые четко различает человеческий глаз;
• Selective (Избирательный). Создает таблицу поиска цвета, похожую на перцепционную, но основанную на ключевых цветах изображения. Предпочтение отдается web-цветам;
• Adaptive (Адаптивный). Создает заказную таблицу из тех цветов спектра, которых больше в изображении. Игнорирует все палитры системы и web-палитру;

• Master (Главный). Становится доступным при двух и более одновременно открытых файлах. Применяется для создания таблицы поиска цвета, в которой содержатся цвета всех открытых изображений. Используется для пакетной обработки изображений, которые впоследствии могут быть записаны на компакт-диск или другой носитель информации. Работает по тем же алгоритмам сокращения количества цветов, что и режим Local (Локальный);
• Custom (Заказной). Позволяет пользователю создать самому таблицу поиска или загрузить ее с диска. Используется при создании изображений для мультимедийных приложений, в web-графике почти не применяется. При выборе этого режима появляется диалоговое окно Color Table (Таблица поиска цвета), где можно выбрать следующие варианты:
• Custom (Заказная) — предоставляет возможность самостоятельного создания таблицы;
• Black Body (Темный фон) — уничтожает цвета сине-зеленой части спектра, оставляя черный, красный, оранжевый, желтый и белый.
• Grayscale (Оттенки Серого) — изображение становится полутоновым;
• Spectrum (Спектральная) — оставляет только цвета спектра;
• System (Системная) — системная таблица Windows или Mac OS;
• Previous (Предыдущий). Этот режим использует последнюю таблицу поиска, созданную командой Indexed Color... После использования режима Master (Главный) становится режимом по умолчанию. Подходит при необходимости создания нескольких изображений, выдержанных в едином стиле.

• None (Отсутствует) — предустановленные цвета в таблицу не вводятся. Для цветов, сформированных на основе изображения, в палитре остается больше позиций;
• Black and White (Черный и белый) — в палитре в любом случае будут присутствовать черный и белый цвета;
• Primaries (Основные) — в палитру вводятся восемь основных цветов: черный, белый, красный, зеленый, синий, голубой, темно-красный и желтый;
• Web — палитра будет содержать 216 цветов web-палитры (безопасной палитры).

• None (Отсутствует) — не контролирует корректную цветопередачу, подходит для «простых» изображений, не содержащих теней и плавных тональных переходов;
• Diffusion (Диффузия) — распределяет цвета по специальному алгоритму, не создающему узора и размывает переходы между различными цветами;
• Pattern (Узор) — сглаживает цвета с помощью геометрического узора (этот узор может довольно четко проступить на результирующем рисунке);
• Noise (Шум) — хаотически смешивает пикселы по всему изображению, не создавая узора.

а	б
в	г

Рис. 8.2. Вид изображения с применением различных режимов: при отсутствии сглаживания (а); режим Diffusion (б); режим Pattern (а); режим Noise (г)

Флажок Preserve Exact Colors (Сохранить точные цвета) доступен в случае исполь зования режима сглаживания Diffusion (Диффузия) и сохраняет области одина нового цвета неразмытыми.

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

Сохранение в формате JPEG

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

Рассмотрим параметры, указанные в диалоговом окне, и их влияние на изображение.

• Matte (Кайма). Уместнее было бы название «имитация прозрачности». Пара метр становится доступным для изменения, если изображение содержит про зрачные области. В отличие от GIF, формат JPEG не поддерживает прозрачности и мы должны указать Adobe PhotoShop, каким цветом эти области залить. Соответствующий цвет можно выбрать из раскрывающегося списка.

Рис. 8.3. Вид диалогового окна при сохранении изображения в формате JPEG

• Image Options (Настройки изображения). Изменяемым параметром является Quality (Качество). Он служит для задания степени сжатия изображения. Чем ниже значение параметра, тем выше сжатие (меньше размер файла). Качество изображения может значительно ухудшиться при увеличении степени сжатия.

СОВЕТ. В большинстве случаев оптимальной является степень сжатия около 7. Однако в каж-дом случае ее стоит подбирать индивидуально. Этому способствует то, что во время выбора параметров формата JPEG в окне изображения отображается, как сжатие скажется на рисунке. При помощи мыши вы можете «прокручивать» изображение в окне. Щелкая мышью при нажатой клавише Сtrl, можно увеличить изображение, а при нажатой клавише Alt — уменьшить.

• Format Options (Настройки формата). Большинство web-браузеров поддерживает два варианта формата JPEG: базовый и прогрессивный (расширенный). Базовый, или последовательно отображаемый формат, создает изображения путем построчного вывода на экран, а прогрессивный выводит изображения на экран за несколько проходов. Формат Baseline Optimized (Оптимизированный базовый) отличается от Baseline («Standard») (Базовый стандартный) тем, что за счет использования улучшенного способа кодирования Хаффмана позволяет уменьшить размер файла на 5-10%. При выборе формата Progressive (Расширенный) изображение будет выводиться на экран не построчно, а за несколько проходов. На каждом из проходов выводится полное изображение, качество которого от прохода к проходу улучшается. Параметр Scans (Сканирование) задает число проходов. Чем выше значение этого параметра, тем более плавно улучшается качество изображения. Кроме того, при большем числе проходов файл занимает немного меньше места.
• Size (Размер) — вы можете оценить размер файла до его записи на диск. Из раскрывающегося списка вы можете выбрать скорость передачи данных. Рядом со списком отображается время, которое потребуется для загрузки изображения на компьютер пользователя. Если вы недовольны скоростью загрузки изображения, придется пожертвовать качеством и уменьшить параметр Quality (Качество).

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

Сохранение с помощью команды Save For Web... (Сохранить для Web...)

Главным достоинством команды Save For Web... (Сохранить для Web...) является возможность предварительного просмотра изображения и автоматическая подготовка HTML-кода, позволяющего установить изображение на web-страницу. Эта команда позволяет сравнить различные группы параметров и выбрать ту, которая обеспечивает оптимальное соотношение качества изображения и размера файла. Например, сравнить различные индексированные палитры цветов, параметры JPEG-сжатия, форматы GIF и JPEG. При этом исходное изображение остается неизменным и можно легко к нему вернуться.

С помощью этой команды за одну операцию можно провести индексацию цветов, добавить прозрачность и сохранить изображение в формате GIF или JPEG, что избавляет от необходимости предварительно использовать команды Indexed Color... (Индексированные цвета...) или Color Table (Таблица цветов).

На рис. 8.4 представлено диалоговое окно команды Save For Web... (Сохранить для Web...).

Начнем по порядку рассматривать состав и назначение вкладок, меню и инструментов.

Большую часть диалогового окна занимает область просмотра. С помощью четырех вкладок можно настроить следующие режимы отображения:

1. Original (Оригинал) — просмотр оригинального изображения без влияния изменений;
2. Optimized (Оптимизированное) — вид оптимизированного изображения без оригинала;
3. 2-Up (2 вида) — оригинал и один из оптимизированных вариантов;
4. 4-Up (4 вида) — оригинал и три варианта оптимизации, естественно, это самый наглядный режим.

Команда Save For Web... (Сохранить для Web...) предоставляет в ваше распоряжение обычный «джентльменский набор» инструментов: Hand (Рука), Slice Select (Выбор фрагмента), Zoom (Лупа) и Eyedropper (Пипетка). Никаких новых свойств они приобрести не успели, а описание их работы представлено в соответствующей главе.

Над правым верхним углом области просмотра находится кнопка меню предварительного просмотра, содержащего три группы команд (рис. 8.5).

Рис. 8.4. Диалоговое окно команды Save For Web...

Первая группа содержит единственную команду Browser Dither (Результат сглаживания), которая связана с флажком Web Snap (Цвета для Web) и позволяет посмотреть, как изображение будет выглядеть на 8-битовом мониторе. Вторая группа управляет компенсацией цвета, то есть дает возможность «увидеть» изображение на различных мониторах в различных системах. Третья группа команд определяет скорость загрузки, с которой будет отображаться изображение, причем выбранное значение относится ко всем вариантам оптимизации.

Под областью просмотра находятся сведения о масштабе, используемом браузере и текущем цвете.

Рис. 8.5. Меню выбора режима предварительного просмотра

Следующее меню, которое мы рассмотрим, это меню параметров. Кнопка меню параметров находится в верхнем правом углу вкладки Settings (Настройки). Внешний вид этого меню представлен на рис. 8.6.

Рис. 8.6. Вид и расположение меню параметров

В этом меню собраны команды работы с настройками, команда Repopulate Views (Перемещение видов) и Optimize To File Size... (Оптимизировать размер файла...). Последнюю команду мы рассмотрим подробнее ввиду ее исключительной полезности (рис. 8.7.). Для web-графики, в которой идет жесткая борьба за каждый килобайт, возможность автоматически «отвоевать» уменьшение размера файла лишней не является. Для работы этой команды требуется:

Рис. 8.7. Диалоговое окно команды Optimize To File Size...

• задать желаемый размер файла, не забывая, конечно, что от него зависит качество;
• выбрать, будет ли работа происходить с текущими настройками (в этом случае автоматически изменяться будут параметры выбранного вами формата), или предоставить PhotoShop определить нужный формат;
• указать параметры использования фрагментов изображения, определенных при помощи инструмента Slice (Нож).

Далее перейдем к вкладке Settings (Настройки). Она предусматривает два способа оптимизации: автоматическую и ручную (рис. 8.8.).

Оптимизация запускается автоматически при выборе из ниспадающего меню стиля оптимизации.

При ручной оптимизации формата GIF можно задать алгоритм сокращения количества цветов, алгоритм сглаживания, прозрачность, чересстрочную загрузку, степень сглаживания (в процентах), цвет, которым следует заполнить прозрачные пикселы. Эти параметры рассмотрены выше (в разделе «Сохранение в формате GIF»). Дополнительными параметрами являются Lossy (Потери) и Web Snap (Цвета для Web).

Рис. 8.8. Слева изображены настройки для GIF, справа — для JPEG

СОВЕТ. При установке значения Lossy (Потери) около 30% размер файла значительно уменьшается, а качество остается приемлемым. Чем меньше значение параметра Web Snap (Цвета для Web), тем меньше степень соответствия используемых цветов web-цветам. Значение 100% говорит о том, что используются только web-цвета.

При выборе формата JPEG следует обратить внимание на следующие отличия от обычного окна сохранения:

1. в меню Quality (Качество) показатель изменяется в пределах от 0 до 100;
2. возможно использование цветового профиля (флажок ICC Profile (Профиль ICC));
3. появился параметр Blur (Размытие), который упрощает сжатие.

ВНИМАНИЕ. Для обработки цветовых профилей web-браузеру необходимы дополнительные модули, к тому же включение цветового профиля увеличивает размер файла на 3-4 Кбайт. При использовании размытия изображения обеспечивается уменьшение размера файла, но удаляются его детали.

Следующие две вкладки — Color Table (Таблица поиска цветов) и Image Size (Размер изображения) — аналогичны командам Image > Mode > Color Table... (Изображение > Режим > Таблица поиска цветов...) и Image > Image Size... (Изображение > Размер изображения...), рассмотренным в предыдущей главе.

В правом верхнем углу вкладки Color Table (Таблица поиска цветов) (рис. 8.9) расположена кнопка меню управления цветом.

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

И, наконец, финальным аккордом является кнопка Output Settings (Выходные настройки).

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

СОВЕТ. Используя кнопки Prev (Предыдущий) и Next (Следующий), а также список, располо женный над элементами, определяющими параметры, вы можете быстро переключаться между режимами задания тех или иных настроек сохранения страницы.

Рис. 8.9. Вид и расположение меню управления цветом

Рис. 8.10. Внешний вид диалогового окна для настройки HTML

Рис. 8.11. Внешний вид диалогового окна для настройки фона

Внешний вид диалогового окна при настройке HTML показан на рис. 8.10. Для настройки HTML задаются следующие группы параметров:

1. Formatting (Форматирование). Из четырех ниспадающих меню выбираются варианты написания тегов (Tags Case (Регистр тегов) и Attribs Case (Регистр атрибутов)), значения параметра Indent (Абзац) и Line Ending (Окончание линии). Флажок Always Quote Attributes (Всегда использовать кавычки) указывает на то, что значения параметров тегов следует заключать в кавычки;
2. Coding (Кодирование). Флажок Include Comments (Включить комментарии) добавляет комментарии к коду HTML;
3. Slice Output (Выходные параметры фрагментов). Каскадная таблица стилей генерируется при выборе переключателя Generate CSS (Сгенерировать CSS), при этом требуется указать, по какому признаку следует вызывать элементы web-страницы. Это задается при помощи параметра Referenced (Ссылки по): «By ID» («По идентификатору»), «Inline» («Встроенный стиль») или «By Class» («По классу»). При выборе переключателя Generate Table (Сгенерировать таблицу) создается таблица. Ее параметры выбираются из трех ниспадающих меню: Empty Cells (Пустые ячейки), TD W&H (Высота и ширина ячейки) и Spacer Cells (Ячейки-разделители).

СОВЕТ. Для параметров ТD W&H (Высота и ширина ячейки) и Spacer Cells (Ячейки-разделители) лучше установить значение Always (Всегда) вместо установленного по умолчанию Auto (Авто).

Параметры фона генерируемой web-страницы задаются в окне, показанном на рис. 8.11.

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

Внешний вид диалогового окна при настройке параметров сохранения файлов показан на рис.

В этом диалоговом окне вашему вниманию предлагаются три вкладки:

• File Naming (Название файла). Определяет принцип присвоения названия файлу;
• Filename Compatibility (Совместимость названий файлов). Указывает, в каких системах, кроме Windows, может использоваться файл;
• Optimized Files (Оптимизировать файлы). Упрощает рутинную работу: копирует фоновый рисунок, записывает рисунки в одну папку и добавляет знак авторского права.

Внешний вид диалогового окна при настройке параметров сохранения фрагментов изображения, определенных при помощи инструмента Slice (Нож) показан на рис. 8.13.

В этом окне задается принцип присвоения названий фрагментам по умолчанию.

Рис. 8.12. Внешний вид диалогового окна для настройки сохранения файлов

Рис. 8.13. Внешний вид диалогового окна для настройки сохранения фрагментов рисунка