Photoshop: от простого к сложному

Часть 34. Сжатие и оптимизация изображений для Web

Компрессия с творческим подходом

Преобразование неинтернетовских цветов

Механизм оптимизации и характер графики

Web-галереи

Устранение шумов

Сжатие и резкость

Компрессия с творческим подходом

Эксперименты со сжатием изображений способны давать самые разные результаты — что-то покажется вам интересным, а что-то отвратительным…

1. Бывают случаи, когда вам не нужна прилизанная картинка, — ради придания изображению оригинальности вы можете пожелать преднамеренно огрубить его. И здесь артефакты компрессии могут оказаться полезными. Возьмите картинку наподобие этой.
2. Командой Save for Web (Сохранить для Web) вызовите диалоговое окно Web-оптимизации. Изменяя параметры GIF, вы можете контролировать сглаживание (dither) и выбирать новые цвета, что позволяет получать интересные эффекты с цветовыми переходами. Выберите какой-нибудь из предустановленных вариантов GIF и сократите количество цветов до четырех.
3. Теперь можно выбирать любые цвета из цветовой таблицы, дважды щелкая на образцах. Если картинка взята из Web, ограничьтесь интернетовским набором цветов. Мы выбрали три цвета, а для логотипа определили черный.
4. Различные варианты сглаживания дают разные результаты. В нашем примере для получения более резкого цветового порога сглаживание отключено вовсе, а цвета подобраны под эффект «ретро».
5. Вы вольны выбирать либо мягкие, либо яркие оттенки. Здесь мы набрали восемь цветов, включая красный, желтый, зеленый, синий и черный, придав изображению такой вид, будто рассматриваем его через инфракрасный детектор. В некоторых ситуациях это может оказаться вполне уместным.
6. Для полного огрубления картинки можно воспользоваться регулятором снижения качества, доступным в режиме GIF-компрессии. В этом примере мы оставили лишь два цвета, выбрали вариант Diffusion (Диффузия) для сглаживания и задали уровень сжатия 79%. Регуляторы Lossy (Потери) и Dither (Сглаживание) взаимодействуют друг с другом; чтобы добиться желаемого результата, поэкспериментируйте с ними.

Преобразование неинтернетовских цветов

Цветовой палитры Web придерживаться вовсе не обязательно — на начальном этапе можно использовать любые цвета…

1. Если не хотите, можете не придерживаться палитры Web-цветов. Цветовую схему для этого изображения мы выбрали по своему усмотрению.
2. Откройте изображение в Photoshop и с помощью команды Color Range (Цветовой диапазон) создайте маску для трех не-интернетовских цветов (черный, разумеется, относится к интернетовским). Загружая выделения по очереди, скопируйте и вставьте каждый цвет в новый слой. Не забудьте включить параметр Preserve Transparency (Сохранить прозрачность).
3. Активизируйте слой и снимите «пипеткой» образец цвета, затем выберите команду Other > DitherBox (Другие > DitherBox) из меню Filter. Щелкните на оранжевой стрелке, и фильтр DitherBox выполнит преобразование. Если результат вас не устраивает, подберите цвета вручную, щелкая на ячейках в области редактирования. Нажмите кнопку Fill (Заливка), и слой заполнится гибридным цветом, составленным из интернетовских. Повторите то же и для других слоев.

Механизм оптимизации и характер графики

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

1. При проектировании Web-сайта полезно знать, как работает метод сжатия изображений. В частности, графическая информация считывается и сохраняется построчно, а для сокращения размера файла используется кодирование длин серий с запоминанием смежных строк одинаково окрашенных пикселей. Откройте какое-нибудь изображение с горизонтальными полосами.
2. Эта картинка не блещет красотой, а для фона Web-страницы вообще не годится (хотя мы еще и не такое видали), зато подходит в качестве иллюстрации для нашего примера. В формате GIF размер файла составляет примерно 4 Кбайт.
3. Теперь поверните холст на 90°, чтобы полосы стали не горизонтальными, а вертикальными. Сохраните изображение как GIF с теми же установками. Вы обнаружите, что размер файла повернутой картинки возрос втрое, так как участки одинаковых цветов в строках стали гораздо короче. Это не значит, что вертикальных полос в дизайне нужно избегать, но помнить об этом следует.

Web-галереи

Помимо всего прочего подготовка Web-галереи включает сжатие изображений до размеров миниатюры…

