Глава 3. Подготовка графики для web и мультимедиа

I. Оптимизация – уменьшение объема файла

(для его публикации в Интернете, в мультимедиа-продуктах)

Чтобы подготовить изображение не для печати, а для электронного представления - для публикации в Интернете, вставки в мультимедиа-продукт, - его объём (в байтах) надо уменьшить - оптимизировать, чтоб снизить время загрузки графики. Для этого при сохранении графики нужно:

1) правильно выбрать формат для хранения файла,

2) в окне сохранения файла сделать правильные настройки оптимизации, чтоб и объём файла уменьшить, и внешние качество рисунка оставить хорошее.

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

Но на промежуточных стадиях обработки графики используют другие форматы (так, если рисунок обрабатывают в Photoshop, на промежут. стадиях его хранят в формате PSD - позволяет хранить рисунок, разрезанным на слои, с альфа-каналами и пр.).

Чтобы правильно выбрать формат, в таблице 5 указаны назначение, характеристики популярных растровых форматов файлов.

Х Таблица 5 арактеристики растровых форматов файлов

Формат	Назначение	Тип сжатия	Метод сжатия	Max кол-во цветов	Глубина цвета (бит /пикс)	Дополнит. возмож­ности
Форматы для изображений для Интернета, мультимедиа
GIF	Для рисунков, для анимации Может хранить прозрачные области	без потерь	LZW	256	8	анимация, прозрачность, чресс. развертка
PNG8 PNG24 PNG48	Для неполноцветных рисунков и фото (256 оттенков серого, 256 индекс. цветов) Для полноцветных фото с прозрачными областями, рисунков с градиентами (RGB-цвета)	без потерь	Deflate	256 16,7 млн. 1 трлн.	8 24 48	полу- прозрачность, чресстрочная развертка
JPEG	Для фото полноцветных (RGB-цвета)	с потерями	JPEG	16,7 млн.	24	Progressiv Jpeg
JP2	Для фото полноцветных (RGB-цвета)	с потерями	Wavelet	16,7 млн.	24	для частей фото разное разрешен
Форматы для рабочих версий файлов, для печати
PSD	Для хранения рабочих вариантов, созданных в Photoshop	без потерь	RLE	не ограничено	любая	слои, каналы, маски и пр.
TIFF	Для изображений для печати	без потерь	без сжатия LZW, RLE ZIP, JPEG	16,7 млн. и более	любая	слои, альфа-каналы
BMP	Для изображений только для целей ОС Windows	без потерь	без сжатия RLE -редко	16,7 млн.	32

Также при настройке изображений надо знать, какие можно применять к рисунку цветовые режимы. От этого зависит объём файла и степень многоцветности рисунка. Цветовые режимы делят на:

а) полноцветные – режимы RGB, CMYK. Изображение в таком режиме может отображать 16,7 млн. разных цветов и выше (т.е. каждая точка фото может быть одного цвета из 16,7 млн. цветов);

б) неполноцветные. Изображения в таких режимах могут отображать только 256 разных цветов и менее (есть 2-цветный черно-белый режим как чертеж).

Характеристики цветовых режимов изображений Таблица 6
Цветовой режим	Глубина цвета, бит /пикс	Назначение цв. режима, максимальное кол-во цветов
CMYK	32	для полноцветной графики для печати
RGB	24	для полноцветной графики для экрана, 16.7 млн. цветов
Индексированный (безопасная web-палитра, палитра огненных цветов `Черное тело`, др.палитры)	8	для цветной графики – для её оптимизации (для web, мультимедиа), палитра из 256 разных цветов
Черно-белое фото (GrayScale)	8	256 оттенков серого
Тонированное (Дуплекс)	8	тонированное фото (изначально черно-белое), 256 оттенков какого-либо 1го цвета
Монохромное - Bitmap	1	черно-белый штриховой рисунок, чертеж, 2 цвета (черный и белый)

Глубина цвета (ГЦ) – это сколько бит отводится на хранение цвета каждого пикселя рисунка. Чем выше ГЦ, тем больше оттенков может иметь рисунок.

