


Разделение непрозрачных и прозрачных областей. Оптимизируем PNG (Portable Network Graphics). Алгоритмы уменьшения изображений
Выбор типа PNG
Автоматическая оптимизация
Оптимизация через Lossy GIF
Постеризация
Простое снижение количество цветов в Photoshop
Программа «Color quantizer» и маска повышения качества
Маска влияния в Adobe Photoshop
Уменьшаем детализацию
Невидимое не значит несуществующее
Разделение непрозрачных и прозрачных областей
Резюме
Суть следующего приёма в разделении изображения на два: в первом, в индексированной палитре сохраняется само изображение, во втором, полноцветном — полупрозрачные. В браузере оба изображения накладываются друг на друга, например, второе указывается как фон первого.
В качестве примера возьмём стилизованный земной шар, отражающийся в мокром полу, который мы использовали выше.
Открываем изображение в Photoshop. Если оно состоит из нескольких слоёв, то его необходимо слить в один. Далее выделяем объект в слое, кликнув с зажатой клавишей Ctrl
на миниатюре в палитре Layers, переходим в палитру Channels и создаём новый канал, кликнув на «Save selection as Channel».
Снимаем выделение (Ctrl-D) и вызываем инструмент Threshold (Image → Adjustments → Threshold), перетаскиваем бегунок в крайнее правое положение. Теперь у нас есть маска для выделения непрозрачных областей.
Кликаем с зажатой клавишей Ctrl на миниатюре в маске Alpha 1, переходим в палитру Layers, выбираем слой с изображением и выполняем команду Layers via Cut (Shift+Ctrl+J). Теперь у нас два слоя, которые нужно сохранить в отдельных файлах. Непрозрачные пиксели сохраняем в PNG с индексированной палитрой (или в GIF), при возможности выполняя оптимизацию (например, постеризацию), прозрачные — в полноцветном PNG.
В нашем случае суммарный объём двух получившихся картинок составил 1МБ, а экономия — 59%.