Содержание

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

ЗАБЕГАЯ ВПЕРЕД

Мы будем рассказывать вам о средствах, реализованных в программах Photoshop и специально предназначенной для веб-дизайна ImageReady, которые позволят подготовить вам свои работы для публикации в Сети. Но перед тем как углубиться в дебри, обратимся к основополагающим принципам оптимизации изображений. Скачивание оригинального цифрового фотоснимка занимает значительное время даже при загрузке через широкополосное соединение. Сравните: среднестатистическая цифровая фотография „весит" около 2 Мб, тогда как обычная страница имеет объем меньше 80 кб. Вы уже задумались над предметом нашего разговора?

РАЗРЕШЕНИЕ МОНИТОРА

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

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

Если вся эта информация привела вас в уныние, не расстраивайтесь — в меню File в Photoshop есть средства для решения этих проблем. Функция Save for Web содержит в себе все необходимые инструменты для значительного уменьшения размера файла и разрешения изображения для использования в Сети. И что самое замечательное — они позволяют произвести все необходимые манипуляции с незначительными или совсем незаметными потерями качества.

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

Интерфейс окна SAVE FOR WEB

[01] Панель с инструментами помогает произвести все необходимые действия без возвращения в главное окно программы [02] Вкладки позволяют вам просматривать оригинальное и оптимизированное изображение и сравнивать два или четыре варианта компрессии [03] В окне просмотра вы можете найти информацию о том, насколько эффективны будут выбранные настройки [04] Под каждым изображением выводится информация о будущем объеме файла и предположительное время его загрузки [05] Набор доступных опций изменяется в зависимости от выбранного формата данных [061 Дополнительные настройки включают в себя возможности по изменению разрешения и управлению цветовыми таблицами для GIF- файлов [07] Меню выбора масштаба и информация о цветовых параметрах изображения доступны в самом низу окна [08] Остальные кнопки дают вам возможность просмотреть результирующее изображение в браузере или перенести при желании процесс оптимизации в программу ImageReady

СОХРАНЕНИЕ ФОТОСНИМКОВ

Для оптимизации и сохранения большинства фотографий в Интернете лучше всего подходит JPEG

НАХОДИМ ИНСТРУМЕНТ

Откройте ваше изображение с помощью Photoshop и сразу перейдите в меню File > Save for Web для загрузки инструмента оптимизации. Обратите внимание на изначальный размер картинки (в нашем случае это 1536x1024 пикселей и размер файла 1 Мб, что делает невозможным использование его в сети).

БЫСТРОЕ РЕШЕНИЕ

Для быстрой оптимизации используйте выпадающий список шаблонов настроек. Кликните по вкладке 2-Up над окном просмотра для оценки разницы между оригинальным и оптимизированным изображением. Выберите шаблон JPEG Medium и посмотрите: размер нашего файла уменьшился до 10% и составляет 103 кб.

РУЧНЫЕ НАСТРОЙКИ

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

РАЗМЫВАНИЕ ГРАНИЦ

Ползунок Blur создает такой же эффект, что и фильтр Gaussian Blur. С менее детализированными изображениями алгоритм JPEG работает намного эффективнее. Поэкспериментируйте со значениями от 0.1 до 0.5 и посмотрите, насколько сильно уменьшается размер будущего изображения.

ДОПОЛНИТЕЛЬНЫЕ ОПЦИИ

Формат JPEG не поддерживает прозрачность, поэтому вам нужно будет выбрать цвет в меню Mate для замещения прозрачных пикселей. Опция Progressive позволяет получить некоторое представление о содержании картинки до ее окончательной загрузки.

РАЗМЕР ИЗОБРАЖЕНИЯ

Мы уменьшили размер исходного файла до 74 кб, используя настройки оптимизации, но мы можем улучшить результат, уменьшив физический размер изображения. Во вкладке Image Size выставим значение 750 пикселей по ширине изображения, тем самым, сократив размер до 23 Кб.

АРТЕФАКТЫ КОМПРЕССИИ

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

РАЗМЫВАНИЕ ГРАНИЦ

Ползунок Blur создает такой же эффект, что и фильтр Gaussian Blur. С менее детализированными изображениями алгоритм JPEG работает намного эффективнее. Поэкспериментируйте со значениями от 0.1 до 0.5 и посмотрите, насколько сильно уменьшается размер будущего изображения.

ДОПОЛНИТЕЛЬНЫЕ ОПЦИИ

Формат JPEG не поддерживает прозрачность, поэтому вам нужно будет выбрать цвет в меню Mate для замещения прозрачных пикселей. Опция Progressive позволяет получить некоторое представление о содержании картинки до ее окончательной загрузки.

РАЗМЕР ИЗОБРАЖЕНИЯ

Мы уменьшили размер исходного файла до 74 кб, используя настройки оптимизации, но мы можем улучшить результат, уменьшив физический размер изображения. Во вкладке Image Size выставим значение 750 пикселей по ширине изображения, тем самым, сократив размер до 23 Кб.

СОХРАНЕНИЕ НАСТРОЕК

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

МЕНЮ PREVIEW

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

ИСХОДИМ ОТ ОБРАТНОГО

Если применение имеющихся шаблонов настроек не привели файл к желаемому объему, попробуйте использовать опцию Optimise to File Size в меню Optimise. Здесь вы можете задать необходимый размер изображения и оставить процесс выбора оптимальных настроек на долю Photoshop.

ВЕРНЕМСЯ К НАЧАЛУ

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

РЕЖИМ БЫСТРОЙ МАСКИ

Фокус нашего изображения приходится на лицо/плечо/птицу, в то время как другие зоны выпадают из области резкости. Помня это, мы можем оставить центральные части без изменений, применив компрессию к окружению. Активизируйте режим Quick Mask и воспользуйтесь инструментом Gradient, выбрав опцию Radial.

ПРИМИНЕНИЕ ГРАДИЕНТА

Загрузите инструмент с градиентом от белого цвета до черного в меню Options и перетяните из центральной фокусной зоны в сторону. Поскольку мы работаем в режиме Quick Mask, градиент виден через полупрозрачную красную заливку, но если посмотрим на палитру Channels, мы увидим настоящий цвет градиента на иконке канала Quick Mask.

SAVE FOR WEB

Оставаясь в режиме Quick Mask, снова загрузите инструмент Save for Web. Но на этот раз для скорости выберите предварительную настройку JPEG Medium, чтобы получить усредненные параметры сжатия. Обратите внимание на маленький кружочек на квадратной кнопке около выпадающего меню Quality — кликните по нему, это позволит лучше контролировать изменения настроек качества.

РЕГУЛИРОВКА КАЧЕСТВА

Выбрав в появившемся меню канал Quick Mask, мы увидим изображение маски в окне предварительного просмотра. Слайдер Quality станет активным. Степень сжатия будет увеличиваться от самой белой зоны маски к самой черной. Благодаря этому мы сможем подстроить диапазон изменений параметра Quality под изображение.

КАК ДАЛЕКО СТОИТ ЗАХОДИТЬ?

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

ЗАХВАТ ИЗОБРАЖЕНИЯ

Изображение, взятое с оригинала большого размера, страдает от пикселизации и размывки, но в Photoshop'e это можно исправить

Даже если вы уверены, что отснятые или отсканированные вами изображения предназначаются только для просмотра в Интернете, все же рекомендуется сохранять их в максимальном качестве в соответствии с возможностями вашей камеры или сканера. Попробуйте в качестве эксперимента сохранить второй вариант прямо на жестком диске или на карточке, снизив показатели прямо на устройстве захвата, — вы убедитесь, насколько возможности этого второго варианта будут ограничены по сравнению с изображением, взятым с полным разрешением. Сохраняйте исходную картинку в максимальном качестве: всегда есть возможность уменьшить изображение до нужных размеров, но невозможно увеличить размер и разрешение маленьких изображений без искажения и пикселизации. Не имеет большого значения, в каком формате вы сохраняете изображение, поскольку интерфейс Save for Web конвертирует файл в один из трех возможных вариантов, которые поддерживаются браузерами, —JPEG, GIF или PNG.

АЛЬФА-КАНАЛЫ

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

СМЕШЕНИЕ ПРОЗРАЧНОСТИ

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

РАЗЛИЧНЫЕ НАСТРОЙКИ

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

ИНДЕКСАЦИЯ ЦВЕТОВ

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

НЕ ПОТЕРЯЙТЕ!

Итак, мы решили уменьшить наше изображение до 9 кб. Слайдер Lossy поможет нам удалить большую часть ненужной информации. Выставление значения параметра в пределах между 5 и 10, как правило, практически не искажает изображение, но в нашем случае мы можем довести ползунок до 50, прежде чем станут заметны потери, тем самым достигнув желаемого результата.

ПОНИМАНИЕ ЦВЕТОВ

Опция Colour Reduction Algorithm определяет алгоритм, по которому Photoshop ограничивает количество цветов. Значение Restrictive (Web) является оптимальным для безопасного сохранения изображения в Сети, тогда как значение Perceptual устраняет все подобные цвета, что значительно уменьшает размер файла. В этом случае увеличение значений параметра Dithering может не дать желаемого результата.

ПРОЗРАЧНАЯ ГРАФИКА

Поскольку формат GIF поддерживает прозрачность, вы можете отметить соответствующий пункт меню — в противном случае невидимые области будут автоматически залиты цветом, выбранным в опции Mate. Смотрите врезку для получения совета, как наложить изображение с прозрачностью на цветной фон.

"БЕЗОПАСНЫЕ" ЦВЕТА

Если вам все же пришлось использовать алгоритм Perceptual, но вы хотите, чтобы ваше индексированное изображение правильно отображалось на других компьютерах, используйте опцию Web Snap. Выставите 50% в окошке значения параметра — это поможет создать индекс цветов, считающихся максимально безопасными.

ИНДЕКСИРОВАНИЕ ЦВЕТОВ

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

ТАБЛИЦА ЦВЕТОВ

Теперь, когда вы произвели основные настройки, вам наверняка захочется увидеть результат индексации в окне Colour Table. Здесь вы можете удалять, добавлять или закреплять примеры цветов, выбирать цвета для прозрачности или вручную подбирать „безопасный" цвет.

РАЗМЕР ИЗОБРАЖЕНИЯ

Так же, как при работе с форматом JPEG, экран Save for Web позволяет изменять размер изображения. Мы уменьшили наш логотип до 200 пикселей по ширине так, чтобы он точно помещался на шапку нашей Интернет-страницы. И объем файла сократился до минимального — 1.8 кб.

ПОВТОРНОЕ ИСПОЛЬЗОВАНИЕ ИЗОБРАЖЕНИЙ

Когда дело дойдет до создания Интернет-страницы, используйте одни и те же изображения для типовых элементов страниц, таких, например, как кнопки навигации. Это намного ускорит процесс загрузки страницы, так как браузер будет запрашивать такие элементы из кэша, а не с сервера.