Чтоб оптимизировать цветную графику, можно уменьшить количество цветов в её палитре. Так, полноцветную графику (16,7млн. цветов) при подготовке для Интернет можно перевести в цв. режим Индексированный (256 цветов), причем в нём выбрать Безопасную Web-палитру (Web Safe Color Library).

В чем её безопасность? Даже если в рисунке не больше 256 цветов, нет гарантии, что при просмотре любым пользователем Интернет все эти цвета будут в палитре его браузера. Ведь если на странице несколько рисунков с разными палитрами, браузер составляет 1 общую палитру, и какие-то цвета могут выпасть (исказиться).

Проблема решается Безопасной (safe) web-палитрой для Интернет. При переводе в неё все цвета рисунка заменяются цветами из этой web-палитры, и на любом ПК рисунок отобразится также, как и на вашем мониторе!

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

 В Photoshop для перевода рисунка в этот режим надо в меню выбрать: Изображение /Режим /Индексированный. Откроется окно, там задать Палитра - Web.

 Если сами создаете рисунок для web или окрашиваете часть, сразу используйте безопасные цвета из web-палитры (как минимум, в областях большой площади). Для этого в окне выбора цвета отметьте  Только web-цвета.

А если выбирать цвета из обычной полноцветной палитры RGB, то в этом окне рядом с образцом выбранного цвета может возникнуть знак Это предупреждение: цвет не входит в безопасную web-палитру. Тогда щелкнув по , можно выбрать ближайший цвет из web-палитры.

 Сохранять рисунок в таком режиме (256 цветов) надо в формате GIF

ЗАДАНИЕ. Оптимизация фото путём его сохранения в формате JPEG.

Файл чай.tif (сканированное фото) обработайте и сохраните в формате JPEG в оптимизированном виде (т.е. уменьшите его объём в байтах). Причина - фото надо подготовить для электронной публикации (не для печати),.

1. Откройте фото чай.tif и обработайте (обрежьте по краям белые части).

2. Для экранных рисунков достаточно разрешения 96 пикс/дюйм (см. гл.I). Поэтому нажмите Изображение /Размер изображения. Откроется окно, там внизу отметьте флажки  (см. рис. 5 б), выберите нужный Тип масштабирования - интерполяции (см. стр.10) и задайте разрешение 96 пикс/дюйм.

Если не устраивает ширина, высота рисунка в пикселях, введите нужный размер.

3. Оптимизация файла: сохраним файл в формате, который умень­шит его объём (в байтах). Для этого нажмите Файл/ Сохранить для Web (File/Save for Web).. Откроется окно оптимизации (см. ниже). Вверху выберите вкладку 2 варианта (2-Up) - слева будет вид фото в несжатом виде (Оригинал), справа - в оптимизированном виде (что получим в итоге). В этом окне нужно:

а) правильно выбрать, в каком формате сохранить рисунок - JPEG, GIF, PNG или WBMP. Эти форматы позволяют уменьшить объём файла; б) подобрать такие настройки, чтоб и размер файла умень-

шить, и качество рисунка оставить приемлемым, т.е. надо найти компромисс.

 Выберите формат JPEG. Он лучше всех сжимает фото, сохраняет полно­цвет. палитру из 17 млн. цветов (сохранятся плавные переходы цветов фото).

 На шкале Качество (Quality) передвигайте бегунок от 100% влево. При этом качество фото (фото справа) будет снижаться, за счет этого уменьшится объём файла, в байтах. Снижение качества до 60-80% на глаз чаще незаметно, но с какого-то % уже становится заметно. Поэтому остановите бегунок на минимальном %, где качество фото на глаз ещё остаётся хорошим (т.е. шкала позволяет найти компромисс между качеством фото и объёмом файла).

Под правым фото отразится, какой объём у фото будет после сжатия, при заданном % качества (в нашем примере при 60% качества объём будет 35 Кб, а несжатый оригинал занимал 350 Кб; т.е. сжали в 10 раз). Сохраните файл

