Урок 3: Save for Web... (Сохранить для Web)

В прошлом уроке мы говорили о сохранении изображений в файлах формата PSD и TIFF. Несомненно, это лучшие форматы, для сохранения изображений без потерь, но к сожалению они не подходят для того, чтобы размещать изображения, сохраненные в подобных форматах, в Интернете или пересылать их по электронной почте. Дело в том, что размер файлов получается неоправданно велик. Однако не стоит волноваться, так как для таких целей есть пара подходящих форматов: GIF и JPEG. Причем, если говорить о фотографиях, то в подавляющем большинстве случаев лучше всего использовать формат JPEG, так как только он сможет ужать до приемлемых размеров (в килобайтах) фотографию и не особо сильно испортить ее визуально. А GIF предназначен для хранения изображений с ограниченным набором цветов (т.е. если в реальной фотографии, сохраненной в формате JPEG, может присутствовать несколько тысяч различных цветовых оттенков, то в той же самой фотографии, сохраненной в формате GIF, их будет, в лучшем случае, не больше пары сотен). Ну и представьте себе, сколь сильно будет изуродована фотография радуги на небе, если ее сохранить в формате GIF. Да и сжатие файла (конечный размер в килобайтах) будет, скорее всего хуже, чем для формата JPEG. Но в тоже время, нельзя не признать, что область применения формата GIF тоже очень велика. Практически, это все те изображения, в которых присутствует ограниченная цветовая гамма - текст, а так же изображения, содержащие сплошные зоны цвета (например, элементы Web-интерфейса). Кроме того, GIF используется для создания анимированных изображений и изображений с прозрачным фоном.

И так, сегодня мы изучим, каким способом можно сохранить ваши фотографии в формате JPEG. Конечно, вы можете их сохранять через диалоговое окно "Save As..." меню File, но гораздо удобнее использовать специальную функцию Adobe Photoshop "Save for Web...". Ее можно вызвать через меню File, или нажав комбинацию клавиш Alt-Shift-Ctrl-S.

В результате, вы увидите окно, похожее на рисунок выше. В верхней части окна (1) расположены четыре закладки, которые позволяют просматривать либо оригинальное (несжатое) изображение; либо только одно, результирующее изображение, которое получится при использовании текущих настроек сжатия; либо два или четыре изображения с разными настройками сжатия (включая, оригинальное изображение) соответственно. Итак, сразу выбираем закладку (4-Up), на которой будут изображены четыре варианта изображения. Кликая мышью по любому из окошек мы можем выбирать его как текущее, соответственно, в правой части общего окна будут меняться настройки - показываться будут именно те, которые относятся к выбранному нами окошку.

Теперь настроим окошки под себя. Выбираем первое окошко (например, верхнее левое) и читаем, что написано под ним. Если там стоит Original, значит в этом окошке уже показывается оригинальное (несжатое) изображение, которое мы будем использовать как образец. Если же нет, то в списке Preset (2) выбираем пункт "Original". Теперь переходим ко второму окошку (например, верхнему правому). Опять идем в пункт Preset и выбираем там настройку, которую хотим использовать для этого окна (например, JPEG High). Аналогичные действия проделываем для остальных окошек (выбирая, для начала, JPEG Medium и JPEG Low).

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

Ну как, оценили размер файла? Слишком большой? Давайте тогда попробуем изменить размер самого изображения (т.е. количество пикселей по горизонтали и вертикали). Для этого выбираем вкладку Image Size (4) и вводим там желаемый размер (причем, галочку "Constrain Proportions" (сохранять пропорции) желательно оставить, иначе вы ненароком можете ужать изображение только по одному измерению). Вы можете ввести как значение в пикселях (в поле ширины или высоты), а можете ввести значение процентов (Percent), на которое следует ужать (или растянуть) изображение. В поле "Quality" (тип масштабирования) оставьте тип Bicubic. После чего нажмите кнопку Apply.

Смотрите теперь на размер изображений. Стало меньше? Замечательно, теперь приступим к более тонкой настройке степени сжатия. Для торопливых можно сразу предложить автоматический способ подбора настроек. Для этого вам нужно знать только желаемый размер файла. Нажмите стрелочку, находящуюся справа от списка Preset и выберите там пункт "Optimize to File Size..." (кстати, в этом же меню, можно сохранить или удалить текущий тип настройки).

