Фотолаборатория

Оптимизация изображений для Web

• Оптимизатор фотографий JPEG для WEB
• Сжатие изображений с помощью скриншотов
• Оптимизация изображений для Web. Программа RIOT
• Сжатие фотографий для интернета и электронной почты в программе FastStone Image Viewer
• Сжатие фотографий программой Zoner Photo Studio Free
• Оптимизация изображений для Web
• Уменьшение потерь при изменении размеров изображений
• Фрагментарная оптимизация изображений для Web
• Простые эффекты вывода изображений

При подготовке изображений для размещения в интернете или отправки по электронной почте требуется обеспечить необходимое в каждом конкретном случае качество при минимальном объеме файла. Для выполнения этого условия исходное изображение надо оптимизировать. Если вы хотите получить наилучший результат, то альтернативы Photoshop нет. Кроме того, лучшая программа создания сайтов Adobe Dreamweaver CS3 полностью интегрирована с Photoshop, так как, напомню, что компания Adobe приобрела в 2005 году фирму Macromedia, создателя Dreamweaver.

Работа по оптимизации изображений делится на два этапа: подготовка изображения в редакторе и процесс сжатия. Описания оптимизации обычно начинаются сразу с применения команды Save for Web (Сохранить для Web) или переходом в Image Ready, а предварительной подготовке не уделяется должного внимания. По умолчанию считается, что картинка уже отредактирована, то есть подготовлена к печати. А между тем, оптимизация для Web отличается от подготовки к печати весьма существенно. Кроме того, возможности редактора по изменению параметров изображения значительно шире, чем у Image Ready, да и работать в редакторе удобнее. Это относится, конечно, только к процессу подготовки к сжатию, а не к специальным функциям Image Ready для Web: создание карты изображения, GIF-анимации и самого процесса сжатия.

Итак, вы открыли изображение в Adobe Photoshop и выполнили необходимые операции по коррекции уровней, балансу цветов, насыщенности и кадрированию. Эти операции детально описаны во многих руководствах и на них останавливаться не будем. Чтобы не потерять оригинал, создадим копию изображения, и с ней будем дальше работать. Удобно для этих целей выделить отдельную папку, в которой будут храниться наши изображения для интернета и электронной почты.

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

Разрешение (Resolution) задаем стандартное для Web - 72ppi, пропорции сохраняем (Constrain Proportions).Размер изображения в пикселях желательно задать минимально необходимый. Ориентироваться следует на самое распространенное разрешение экрана, которое в настоящее время составляет 1280х1024 (1280х800 для широкого экрана). Задавать больше этого значения нет смысла, если только вы не планируете использовать прокрутку, например, желая продемонстрировать удилище для спортивной рыбалки или воспроизвести картину "Маршал Буденный с конницей у гроба Ленина". Тут уж без прокрутки никак...

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

Основное правило при любом изменении размеров, кроме обрезки (Crop): старайтесь не менять общее количество пикселей в изображении без крайней необходимости, так как это ухудшает четкость картинки и создает дополнительные контурные искажения, повышающие, в конечном счете, обьем файла при сжатии. Это относится не только к оптимизации изображения для Web, но и к любым операциям в редакторе.

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

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

Для разных браузеров падение резкости немного отличается в зависимости от способов интерполяции промежуточных значений пикселей, но все равно, это явление очень заметно. Кстати, оно проявляется даже в таком мощном редакторе, как Photoshop. Именно поэтому все операции с резкостью выполняются только при 100% масштабе.

Аналогичный эффект проявляется и в том случае, если вы на ЖК-мониторе установите разрешение, меньше максимального. Картинка на мониторе состоит из тех же пикселей, и попытка воспроизвести 1024х768 точек на экране с разрешением 1280х1024 приведет к ухудшению резкости. Если хотите, можете сразу проверить, изменив разрешение вашего монитора (правый щелчок на Рабочем столе - Свойства - Параметры - Разрешение экрана).

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

Установив размеры изображения, переходим к его подготовке для дальнейшего сжатия. Требования оптимизации для форматов JPEG, GIF и PNG отличаются, что связано с разными алгоритмами сжатия. Для получения минимального размера сжатого файла в JPEG и PNG-24 надо избегать резких контрастных переходов и мелких деталей, причем шумы на изображении - это тоже мелкие детали и, следовательно, шум может сильно увеличить размер конечного изображения. Для GIF и PNG-8 нежелательны плавные градиентные переходы и широкая палитра цветов.

Оптимизация изображений в формате JPEG и PNG-24

Для просмотра, как уже выяснили, устанавливаем масштаб 100% и обрабатываем фильтрами повышения резкости.

Можно пользоваться любыми, но мне кажется наиболее удобным использовать фильтр Unsharp Mask с параметрами, указанными на рисунке, повторив последовательно его действие от трех до пяти раз.

Затем применяем фильтр размытия Despeckle (Filter - Noise - Despeckle) и регулируем глубину его действия (Ctrl+Shift+F). Обычно достаточно уменьшить размытие примерно до 50%, добиваясь сохранения мелких деталей при минимальной контурной резкости, необходимой для просмотра на экране монитора. Помните, что при сильном шарпенинге (повышении резкости) возрастает объем сжатого файла, особенно для больших изображений.

Шумы убираем фильтром Reduce Noise (Filter - Noise - Reduce Noise) или любой специальной программой, например, Neat Image или Noise Ninja.

