ZODIOS.net

Оптимизация PNG c помощью OptiPNG, PNGOut

09.3.2008  –  Рубрика: Инструментарий

Использование изображений в формате PNG открывает перед разработчиками новые горизонты. Но, несмотря на растущую пропускную способность каналов, не стоит забывать о проблеме размера содержимого. С этой задачей помогает справиться формат PNG.

Кратко перечислим осовные достоинства формата PNG:

• Альфа-канал (8-битный канал прозрачности), который позволяет создавать полупрозрачные элементы;
• Отсутствует ограничение на количество цветов (у GIF их 256);
• Более высокая степень сжатия, чем в GIF;

Последнее очень важно для изображений, используемых для оформления страницы. К сожалению, современные графические программы не могут раскрыть весь потенциал алгоритмов, используемых для сжатия данных в PNG. Главная причина этого в том, что для определения оптимальной стратегии сжатия они используют эвристические алгоритмы, позволяющие без проведения непосредственно компрессии прикинуть эффективность тех или иных параметров. Понятно, что очень часто они ошибаются. Понять, какая стратегия наиболее оптимальна для определённого файла, можно только перепробовав их все.

Оптимизация графики используя PNGOut

Мне PNGOut нравится больше всего. Эта программа, в отличии от OptiPNG имете понятный интерфейс и простая в использовании. PNGOut есть в двух видах – как отдельная программа и как плагин для фотошопа. Мне больше подходит вариант в виде отдельной программы, так как плагин для фотошопа работает путем пересохранения отдельной картинки через Save as, а имея около 10 картинок это большая потеря времени. PNGOut в виде отдельной программы позволяет загружать список файлов и оптимизировать их, что для меня очень удобно. Также PNGOut имеет лучше показатели в сжатии чем OptiPNG

Для установки программы необходимо скачать ее с моего сервера, архив без вирусов, в нем есть отдельная программа и плагин для фотошопа, и конечно же ключики для регистрации Скачать PNGOUT.

Оптимизация графики используя OptiPNG

Утилита OptiPNG как раз и предназначена для оптимизации PNG. Ниже я привожу подробную инструкцию которая описывает как по использованию OptiPNG

Скачать дистрибутив программы можно с официального сайта разработчика optipng.sourceforge.net (выбрать Windows executable или другой если вы работаете под Линуксом).

Как установить:

1. Скачайте дистрибутив OptiPNG.
2. Скопируйте optipng.exe из скачанного архива в папку c:\windows
3. Теперь OptiPNG доступен с командной строки в любой папке.

Как использовать:

1. Откройте директорию с файлами PNG, которые планируете оптимизировать, в файловом менеджере с поддержкой командной строки (FAR, Total Commander). При отсутствие менеджера можно воспользоваться командной строкой доса;
2. Напишите в командной строке (после чёрточки буква o, а не ноль) optipng -o7 *.png для оптимизации всех файлов с расширением .png в этой папке; если требуется оптимизировать только какой-то определённый файл, то напишите его имя вместо *.png, например optipng -o7 picture.png
3. Нажмите Enter, через некоторое время указанные файлы будут заменены оптимизированными

Порой можно добиться уменьшения размера изображения на 10-15% и это без потери качества. Хочу заметить что, несмотря на плюсы PNG, его не всегда целесообразно использовать. О том, чем отличаются графические форматы, можно прочитать в заметке «Краткое описание графических форматов«.

Подробней о других полезных инструментах веб-разработки можно прочить в заметке «Джентльменский набор верстальщика«