У складі файлів будь-якого користувацького веб-додатка обов'язково присутні файли зображень, представлених в одному з графічних форматів. Зазвичай вони становлять значну частину загального розміру сайту, займаного ним на сервері, і мають тенденцію "розростатися" з часом у зв'язку з додаванням нового контенту. З цих, а також з низки інших причин актуальним є завдання оптимізації розміру файлів зображень без помітної втрати якості. Для цих цілей Адміністраторами використовується низка утиліт, найвідоміші з яких - 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 Кб. Раніше було 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-сервера, але й цього достатньо, щоб побачити її можливості з оптимізації файлів зображень.
