Оптимизация графики в Adobe Photoshop

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

В качестве инструмента оптимизации возьмем программу Adobe Photoshop и в ней рассмотрим, как происходит процесс подготовки графических файлов для публикации на сайте. Открытие панели оптимизации, в которой можно выбрать формат файла, определить его параметры и увидеть предварительный результат, происходит при выборе команды меню File > Save for Web… (Файл > Сохранить для Веб…). На рис. 1 представлен вид вызванного диалогового окна. Несмотря на обилие разных кнопок и переключателей, интерфейс достаточно прост и состоит из нескольких обозначенных на рисунке функциональных областей.

Рис. 1. Диалоговое окно Save for Web

Здесь:
1 — панель инструментов; 2 — вкладки выбора режима просмотра исходного и конечного изображений; 3 — исходное изображение; 4 — оптимизированное изображение; 5 — выпадающее меню с параметрами предварительного просмотра, а также выбора скорости подключения к сети для оценки времени загрузки изображения; 6 — параметры выбранного графического формата; 7 — выбор масштаба; 8 — информация об оптимизированном изображении (здесь можно узнать его размер, ориентировочное время загрузки и основные характеристики); 9 — палитра цветов, используемых в изображении (доступна только для форматов GIF и PNG-8); 10 — информация о цвете под курсором; 11 — выбор кадра для анимированного изображения; 12 — меню настроек .

Предварительный просмотр изображения

Чтобы контролировать процесс оптимизации, требуется постоянно сравнивать вид исходного изображения с изображением конечным для оценки его качества. Также необходимо знать, какой у полученного файла будет объем. Photoshop предлагает в диалоговом окне (см. рис. 1) несколько средств просмотра изображений (вкладок):

• Original — просмотр исходного изображения;
• Optimized — оптимизированное изображение с учетом заданных параметров оптимизации;
• 2-Up — одновременный просмотр исходного и оптимизированного изображения (рис. 2);
• 4-Up — одновременный просмотр исходного и трех оптимизированных изображений с разными параметрами (рис. 3).

Рамка вокруг изображения указывает на активное окно.

Рис. 2. Просмотр изображения в режиме 2-Up

Режим просмотра 2-Up является одним из наиболее удобных вариантов. Слева располагается исходное изображение, а справа — результат манипуляций по его оптимизации. Вся необходимая информация дается здесь же, под изображением. Можно сразу определить конечный объем файла и сравнить две картинки между собой для поиска наилучшего соотношения между размером файла и его качеством.

Рис. 3. Просмотр изображения в режиме 4-Up

В режиме 4-Up помимо исходного изображения показаны еще три варианта с разными параметрами оптимизации — остается только выбрать подходящую версию с приемлемым качеством. Наиболее подходящим данный режим просмотра является для оптимизации таких изображений, где сложно сразу определить, какой формат выгодней использовать. Установив в разных окнах подходящие параметры оптимизации, можно сразу же понять, в каком случае качество будет наилучшим, а размер файла минимальным. На рис. 3 показано исходное изображение с тремя разными параметрами оптимизации. Специально были заданы три неодинаковых графических формата, чтобы можно было сравнить результат между собой.

• В правом верхнем окне показано предварительное изображение в формате GIF с палитрой 64 цвета. Качество практически идентично с оригиналом, за исключением мелких деталей, которые не влияют в целом на изображение, поскольку практически не заметны. Учтите также, что здесь приводится не оригинальная картинка, а также подготовленная для публикации на веб-странице, поэтому оригинал потерял несколько в исходном качестве.
• В окне, расположенном в левом нижнем углу, используется формат PNG-8 с цветовой палитрой в 64 цветов. Несмотря на одинаковое с форматом GIF количество цветов, размер изображения при этом уменьшился. В данном случае PNG-8 демонстрирует отличную степень сжатия данных.
• В последнем окне, расположенном в правом нижнем углу, выбран формат JPEG. Качество здесь наиболее низкое, что особенно заметно по артефактам — искажениям в рисунке. Ухудшения качества проявляются возле мелких деталей и контуров — удочка мышки, само животное и линия берега. Ситуацию может исправить повышение значения параметра Quality (качество), но это приведет к существенному повышению объема файла.
  

Из данной картинки не следует делать предварительных выводов, что какой-то формат хуже другого. Стоит взять иное изображение, например, фотографию, и результаты могут оказаться совершенно противоположными. Но на примере рисованной картинки дела обстоят в среднем так: PNG-8 показывает наилучшие итоги по качеству и размеру, GIF уступает ему в объеме полученного файла, а JPEG вносит много артефактов в изображение.

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

Масштабирование изображений

Изменить масштаб изображения для удобного его просмотра можно несколькими способами:

• через меню изменения масштаба (см. п. 7 на рис. 1). Коэффициент масштабирования в процентах выбирается из имеющегося списка, там же можно выбрать вариант Fit on Screen (Вписать в окно). Этот пункт меню устанавливает коэффициент масштабирования таким, чтобы изображение занимало все окно;
• инструментом Zoom (Лупа) (активация клавишей <Z>). По умолчанию, использование этого инструмента увеличивает масштаб изображения. Чтобы его уменьшить, щелкните инструментом по изображению, удерживая клавишу <Alt>;
• сочетанием клавиш <Ctrl>+<плюс> и <Ctrl>+<минус>. «Плюс» и «минус» обычно находятся на клавиатуре в двух местах — под функциональными клавишами и на цифровой клавиатуре, напоминающей калькулятор. Альтернативное название кнопок в случае размещения на цифровой клавиатуре — «серый плюс» и «серый минус».

