Оптимизация графики. Пакетное сжатие PNG иконок/графики для сайта

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

На популярных сайтах, таких как www.iconsearch.ruwww.iconfinder.com и других, иконки содержатся в формате PNG-24 с альфа каналом, обеспечивающим прозрачность фона. То есть такое изображение можно поместить абсолютно на любой фон, однако его размер огромен — приблизительно в 5 раз выше, чем у оптимизированного изображения.

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

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

Исходные папки с иконками

Исходные папки с иконками

Открываем программу под названием Photoshop. Жмем Alt+F9 — откроется окно «Операции». Создаем новую операцию под названием «Иконки».

Создаем новую операцию в Photoshop

Создаем новую операцию в Photoshop

После этого начнется запись операции, которую мы будем использовать для пакетной обработки. Открываем какое-либо тестовое изображение, которое можно «покалечить». Далее переходим в меню Изображение -> Размер изображения. Изменяем размер, указывая конечный размер в пикселях. Если эта операция не требуется, — пропустите этот шаг.

Далее мы выбираем основной цвет, который будет фоном нашей иконки (в самом низу панели инструментов слева). В нашем случае — это белый. После этого переходим в меню Изображение -> Режим -> Индексированные цвета. В открывшемся окне указываем такие параметры:

Палитра — Локальная (Селективная),

Цвета — тут указываем число до 256-ти. Это количество цветов, используемых в изображении и от этого параметра зависит насколько будет уменьшено изображение. Рекомендую поставить значение 128. Если иконка не содержит много цветов, то можно поставить меньше;

Принудительные — не показывать;

Прозрачность — снимаем галочку;

Подложка — Основной цвет (это будет фон иконки);

Дизеринг — Случайный, 75%.

Photoshop. Индексированные цвета.

Photoshop. Индексированные цвета.

Нажимаем ОК, сохраняем файл и потом — останавливаем запись операции в окне «Операции». Далее переходим в меню Файл -> Автоматизация -> Пакетная обработка. Выбираем созданную нами операцию, а также указываем путь к папке с нашими иконками. Галочки выставляем как на картинке ниже:

Photoshop. Пакетная обработка.

Photoshop. Пакетная обработка.

Когда операция будет закончена размер иконок не изменитсяне пугайтесь! Изображения уже оптимизированы: мы «отсекли» ненужные цвета, убрали альфа-канал, однако изображения все еще содержат много пустых байтов, не несущих полезной информации. Мы их должны убрать. Для этого есть очень хорошая программа, которую я еле-еле нашел. Это единственное работоспособное и простейшее в использовании приложение, которое может очистить PNG изображение от «мусора», оставив лишь те байты, которые содержат информацию. Таким образом она не вредит качеству изображения — его мы уже зафиксировали и ограничили в Photoshop.

Называется программа PngOptimizer. Переходим на сайт http://psydk.org/PngOptimizer.php и скачиваем ZIP архив с программой (она бесплатная). Из него нам понадобится лишь небольшой файлик под названием PngOptimizer.exe. Кладем в удобное для нас место, запускаем программу и просто перетаскиваем туда все папки с иконками. Программа пересохранит все файлы, оставив их в тех же локациях, где они и лежат:

Оптимизация PNG с помощью программы PngOptimizer

Оптимизация PNG с помощью программы PngOptimizer

Процесс займет совсем немного времени и Вы будете довольны результатом. Теперь нам нужно удалить все бэкапы (резервные копии), оставленные программой. Они начинаются с символа нижнее подчеркивание. Переходим в папку, где содержатся папки с иконками и вбиваем в поиск «_*.png«. Проводник найдет все файлы с расширением PNG, которые начинаются с нижнего подчеркивания. Выделяем их все и удаляем.

Все. Теперь иконки готовы к загрузке на сервер!

Понравилась запись? Ставь лайк!
  • Во-первых попробуйте Image Catalyst — это мощнейшая пакетная сжималка. Во-вторых, если хотите достичь высшей степени сжатия — придется повозиться с lossy-вариантами в ручном или полуавтоматическом режиме, например в том же Color Quantizer-е ( http://kherson.myftp.biz/cq/ ). Он расчитывает 256-цветные палитры на порядок лучше Фотошопа, а жмет почти как упомянутый выше Каталист.

Loading more content...