Компьютерная графика - Учебное пособие (Зайцева Е.А.)

3.5. оптимизация изображения для размещения в сети интернет

 

Файлы, содержащие изображения на страницах WWW, для пересылки по электронной почте или даже в документах Word или презентациях, размещенных в сети Интернет должны быть небольшими по размеру. И в тоже время эти файлы должны быть приемлемого качества.

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

Кроме соответствующего выбора размера изображения, надо прежде всего определиться в каком формате лучше всего будет сохранить нужное изображение (см. главу 1.6, пункты 1.6.4, 1.6.5.). Затем, чтобы сохранить хорошее качество изображения в процессе оптимизации надо применять или наоборот отключать некоторые приемы улучшения качества, такие, как сглаживание.

Функция сглаживания смешивает границы объекта с фоном. Смешивание достигается путем добавления вдоль границы объекта точек с постепенно уменьшающимся уровнем непрозрачности. При компоновке изображений в программе Photoshop сглаживание помогает смягчить резкие переходы от одной фигуры к другой.

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

Если выделить некоторую область при включенной опции сглаживания, то вместе с объектом выделятся и точки фона, расположенные рядом с границей изображения. Если скопировать и вставить такую область в изображение, расположив ее на однотонном фоне, то станет видна окантовка из присоединенных точек. Чтобы этого не случилось, прежде чем выделять область, нужно снять флажок Сглаживание (Anti-aliased) на панели опций инструментов выделения, Лассо (Lasso) или Волшебная палочка (Magic Wand).

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

Если мы работаем с фотографией и выбрали формат JPEG, то при сохранении в этом формате (например, командой Файл – Сохранить как в диалоговом окне Сохранить как  при выборе в поле Тип файлов  JPEG(*.JPG;*JPEG;*.JPE) – кнопка Сохранить) в диалоговом окне Параметры JPEG требуется указать параметры качества (см. рис.3.10) из следующего списка

низкое (качество 3);

среднее (качество 5);

высокое (качество 8);

наилучшее (качество 12).

Вместо этого выбора можно воспользоваться ползунком 1. Для фотографий наименьшее приемлемое – среднее (качество 7). При  включенном флажке Просмотр (2 на рис.3.10.) в окне изображения отображаются все изменения, которые происходят вследствие оптимизации. Также динамика оптимизации отражается в панели Размер (3 на рис.3.10.), где выводится размер файла в килобайтах и время загрузки файла в секундах при указанной рядом справа скорости загрузки информации из сети. Например, при размере изображения 45,43К и доступе в Интернет через модем  со скоростью 56,6 Кбит/с оно загрузится за 8,02 секунд.

Но наиболее удобно оптимизировать изображения форматов JPG и GIF с помощью выбора Файл - Сохранить для Web (Save for Web) в диалоговом окне Save For Web .

Данной командой можно оптимизировать не только одну фотографию или рисунок, но и выполнить процесс формирования html-документа (макета) вместе с оптимизацией фрагментов изображения на основе обработки последнего инструментом Раскройка  (разделении на фрагменты). Это обычно делается при подготовке дизайна для размещения сайта в сети Интернет.

Рассмотрим на примере процесс оптимизации в последнем окне одного изображения lilia.jpg (см. рис. 3.11).  В данном окне есть возможность выбора количества панелей для визуальной оценки изображения с помощью вкладок  1, а точнее

Original (вывод  в одной панели исходного изображения),

Optimized (вывод в одной панели оптимизированного изображения),

2-UP (вывод в двух панелях исходного и оптимизированного изображения),

4-UP (вывод в четырех панелях исходного и трех вариантов оптимизированного изображения),

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

Кроме того, в этом окне расположены таблица цветов Color Table 2 и средства управления форматом 3, каймой Matte 4, качеством изображения Quality 5, добавления эффекта размывания Blur 9 и др. Также имеется меню Preview (Предварительный просмотр) 6 и кнопка Preview in [browser] 7 (Предварительный просмотр в [браузер]).

Файлы в формате JPEG также могут быть оптимизированы с использованием формата Progressive 8 JPEG, поддерживаемого браузерами Nestcape Navigator и Internet Explorer (версия 4.0 и выше). При загрузке на Web-страницу картинки и в таком формате детализация изображения увеличивается постепенно.

Из рис. 3.11 видно, что было выбрано качество 49 при размере файла 11,61К для изображения lilia.jpg. Нажатие кнопки Save  откроет диалоговое окно Save Optimized As, в котором через выбор из  списка в поле Тип файла (Только изображения (*.gif), HTML и изображения (*.html), Только HTML (*.html)) имеется возможность сохранить не только изображение, но и html-код размещения этого изображения в web-документе, а также задать местоположение  и название сохраненных файлов.

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

Данные о зависимости количества цветов и глубины цвета приведены в табл. 3.1.

 

 

Количество цветов

Глубина цвета в битах

256

8

128

7

64

6

32

5

16

4

8

3

4

2

2

1

 

 

Таблица 3.1. Глубина цвета

 

Рассмотрим диалоговое окно Save For Web (рис.3.12) при выбранном формате GIF для изображения с прозрачным фоном, рассмотренным ранее.

Для сохранения и оптимизации данного рисунка задано 16 цветов (глубина цвета - 4), включена опция Transparency (наличие прозрачного фона).

Под списком выбора формата 1 находится список выбора алгоритмов сокращения 2 количества цветов или цветовых палитр.

Существует четыре алгоритма сокращения количества цветов в формате GIF:

Perceptual (Учитывающий восприятие) - создает таблицу на основе текущих цветов изображения. При этом особое внимание уделяется тому, как человек воспринимает цвета. Преимущество данной таблицы заключается в сохранений целостности цвета;

Selective (Селективный) - создает таблицу цветов на основе текущих цветов изображения. Опции Perceptual и Selective похожи, но последняя в большей степени нацелена на сохранение цветов однотонных элементов изображения, а также Web-цветов;

Adaptive (Адаптивный) - создает таблицу на основе части цветового спектра, где представлено    большинство    оттенков    изображения.   Эта   опция    формирует

оптимизированный файл немного большего размера.

При переключении опций Perceptual, Selective, Adaptive сохраняются все Web-цвета, входящие в таблицу цветов изображения.

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

Опция Interlaced 3 делает рисунок  чересстрочным (меняется по мере загрузки в сети Интернет от грубого очертания/силуэта до полной прорисовки). К сожалению, режим чередования строк, хотя и не существенно, но может несколько увеличить размер изображения.

Чтобы еще уменьшить размер файла, можно настроить параметр Lossy 4 - потеря качества изображения. Без ухудшения качества изображения можно варьировать Lossy от 10 до 40\%.

Параметр Web  Snap 5 выбирает веб-устойчивые цвета, наиболее близкие к цвету рисунка.

И все же основной способ снизить вес изображения – уменьшение количества цветов.