В составе файлов любого пользовательского веб-приложения обязательно присутствуют файлы изображений, представленных в одном из графических форматов. Обычно они составляют значительную часть общего размера сайта, занимаемого им на сервере, и имеют тенденцию «разрастаться» со временем в связи с добавлением нового контента. По этим, а также по ряду других причин актуальна задача оптимизации размера файлов изображений без заметной потери качества. Для этих целей Администраторами используется ряд утилит, наиболее известные из которых — JPEGOptim и OptiPNG. Рассмотрим работу с ними на конкретных примерах.
Утилита JPEGOptim
Используется приобработке jpeg изображений для получения управляемого качества изображений и / или нужного их размера. Есть версии под Linux и Windows. Программа позволяет использовать три режима кодирования, поддерживаемые форматом JPEG: последовательное с потерей качества (sequential), оптимизированное прогрессивное (progressive) и сжатие без потерь (lossless). Задать тот или иной режим обработки изображений можно с помощью соответствующих опций при запуске программы.
Приведём здесь наиболее полезные опции:
- all-progressive – устанавливает режим обработки progressive jpeg;
- -t – показывает результаты обработки для нескольких изображений;
- strip-all – удаляет ICC-комментарии и другие;
- -mх – устанавливает заданный уровень качества, где х – показатель качества от 0 до 100;
- -S – задаёт размер итогового изображения в % или Кб.
Процесс ознакомления с JPEGOptim разобьем на три этапа:
- Подготовка программной среды;
- Установка;
- Ознакомление со справочной информацией;
- Работа с программой.
Подготовка программной среды
Все действия мы будем выполнять на сервере под управлением Linux-подобной ОС Ubuntu 22.04.
Обновим индекс программных пакетов Ubuntu:
$ sudo apt update
Мы видим, что 46 пакетов могут быть обновлены. Обновим их с помощью следующей команды:
$ apt list --upgradable
Обновление прошло успешно. Теперь программная среда подготовлена к установке программы.
Установка
Для инициализации процесса установки JPEGOptim введём в терминале:
$ sudo apt install jpegoptim
Результат выполнения – Setting up jpegoptim (1.4.6-1), то есть программа успешно установлена в системе.
Ознакомление со справочной информацией
Воспользуемся встроенными возможностями программы для получения справки по той или иной команде. Для начала уточним сведения об установленной версии, её разработчике и лицензии. Для этого введём в терминале:
$ jpegoptim -V
Результат: версия – jpegoptim v1.4.6, разработчик – Timo Kokkonen, лицензия – GNU.
Просмотрим данные об используемых опциях командной строки. Введём в терминале:
$ jpegoptim --help
Теперь мы имеем полную информацию о допустимых параметрах командной строки и их синтаксисе, некоторые из которых мы уже рассмотрели выше.
Работа с программой
Для начала попытаемся найти jpeg-файлы в текущем каталоге. Для этого воспользуемся следующей командой:
$ find . -name "*.jpg"
Таким образом, мы выяснили, что в текущем каталоге есть три файла изображений:
./jpeg_bin/jpegoptim-master/test/jpegoptim_test2-broken.jpg
./jpeg_bin/jpegoptim-master/test/jpegoptim_test1.jpg
./jpeg_bin/jpegoptim-master/test/jpegoptim_test2.jpg
Мы будем использовать их для работы в дальнейшем.
Для начала узнаем исходный размер одного из файлов:
$ du ./jpeg_bin/jpegoptim-master/test/jpegoptim_test1.jpg
Его размер – 316 Кб.
Выполним базовую оптимизацию этого изображения с помощью JPEGoptim.
Общий формат команды имеет следующий вид:
jpegoptim [options] <filenames>
где options – набор опций через пробел; filenames – имя обрабатываемого файла изображения.
Обработаем файл jpegoptim_test1.jpg с помощью следующей команды:
$ jpegoptim ./jpeg_bin/jpegoptim-master/test/jpegoptim_test1.jpg
На выходе мы получили полную информацию о характеристиках изображения и результатах проведенной оптимизации:
2100x1500 24bit P Exif IPTC XMP ICC Adobe [OK] 320159 --> 309419 bytes (3.35%) optimized
Здесь, в частности, указаны: разрешающая способность изображения, его цветность (24bit), комментарии, информация о владельце и результат обработки – произведено сжатие на 3.35% без ухудшения качества оригинала.
Уточним новый размер файла после его обработки:
$ du ./jpeg_bin/jpegoptim-master/test/jpegoptim_test1.jpg
Результат – 304 Kб. Ранее было 316 Кб, то есть, оценка программой степени сжатия произведена верно.
В случае, если необходимо сжать файл изображения до определённого размера, например, 200 Кб, можно воспользоваться параметром –size. Введём в командной строке:
$ jpegoptim --size=200k ./jpeg_bin/jpegoptim-master/test/jpegoptim_test1.jpg
Результат: 302333 --> 206855 bytes (31.58%), optimized. То есть мы получили файл, сжатый на 31.58% с потерей качества.
В случае, если файлов много, можно применить так называемое пакетное сжатие. Перейдём в директорию test, содержащую jpg-файлы, и выполним их базовую обработку:
$ cd ./jpeg_bin/jpegoptim-master/test/
$ jpegoptim *.jpg
Результат – ОК, обработка прошла успешно.
Утилита OptiPNG
Работает с графическим форматом PNG (Portable Network Graphics), ориентированным на получение растровых изображений без потери качества. Есть реализации под все POSIX-совместимые операционные системы, а также Windows. Программа является производным аналогом хорошо известной свободно распространяемой утилиты Pngcrush, комбинирующей методы сжатия и возможности дельта-фильтров. На выходе получают оптимизированные изображения со 100% сходством с оригиналом.
В OptiPNG для сжатия изображений используется алгоритм Deflate. Используя различные варианты реализаций алгоритма, утилита позволяет получить наилучшее сжатие для каждого конкретного файла без потери качества изображения .
Утилита включена в состав хорошо известного инструментария Google Page Speed, служащего для оптимизации работы сайтов, что говорит само за себя.
Среди возможностей утилиты можно выделить следующие:
- Оптимизация png-файлов под потребности пользователя;
- Преобразование графических форматов PNM, BMP, TIFF и GIF в оптимизированный PNG формат.
Рассмотрим установку программы и принципы работы с ней.
Установка OptiPNG
В первой части статьи мы уже рассмотрели процесс подготовки программной среды перед установкой нового ПО, поэтому сразу начнём с установки программы на наш сервер Ubuntu.
Запустим процесс установки с помощью следующей команды:
$ sudo apt install optipng
Результат – Setting up optipng (программа успешно установлена).
Работа с OptiPNG
Для начала попытаемся найти файлы нужных форматов на нашем сервере:
$ find . -name "*.png"
$ find . -name "*.bmp"
$ find . -name "*.gif"
Как видим, такие файлы здесь отсутствуют, поэтому загрузим их с удалённого сервера в заранее подготовленную директорию downloads:
$ scp alexandr75001@176.9.11.135:./alexandr75001/site.png ~/downloads
где 176.9.11.135 – IP-адрес удалённого сервера, alexandr75001 – имя учётной записи его пользователя.
$ scp alexandr75001@176.9.11.135:./alexandr75001/gamma_okna.gif ~/downloads
Просмотрим справочную информацию по доступным опциям утилиты:
$ optipng -h
Как видим, утилита имеет следующий общий формат команды запуска:
optipng [options] files
где options – список опций, которые разделяются на основные (General), оптимизационные (Optimization options) и для редактирования изображений (Editing options).
Для примера, оптимизируем файл с именем site.png. Это можно сделать с помощью следующей команды:
$ optipng ~/downloads/site.png
Результат:
** Processing: /root/downloads/site.png
16x16 pixels, 8 bits/pixel, 14 colors (14 transparent) in palette
Reducing image to 4 bits/pixel, 14 colors (14 transparent) in palette
Input IDAT size = 180 bytes
Input file size = 370 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 108
Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 108
Output IDAT size = 108 bytes (72 bytes decrease)
Output file size = 298 bytes (72 bytes = 19.46% decrease)
В итоге мы получили полную информацию о параметрах изображения и результатах обработки: разрешение, глубину цвета (8 bits/pixel), количество цветов в палитре, входной размер IDAT-блока, входной размер файла (370 bytes), выходной размер IDAT-блока, выходной размер файла (298 bytes), а также значения ряда параметров.
В результате обработки размер файла был уменьшен на 19.46%.
Утилита позволяет добавить произвольное количество уровней оптимизации изображения с помощью соответствующих опций. Воспользуемся этой возможностью и увеличим для того же файла количество уровней с одного до семи:
$ optipng -o7 ~/downloads/site.png
Теперь воспользуемся возможностями программы по преобразованию форматов и преобразуем gif-файл в png-файл. Для этого введём в командной строке терминала:
$ optipng -snip ~/downloads/gamma_okna.gif
Выход команды:
** Processing: /root/downloads/gamma_okna.gif
Importing GIF (multi-image or animation); snipping...
160x240 pixels, 8 bits/pixel, 32 colors (18 transparent) in palette
Reducing image to 8 bits/pixel, 17 colors in palette
Input file size = 4787 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 2204
zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 2158
Selecting parameters:
zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 2158
Output file: /root/downloads/gamma_okna.png
Output IDAT size = 2158 bytes
Output file size = 2278 bytes (2509 bytes = 52.41% decrease)
** Status report
1 file(s) have been processed.
1 multi-image file(s) have been snipped.
В результате мы получили png-файл, сжатый на 52.41% по сравнению с исходным gif-файлом. Эффективность сжатия очевидна.
Просмотрим содержимое каталога downloads, чтобы убедиться в появлении ещё одного файла с именем gamma_okna, имеющего png-формат:
$ cd downloads
$ ls –l
Можно убедиться в наличии всех трёх файлов.
Мы продемонстрировали лишь часть возможностей утилиты, которые могут быть полезны для использования в рабочей среде Linux-сервера, но и этого достаточно, чтобы увидеть её возможности по оптимизации файлов изображений.