Далее переходим к сжатию изображения, выбрав File - Save for Web (Файл - Сохранить для Web) или Ctrl+Shift+Alt+S. Переходить в Image Ready для этого нет смысла, так как команда Save for Web является составной частью Image Ready с теми же функциями сжатия. Устанавливаем режим просмотра одновременно двух изображений, нажав 2-Up.

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

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

В правом углу расположены основные регулировки сжатия. Щелкнув по стрелке в окне Quality (Качество), выводим шкалу и ползунком регулируем степень сжатия, контролируя качество по изображению в правом окне. Если результат сжатия, то есть "вес" полученного файла при должном качестве, нас не устраивает, что для пытливого веб-дизайнера характерно в 99% случаев, жмем Cancel. Вернувшись таким образом в редактор, повторяем манипуляции с Unsharp Mask, Despeckle и Reduce Noise с другими параметрами. Следует учесть, что последовательность применения этих трех фильтров то же сказывается на результате. Методом "шаг назад, два шага вперед" постепенно добиваемся максимального сжатия при удовлетворяющим нас качестве картинки. К сожалению, полученные установки фильтров для оптимизации изображения уникальны для каждого случая, но отличия не очень значительны, и после нескольких экспериментов вы будете представлять силу воздействия каждого фильтра на окончательный результат оптимизации изображения.

Для облегчения жизни удобно назначить для наших трех фильтров быстрые клавиши вызова. Напомню, для этого надо выбрать в Photoshop команду Edit - Keyboard Shortcuts. После этого вы всегда сможете повторно вызывать фильтр с предыдущими установками, нажав Ctrl+Alt+(клавиша фильтра).

Если вы хотите, чтобы изображение появлялось на экране монитора постепенно, установите флажок Progressive. Иногда это несколько увеличивает, а бывает, наоборот, уменьшает размер файла, но для больших изображений оправдано, так как повышает удобство просмотра. Параметр Blur лучше не использовать, так как он значительно грубее, чем Despeckle.

В палитре параметров сжатия есть специальная функция для очень ленивых - автоматическая оптимизация изображения. Для ее выбора установите флажок Optimized и нажмите кнопку с треугольником над ней. В выпадающем меню выберете Optimize to File Size.

В появившемся окне можно задать желаемый размер оптимизированного изображения и формат: либо определенный вами - Current Settings, либо предоставить его выбор программе - Auto Select GIF/JPEG. Жмем ОК и получаем результат, который может удовлетворить только очень непритязательного пользователя. Как почти любая автоматизация в Photoshop - эта функция практически неприменима, но для общего развития знать о ней надо.

Формат PNG-24 соединяет в себе черты JPEG и GIF: поддерживает 24-битный цвет, сохраняет прозрачность и очень хорошо передает полутона. Размер получаемых изображений обычно больше, чем в JPEG, но бывают исключения. Поэтому есть смысл при оптимизации изображения попробовать и PNG-24.

Оптимизация изображений в формате GIF и PNG-8

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

Для регулировок доступны следующие параметры: алгоритм сжатия, размытие (Dither), прозрачность (Transparency) и количество воспроизводимых цветов (Colors). Последний параметр наиболее важен. Уменьшайте количество цветов до приемлемого уровня, а затем поэкспериментируйте с алгоритмом сжатия. Обычно наилучший результат при минимальном объеме дает выбор Selective.

Затем переходим к регулировке сглаживания. Эта функция позволяет имитировать недостающие цвета несколькими соседними пикселями. Обычно используется режим Diffusion, а для градиентов - Noise. Конкретное значение размытия устанавливаем в окне Dither с помощью выпадающей шкалы.

Также, как и в случае с оптимизацией изображения в формате JPEG, наилучшего результата можно добиться только вручную методом последовательных приближений, добиваясь наилучшего соотношения качество/размер файла. Здесь может быть удобен режим одновременного показа четырех изображений (кнопка 4-Up в левом верхнем углу): исходного и трех разных вариантов в GIF и PNG форматах.

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

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

Создана такая прозрачная область следующим образом (рис.1):

1. Сначала я нарисовал смайлик "Фото";
2. Инструментом  Magic Wand Tool (Волшебная кисть) выделил область вокруг смайлика;
3. Сам смайлик выделил командой Select - Inverse (Выделение - Инверсия);
4. Для перемещения смайлика на отдельный слой применена команда Layer - New - Layer Via Copy (Слой - Новый - Слой через копирование);
5. Отключил фоновый слой Background щелчком в окне Layer по изображению глаза на строке. При этом фон заменяется на "шахматное поле" - прозрачную область;
6. Выбрал команду File - Save for Web (Файл - Сохранить для Web), формат PNG-8, установил флажок Transparency и оптимизировал изображение с параметрами, указанными на рисунке.

Рис.1. Последовательность создания изображения с прозрачностью

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

Оптимизируемые для Web изображения не всегда подходят для сжатия в каком-либо одном формате. Например, натюрморт или портрет обычно имеют равномерный размытый фон, идеальный для сильного сжатия, и сам объект съемки, для отображения которого подходят только JPEG высокого качества и PNG-24. Много таких смешанных изображений в рекламе (буклеты, календари, каталоги продукции), где фотографии соседствуют с графикой и текстом. Для таких случаев оптимально разделить изображение на фрагменты - слайсы и каждый оптимизировать по своему алгоритму сжатия. Этот способ рассмотрим подробнее в дальнейших статьях по подготовке изображений для Web. Влияние исходного формата на возможности сжатия изображения показано в статье о снятии скриншотов. Так, например, если изображение уже было сжато в JPEG, то оптимизация его возможна только в JPEG, так как GIF и PNG-8 дадут большой объем сжатого файла.

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

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

2.08.2008 г.