1. Web-галерея может быть представлена разными способами, но всегда предполагается наличие уменьшенных версий изображений, посредством которых посетитель вызывает привязанные к ним полноразмерные картины. Пакетная обработка файлов для Web-галереи в Photoshop хотя и удобна, но не особенно впечатляет.
2. Если вы создаете трехмерные изображения, то для миниатюры можно использовать каркас. Каркасный рендеринг малого размера делается быстро, для этого воспользуйтесь GIF-сжатием. Такая миниатюра стимулирует интерес зрителя (а как будет выглядеть эта картинка «во плоти»?).
3. Для изображений других типов можно использовать полутоновые серые или даже черно-белые миниатюры, сохраненные с алгоритмом сглаживания (dithering) или без него. Это дает минимальный размер файла и способствует унификации стиля страницы. Нетрудно составить и скрипт (Action) для пакетной обработки таких изображений.
4. Тот факт, что компрессия выполняется построчно, можно обратить себе на пользу, придав индексной странице своеобразный стиль. Эта миниатюра привязана к изображению с полным разрешением.
5. Например, вы можете придать картинке полосатую текстуру. Для этого проще всего воспользоваться фильтром Sketch > Halftone Pattern (Эскиз > Полутоновой узор). Обязательно повысьте контраст; чем шире вы сделаете полосы, тем сильнее будет сжатие. В результате получаем файл вдвое меньшего объема, чем стандартный 16-цветный GIF. Да и выглядит такая миниатюра достаточно интересно.
6. Другие виды текстуры можно получить с помощью фильтров Graphic Pen (Тушь), с горизонтальными штрихами, разумеется, и Conte Crayon (Волшебный карандаш) — в этом случае задайте текстуру холста, освещение сверху и полномерный масштаб. Помните, что вам нужны строки одноцветных пикселов (это помогает компрессии), однако при этом я картинка должна быть разборчивой и подогревать интерес посетителя.

Устранение шумов

Одним из признаков неэффективной компрессии является слишком большое количество шумов, но проблема эта решается просто…

1. Чтобы компрессия давала хорошие результаты, необходимо проверить изображение на наличие шумов и сократить их уровень. Чем выше зашумленность, тем меньше вероятность качественной компрессии. Это легко проверить на примере. Откройте файл с какой-нибудь фотографией.
2. Выберите команду Save for Web (Сохранить для Web) и установите вариант JPEG Medium (JPEG Среднее). Как видим, наше изображение содержит довольно много шумов, которые вызваны зерном фотопленки. В данном случае JPEG-компрессия образует файл размером 11,53 Кбайт (против 1,2 Мбайт оригинала) — совсем неплохо.
3. Покиньте диалог Save for Web, ничего не сохраняя, и добавьте в копию изображения искусственный шум. Воспользуйтесь фильтром Filter > Noise > Add Noise (Фильтр > Шум > Зернистость) с величиной эффекта 10. Теперь размер файла, сохраненного с установкой JPEG Medium, вырос более чем вдвое — до 29,28 Кбайт. Мораль: когда вам важно сохранить минимальный размер файла, остерегайтесь зашумленности.
4. Проблема эта решается несколькими способами. Примените к зашумленному изображению фильтр Noise > Despeckle (Шум > Ретушь) и снова войдите в диалог Save for Web. Наш файл сократился до 17,1 Кбайт — весьма существенно.
5. Другой способ — воспользоваться фильтром Noise > Median (Шум > Монокль). Он смягчает изображение, устраняя шумы, а в больших дозах производит характерный эффект постеризации. Применительно к нашему зашумленному глазу с радиусом 2 пиксела фильтр позволяет получить JPEG-файл размером 13,2 Кбайт — почти такой же, как и исходный.
6. Наконец, фильтр Dust & Scratches (Пыль и царапины) предлагает еще один вариант. Помимо радиуса он позволяет регулировать порог срабатывания, давая возможность оставлять часть изображения нетронутым. Но даже при этом JPEG-компрессия сокращает файл до 10,6 Кбайт. Недостатком этих фильтров является некоторая потеря четкости; впрочем, компрессия всегда предполагает компромисс между качеством и размером файла.

Сжатие и резкость

Когда следует увеличивать резкость Web-графики — до или после компрессии?

1. Готовя изображение для Web, возможно, вы захотите повысить его резкость. Однако помните, что делать это необходимо до компрессии. Возьмите два одинаковых JPEG-изображения с разной степенью сжатия.
2. Если применить фильтр Unsharp Mask (Нерезкое маскирование) к версии с сильным сжатием, вы добьетесь лишь того, что еще сильнее проявятся артефакты компрессии. В данном случае грубость JPEG-оптимизации очевидна.
3. Откройте версию того же изображения с малой степенью сжатия и снова попробуйте повысить резкость. Сейчас вы не только не увидите артефактов (во всяком случае их будет мало), но и обнаружите, что увеличивать резкость понадобится гораздо меньше, а результат будет лучше. Теперь изображение можно подвергать дальнейшей компрессии.

КомпьюАрт 10'2000