Реактивные веб-сайты

Образец для наших экспериментов, отражающийся

в «мокром полу» (2,44 Мб)

Рис. 3.15. Создаем канал из выделенного участка

Теперь нам нужно отделить пиксели, которые в изображении наибо-

лее заметны. Для этого снимаем выделение (Ctrl+D), инвертируем канал

(Ctrl+I) и воспользуемся диалогом Threshold (Image > Adjustments >

Threshold).

———————— Page 106————————

5

0

Алгоритмы уменьшения изображений 1

Меньшее значение параметра Threshold сохранит меньше деталей, а

значит — уменьшит размер файла.

Кликаем с зажатой клавишей Ctrl на миниатюре канала в палитре

«Channels» и выбираем фильтр «Median» (Filter > Noise > Median). Его

значение опять же нужно подобрать вручную; чем больше значение, тем

меньше деталей сохранится и тем меньше будет размер файла.

При значениях Threshold, равному 138, и Median, равному 4, размер

нашего файла уменьшился на 440 Кб (18%) без заметных глазу потерь.

3.3.10. cA‚E‰EIOA — IA AI‡?EU IAOU?AOU‚U??AA

Редактор Adobe Photoshop

имеет одну малоизвестную осо-

бенность, иногда сильно увеличи-

вающую размер файла PNG.

Попробуйте открыть в Photo-

shop какую-нибудь фотографию,

выделить любым инструментом

(например, «Lasso Tool») любой

сложный контур, скопировать его

в новый документ, после чего со-

хранить его через «Save For Web»

(Alt+Shift+Ctrl+S).

Рис. 3.16. Инструментом «Elliptical Marquee Tool» вырезаем сложный контур

Логично было бы предположить, что полностью прозрачные части

заполнены одним прозрачным цветом, чтобы изображение лучше упако-

вывалось. Оказывается, это не так. Откроем сохраненное изображение

———————— Page 107————————

106 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

программой XnView, в режиме просмотра выбираем «Рисунок» > «Преоб-

разовать в цветное», в появившемся окошке выбираем «Применить».

Рис. 3.17. Результат обработки нашего изображения программой XnView

Как видно, Photoshop оставил в невидимых областях много лишнего.

Впрочем, избавиться от этого вполне нам по силам.

Если ваше изображение не содержит полупрозрачных областей, го-

дится следующий простой способ: Ctrl+клик на миниатюре изображения

в палитре «Layers», инвертируем выделение (Ctrl+Shift+I), удаляем вы-

деленное (клавиша «Delete») и снова сохраняем наше изображение

(Alt+Shift+Ctrl+S).

В случае, если полупрозрачные области присутствуют, придется по-

трудиться немного больше: Ctrl+клик на миниатюре изображения в

«Layers», переходим в режим быстрой маски (клавиша «Q»), в диалоге

Image > Adjustments > Threshold переставляем бегунок в крайнее левое

положение и нажимаем «OK», выходим из режима маски (опять «Q») и ин-

вертируем выделение (Ctrl+Shift+I). После чего заливаем выделенную

область черным цветом (Edit > Fill), снова инвертируем выделение

(Ctrl+Shift+I) и добавляем к слою маску (иконка «Add Layer Mask» вни-

зу палитры слоев). Изображение можно сохранять.

В нашем случае экономия составила 7%. Хотим сразу предостеречь,

что этот прием иногда не уменьшает, а увеличивает размер файла. Дело в

том, что формат PNG исключительно хорошо сжимает участки определен-

ных типов (например — градиенты), так что если за границей видимого

осталась какая-то часть градиента, то она может не мешать, а способство-

вать сжатию.

Поэтому хорошая практика — попробовать сохранить оба варианта

и выбрать меньший по размеру.

———————— Page 108————————

7

0

Алгоритмы уменьшения изображений 1

3.3.11. e‡A‰AIAIEA IAO?OA?‡?I?? E O?OA?‡?I?? O·I‡OUAE

Суть следующего приема — в разделении изображения на два: в пер-

вом, в индексированной палитре, сохраняется само изображение, во втором,

полноцветном — полупрозрачные области. В браузере оба изображения на-

кладываются друг на друга, например, второе указывается как фон первого.

В качестве примера возьмем стилизованный земной шар, отражаю-

щийся в мокром полу, который мы использовали выше.

Открываем изображение в Photoshop.