Совет

Двойной щелчок курсора мыши по инструменту Zoom устанавливает масштаб 100%.

Примечание

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

Изменение размеров изображения

В диалоговом окне оптимизации (см. рис. 1) можно указать новые размеры конечного изображения в пикселах или процентах. Выберите вкладку Image Size (Размер изображения) (рис. 4), расположенную рядом с вкладкой Color Table (Палитра цветов) и укажите значение ширины (Width), высоты (Height) или общий размер в процентах (Percent) рисунка. По умолчанию высота и ширина изображения связаны между собой и меняются пропорционально, другими словами, модификации ширины автоматически приводит к изменению высоты и наоборот. Снимите флажок Constrain Proportions (Сохранять пропорции) — и можно вводить любые значения в поля ширины и высоты. Однако несоблюдение пропорций приведет к явным искажениям изображения. Всегда есть возможность вернуться к исходным размерам, установив значение 100% или первоначальную ширину и высоту изображения. На качество изображения это никак не отразится.

Рис. 4. Панель изменения размеров изображения

Для выбора метода интерполяции в поле Quality (Качество) доступны несколько вариантов (рис. 4):

• по ближайшим точкам — Nearest Neighbor;
• билинейный — Bilinear;
• бикубический — Bicubic;
• бикубический со смягченными краями — Bicubic Smoother;
• бикубический с резкими краями — Bicubic Sharper.

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

Замечание

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

Применение параметров оптимизации

Установка параметров изображения осуществляется с помощью команд панели настроек (п. 6 на рис. 1), где можно изменить атрибуты, характерные для каждого доступного графического формата. В зависимости от выбранного формата вид панели будет меняться, ведь для каждого типа изображения доступны только ему свойственные характеристики. Если выбран режим просмотра 2-Up или 4-Up, то изменение всех свойств будет отображаться в окне просмотра немедленно, позволяя сразу же контролировать качество и размер изображения.
Основных способа уменьшения размера файла два:

• выбор готовых установок из списка (рис. 5);
• «ручное» изменение параметров выбранного графического формата в полях панели настроек.

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

Рис. 5. Готовые шаблоны, позволяющие быстро выставить необходимые параметры оптимизации

Оптимизация, основанная на размере файла

Иногда требуется подобрать такие параметры оптимизации графического файла, чтобы его конечный размер был точно известен. Для этого используется команда меню Optimize to File Size (Оптимизировать по размеру файла) (рис. 6). После выбора этой команды выводится диалоговое окно, где запрашивается размер файла, который требуется получить, а также его выходной формат — будет ли он основан на текущих установках или подобран автоматически (рис. 7).

Рис. 6. Выбор оптимизации по размеру файла

В поле Desired File Size (Желаемый размер файла) укажите необходимый размер файла в килобайтах, а в области Start With один из двух вариантов:

• Current Settings (Текущие настройки) — чтобы оставить формат файла текущим;
• Auto Select GIF/JPEG (Автовыбор GIF/JPEG) — для автоматического выбора формата на основе анализа цветовой гаммы.

Рис. 7. Выбор размера файла

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

Автоматический подбор параметров

Если выбран режим просмотра 4-Up, можно установить параметры только для одного окна, а остальные варианты, основанные на выбранных настройках, построить автоматически. Установите для правого верхнего окна требуемые параметры графического изображения и выберите из меню оптимизации команду Repopulate Views (см. рис. 6). В остальных окнах будут выставлены аналогичные значения, но с низким качеством. Например, для формата JPEG величина Quality установлена в 60. После применения автоматического подбора параметров, программа предложит три версии оптимизации с качеством 60, 30 и 15.

Сохранение параметров оптимизации

Для сохранения требуемых настроек, чтобы ими можно было воспользоваться в будущем, выберите в меню оптимизации команду Save Settings (Сохранить параметры) (см. рис..6). Задайте имя настроек и укажите место их размещения на диске. По умолчанию все настройки оптимизации размещаются в папке Presets\Optimized Settings, которая находится внутри папки с программой Adobe Photoshop.

При любой модификации параметров имя текущих установок меняется на [Unnamed] и в списке всех предварительных шаблонов оно становится активным. Удаление выбранных настроек производится так же, через меню оптимизации (см. рис. 6). Для этого следует указать в списке нужное имя шаблона и выбрать команду меню Delete Settings (Удалить настройки). Запрос на подтверждение этой операции не происходит, поэтому удаляйте настройки, только когда уверены в своих действиях.

Восстановление исходных параметров

Чтобы вернуть все настройки в исходное состояние, нажмите и удерживайте клавишу <Alt>. Кнопка Cancel (Отмена) превратится в кнопку Reset (Восстановить), одним нажатием на которую можно возвратить все параметры на свои первоначальные места. Аналогично кнопка Done (Продолжить) превращается в Remember (Запомнить), щелчок по ней позволяет сохранить выбранные установки, чтобы при последующем вызове панели оптимизации все настройки уже были заданы, как требуется.

Просмотр параметров изображения

Основные параметры итогового файла приводятся под оптимизированным изображением (п. 8 на рис. 1). Информация поделена на два блока — в левой части указывается выходной формат графического файла, его размер и время загрузки при определенной скорости подключения к сети, а в правой — выбранные установки оптимизации. Скорость подключения можно менять с помощью специальное меню (п. 5 на рис. 1).

Самое главное значение — это размер конечного файла. Выбирая разные установки изображения, можно сразу контролировать его качество по итоговой картинке и наблюдать за изменением объема файла.