Под фото отражается и время загрузки (в сек., при выбранной скорости соединения).

Если отметить  Постепенно (Progressive), фото в Интернет-браузере будет появляться постепенно (сначала грубое, по мере загрузки качество будет улучшаться).

Параметр Blur (Размытие) обозначает степень дополнительного размытия фото. При увеличении размытия размер файла уменьшается.

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

ЗАДАНИЕ. Оптимизация рисунка путём его сохранения в формате GIF.

Форматы GIF, PNG-8 (в отличие от JPEG) могут хранить рисунки с палитрой не более 256 цветов (поэтому они подходит не для фото, а для рисунков). Зато GIF, PNG могут хранить прозрачные области.

 Откройте файл прости.tif. Оптимизируем его для публикации в Интернете.

 Для перевода рисунка в цветовой режим, который оптимизирует количество цветов и подбирает их из спец. палитры для Интернет, нажмите: Изображение /Режим /Индексированный. Откроется окно, там задайте Палитра – Web, Размытие - Нет.

 Нажмите Файл/ Сохранить для Web. В окне оптимизации выберите вкладку 2 варианта: слева будет оригинал, справа - сжатый рисунок. Выберите формат Gif

 Чтоб сжать GIF-рисунок, в этом окне нужно уменьшить количество цветов.

В поле Цвета (Colors) стоит максимум - 256 цветов. Пробуйте их уменьшить до 128, 64, 32, …, чтоб уменьшить объем файла. Но от этого качество рисунка может снижаться, поэтому остановитесь на том минимальном числе цветов, когда качество рисунка на глаз ещё хорошее.

Под рисунком смотрите, как снижается объём файла (в байтах) при уменьшении количества цветов/ Опишем другие настройки GIF:  В поле Потери (Lossy) задают допустимые потери при сжатии (от 0 до 100%).

 Список под форматом GIF определяет, как выбираются цвета в палитре:

• Перцепционная (Perceptual) - в 1 очередь выбираются лучше воспринимаемые цвета.

• Селективная (Selective) - в 1 очередь выбираются цвета, охватывающие большие области

• Адаптивная (Adaptive) - в 1 очередь выбираются цвета, что встречаются чаще всего.

• Ограниченная Web (Restrictive Web) - используются только цвета из безопасной web-палитры, их браузеры не искажают.

 Если отмечено  Прозрачность (Transparency), прозрачные области рисунка сохранятся, если нет - зальются цветом, выбранным в поле Подложка (Matte)

 Если исходный рисунок содержит больше цветов, чем есть в GIF-палитре, применяется дизеринг - отсутствующие цвета заменяются узором из пикселей других цветов, что есть в палитре. В поле Дизеринг (Dither) задают % использования таких узорных заливок: при 100% `узоры` применятся везде, при 0% отсутствующие цвета заменятся просто ближайшими из палитры.

Совет: дизеринг лучше использовать для рисунков с переходами цветов.

ЗАДАНИЕ. Откройте файл дети.bmp. Оптимизируйте файл для публикации в сети. При этом выберите нужный цветовой режим, формат и параметры так, чтобы сохранить качество и максимально уменьшить размер фото.

ЗАДАНИЕ. Стилизация фото путём перевода в палитру из 256 цветов.

Фото обычно имеет палитру 16,7 млн. цветов. Но иногда фото переводят в режим из 256 цветов, чтоб стилизовать – придать рисованный стиль, сделать тонированным рисунком, придать эффект пылающего и пр.

 Откройте фото барьер.jpg. Стилизуем его: нажмите Изображение /Режим /Индексированный (этот режим переводит рисунок в палитру из 256 цветов).

Откроется окно, в списке Палитра выберите Заказная. Таблицу цветов выберите Абсолютно черное тело (палитра пылающих цветов, Black Body). Внизу в 1^м окне в поле Размытие выберите Шум (если выбрать Диффузия эффект будет другой).