
Photoshop: от простого к сложному
Часть 34. Сжатие и оптимизация изображений для Web 
Компрессия с творческим подходом
Преобразование неинтернетовских цветов
Механизм оптимизации и характер графики
Компрессия с творческим подходом
Эксперименты со сжатием изображений способны давать самые разные результаты — что-то покажется вам интересным, а что-то отвратительным…
- Бывают случаи, когда вам не нужна прилизанная картинка, — ради придания
изображению оригинальности вы можете пожелать преднамеренно огрубить его.
И здесь артефакты компрессии могут оказаться полезными. Возьмите картинку
наподобие этой.
- Командой Save for Web (Сохранить для Web) вызовите диалоговое окно Web-оптимизации.
Изменяя параметры GIF, вы можете контролировать сглаживание (dither) и выбирать
новые цвета, что позволяет получать интересные эффекты с цветовыми переходами.
Выберите какой-нибудь из предустановленных вариантов GIF и сократите количество
цветов до четырех.
- Теперь можно выбирать любые цвета из цветовой таблицы, дважды щелкая на
образцах. Если картинка взята из Web, ограничьтесь интернетовским набором
цветов. Мы выбрали три цвета, а для логотипа определили черный.
- Различные варианты сглаживания дают разные результаты. В нашем примере для
получения более резкого цветового порога сглаживание отключено вовсе, а цвета
подобраны под эффект «ретро».
- Вы вольны выбирать либо мягкие, либо яркие оттенки. Здесь мы набрали восемь
цветов, включая красный, желтый, зеленый, синий и черный, придав изображению
такой вид, будто рассматриваем его через инфракрасный детектор. В некоторых
ситуациях это может оказаться вполне уместным.
- Для полного огрубления картинки можно воспользоваться регулятором снижения
качества, доступным в режиме GIF-компрессии. В этом примере мы оставили лишь
два цвета, выбрали вариант Diffusion (Диффузия) для сглаживания и задали уровень
сжатия 79%. Регуляторы Lossy (Потери) и Dither (Сглаживание) взаимодействуют
друг с другом; чтобы добиться желаемого результата, поэкспериментируйте с
ними.
![]() |
Преобразование неинтернетовских цветов
Цветовой палитры Web придерживаться вовсе не обязательно — на начальном этапе можно использовать любые цвета…
- Если не хотите, можете не придерживаться палитры Web-цветов. Цветовую схему
для этого изображения мы выбрали по своему усмотрению.
- Откройте изображение в Photoshop и с помощью команды Color Range (Цветовой
диапазон) создайте маску для трех не-интернетовских цветов (черный, разумеется,
относится к интернетовским). Загружая выделения по очереди, скопируйте и вставьте
каждый цвет в новый слой. Не забудьте включить параметр Preserve Transparency
(Сохранить прозрачность).
- Активизируйте слой и снимите «пипеткой» образец цвета, затем выберите команду
Other > DitherBox (Другие > DitherBox) из меню Filter. Щелкните на оранжевой
стрелке, и фильтр DitherBox выполнит преобразование. Если результат вас не
устраивает, подберите цвета вручную, щелкая на ячейках в области редактирования.
Нажмите кнопку Fill (Заливка), и слой заполнится гибридным цветом, составленным
из интернетовских. Повторите то же и для других слоев.
![]() |
Механизм оптимизации и характер графики
Для успешного создания Web-сайта очень важно понимать, как функционирует компрессия…
- При проектировании Web-сайта полезно знать, как работает метод сжатия изображений.
В частности, графическая информация считывается и сохраняется построчно, а
для сокращения размера файла используется кодирование длин серий с запоминанием
смежных строк одинаково окрашенных пикселей. Откройте какое-нибудь изображение
с горизонтальными полосами.
- Эта картинка не блещет красотой, а для фона Web-страницы вообще не годится
(хотя мы еще и не такое видали), зато подходит в качестве иллюстрации для
нашего примера. В формате GIF размер файла составляет примерно 4 Кбайт.
- Теперь поверните холст на 90°, чтобы полосы стали не горизонтальными, а
вертикальными. Сохраните изображение как GIF с теми же установками. Вы обнаружите,
что размер файла повернутой картинки возрос втрое, так как участки одинаковых
цветов в строках стали гораздо короче. Это не значит, что вертикальных полос
в дизайне нужно избегать, но помнить об этом следует.
![]() |
Web-галереи
Помимо всего прочего подготовка Web-галереи включает сжатие изображений до размеров миниатюры…
- Web-галерея может быть представлена разными способами, но всегда предполагается
наличие уменьшенных версий изображений, посредством которых посетитель вызывает
привязанные к ним полноразмерные картины. Пакетная обработка файлов для Web-галереи
в Photoshop хотя и удобна, но не особенно впечатляет.
- Если вы создаете трехмерные изображения, то для миниатюры можно использовать
каркас. Каркасный рендеринг малого размера делается быстро, для этого воспользуйтесь
GIF-сжатием. Такая миниатюра стимулирует интерес зрителя (а как будет выглядеть
эта картинка «во плоти»?).
- Для изображений других типов можно использовать полутоновые серые или даже
черно-белые миниатюры, сохраненные с алгоритмом сглаживания (dithering) или
без него. Это дает минимальный размер файла и способствует унификации стиля
страницы. Нетрудно составить и скрипт (Action) для пакетной обработки таких
изображений.
- Тот факт, что компрессия выполняется построчно, можно обратить себе на пользу,
придав индексной странице своеобразный стиль. Эта миниатюра привязана к изображению
с полным разрешением.
- Например, вы можете придать картинке полосатую текстуру. Для этого проще
всего воспользоваться фильтром Sketch > Halftone Pattern (Эскиз > Полутоновой
узор). Обязательно повысьте контраст; чем шире вы сделаете полосы, тем сильнее
будет сжатие. В результате получаем файл вдвое меньшего объема, чем стандартный
16-цветный GIF. Да и выглядит такая миниатюра достаточно интересно.
- Другие виды текстуры можно получить с помощью фильтров Graphic Pen (Тушь),
с горизонтальными штрихами, разумеется, и Conte Crayon (Волшебный карандаш) —
в этом случае задайте текстуру холста, освещение сверху и полномерный масштаб.
Помните, что вам нужны строки одноцветных пикселов (это помогает компрессии),
однако при этом я картинка должна быть разборчивой и подогревать интерес посетителя.
![]() |
Устранение шумов
Одним из признаков неэффективной компрессии является слишком большое количество шумов, но проблема эта решается просто…
- Чтобы компрессия давала хорошие результаты, необходимо проверить изображение
на наличие шумов и сократить их уровень. Чем выше зашумленность, тем меньше
вероятность качественной компрессии. Это легко проверить на примере. Откройте
файл с какой-нибудь фотографией.
- Выберите команду Save for Web (Сохранить для Web) и установите вариант JPEG
Medium (JPEG Среднее). Как видим, наше изображение содержит довольно много
шумов, которые вызваны зерном фотопленки. В данном случае JPEG-компрессия
образует файл размером 11,53 Кбайт (против 1,2 Мбайт оригинала) —
совсем неплохо.
- Покиньте диалог Save for Web, ничего не сохраняя, и добавьте в копию изображения
искусственный шум. Воспользуйтесь фильтром Filter > Noise > Add Noise
(Фильтр > Шум > Зернистость) с величиной эффекта 10. Теперь размер файла,
сохраненного с установкой JPEG Medium, вырос более чем вдвое — до 29,28 Кбайт.
Мораль: когда вам важно сохранить минимальный размер файла, остерегайтесь
зашумленности.
- Проблема эта решается несколькими способами. Примените к зашумленному изображению
фильтр Noise > Despeckle (Шум > Ретушь) и снова войдите в диалог
Save for Web. Наш файл сократился до 17,1 Кбайт — весьма существенно.
- Другой способ — воспользоваться фильтром Noise > Median (Шум >
Монокль). Он смягчает изображение, устраняя шумы, а в больших дозах производит
характерный эффект постеризации. Применительно к нашему зашумленному глазу
с радиусом 2 пиксела фильтр позволяет получить JPEG-файл размером 13,2 Кбайт —
почти такой же, как и исходный.
- Наконец, фильтр Dust & Scratches (Пыль и царапины) предлагает еще один
вариант. Помимо радиуса он позволяет регулировать порог срабатывания, давая
возможность оставлять часть изображения нетронутым. Но даже при этом JPEG-компрессия
сокращает файл до 10,6 Кбайт. Недостатком этих фильтров является некоторая
потеря четкости; впрочем, компрессия всегда предполагает компромисс между
качеством и размером файла.
![]() |
Сжатие и резкость
Когда следует увеличивать резкость Web-графики — до или после компрессии?
- Готовя изображение для Web, возможно, вы захотите повысить его резкость.
Однако помните, что делать это необходимо до компрессии. Возьмите два одинаковых
JPEG-изображения с разной степенью сжатия.
- Если применить фильтр Unsharp Mask (Нерезкое маскирование) к версии с сильным
сжатием, вы добьетесь лишь того, что еще сильнее проявятся артефакты компрессии.
В данном случае грубость JPEG-оптимизации очевидна.
- Откройте версию того же изображения с малой степенью сжатия и снова попробуйте
повысить резкость. Сейчас вы не только не увидите артефактов (во всяком случае
их будет мало), но и обнаружите, что увеличивать резкость понадобится гораздо
меньше, а результат будет лучше. Теперь изображение можно подвергать дальнейшей
компрессии.