В появившемся окне, в поле "Desired File Size" введите желаемый размер файла. В пункте "Start With" оставьте "Current Settings', что укажет Photoshop использовать тот формат, который вы установили заранее для текущего окна (иначе, Photoshop сам будет решать, сжимать в GIF или JPEG). В пункте "Use" оставьте "Current Slice" (другие пункты могут понадобиться в процессе Web-дизайна, сейчас можно на них не обращать внимания). Нажмите OK.

Теперь снова посмотрите на получившееся изображение. Внимательно осмотрите его на предмет дефектов сжатия. Для этого, лучше всего выбрать масштаб 100%. Масштаб можно указать либо в поле (7), внизу общего окна, либо нажав ПКМ на каком либо из окон (6). В появившемся диалоговом окне можно указать необходимый масштаб.

Кстати, там же, можно еще и указать скорость соединения с Интернет, по которой будет высчитываться время загрузки изображения, а так же выбрать "тип монитора" (это я немного упрощаю), на котором будет демонстрироваться изображение. Т.е. там вы можете посмотреть, как например, картинка будет выглядеть на мониторе компьютера Macintosh, а так же, как она будет отображаться на компьютере с очень древней 8-битной видеокартой (установите для этого пункт "Browser Dither"). Но я рекомендую не играться с этими пунктами, а то забудете, что у вас там выставлено и будете недоумевать, почему картинка выглядит как-то странно. Кстати, это же самое меню (почти это же..) можно вызвать, нажав ЛКМ на стрелочке в верху общего окна (чуть левее кнопки Save).

И так, выставили нужный масштаб, теперь самое время, подвигать изображение с помощью специальной лапки (верхняя иконка с рукой в зоне 5). Просто тыкайте в окошко с изображением, хватайте изображение ЛКМ и тащите его в нужную сторону.

Если все устраивает, то установите галочку напротив пункта Progressive (в большинстве случаев, это, как ни странно, позволяет немного уменьшить размер файла), а сам пункт позволяет сохранять изображение так, чтобы в браузере оно сначала выводилось с меньшим качеством, а затем, по мере загрузки, восстанавливалось до изначального. Если пункт Progressive вы не хотите отмечать, по каким либо соображениям, то тогда поставьте галочку напротив пункта Optimized, который так же позволяет немного уменьшить размер сжатого изображения. Кроме того, по желанию, можете поставить галочку напротив пункта ICC Profile, что приведет к сохранению профиля рабочего цветового пространства вместе с изображением. По идее, этот профиль (если говорить о сохранении для Web) поддерживается только браузерами компьютеров Macintosh, ну а если готовить изображения для печати, то мы вроде уже договорились не сохранять их в формате JPEG. Так что эту галочку можно оставить пустой, тем более, что внедрение профиля немного увеличивает размер файла. Ну и теперь можете смело нажимать Save.

Однако не всегда такой быстрый способ является наилучшим. Поэтому, вернемся снова к нашим настройкам. И так, в зоне 3 мы выставляем способ сжатия JPEG (он уже должен быть установлен на предыдущем шаге), чуть ниже выбираем грубую оценку степени сжатия (например, Medium), затем уточняем ее в поле Quality. Двигая ползунок влево или вправо, или же вводя цифры (от 1 до 100), можно уточнить степень сжатия в формате JPEG. Имейте в виду, что выставление грубой оценки степени сжатия (Low, Medium и т.д.) просто устанавливает какие-либо определенные значения поля Quality (например, Medium соответствует качеству сжатия 30). Если Вас не устраивает выбранный вариант сжатия, то вернуться обратно, можете, зажав клавишу Alt и кликнув по кнопке Reset. Если наоборот, вы хотите запомнить текущую настройку, точно так же, нажмите клавишу Alt и кликните по кнопке Remember.

Получилось? Если качество картинки вас уже устраивает, а размер все еще великоват, можете ввести значение (от 0 до 2) в поле Blur, которое немного сгладит контрастные области, но в то же время позволит более сильно сжать изображение при тех же самых установках поля Quality.

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

Пожалуйста, в качестве дополнительной информации прочитайте очень важную статью - "Управление цветом при подготовке фотографий для Web".