У складі файлів будь-якого користувацького веб-застосунку обов’язково присутні файли зображень, представлених в одному з графічних форматів. Зазвичай вони складають значну частину загального розміру сайту, який він займає на сервері, і мають тенденцію «розростатися» з часом у зв’язку з додаванням нового контенту. З цих, а також з низки інших причин, актуальним є завдання оптимізації розміру файлів зображень без помітної втрати якості. Для цих цілей адміністраторами використовується низка утиліт, найвідоміші з яких — JPEGOptim і OptiPNG. Розглянемо роботу з ними на конкретних прикладах.
Утиліта JPEGOptim
Використовується під час обробки jpeg-зображень для отримання керованої якості зображень та/або потрібного їх розміру. Є версії під Linux і Windows. Програма дозволяє використовувати три режими кодування, які підтримує формат JPEG: послідовне зі втратою якості (sequential), оптимізоване прогресивне (progressive) і стиснення без втрат (lossless). Задати той чи інший режим обробки зображень можна за допомогою відповідних опцій під час запуску програми.
Найкорисніші опції:
- all-progressive – встановлює режим обробки progressive jpeg;
- -t – показує результати обробки для кількох зображень;
- strip-all – видаляє ICC-коментарі та інші;
- -mx – встановлює заданий рівень якості, де x – показник якості від 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
Результат — OK, обробка пройшла успішно.
Утиліта 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 [email protected]:./alexandr75001/site.png ~/downloads
де 176.9.11.135 – IP-адреса віддаленого сервера, а alexandr75001 – ім’я облікового запису його користувача.
$ scp [email protected]:./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-сервера, але й цього достатньо, щоб оцінити її ефективність при оптимізації файлів зображень.