2.19.6. оптимізація зображень

Оптимізувати зображення можна декількома способами:

• Без зміни вихідних файлів - файли перетворюються сервером на льоту.
• Зі зміною вихідних файлів - файли перетворюються заздалегідь за допомогою спеціалізованих утиліт.

Оптимізація без зміни вихідних файлів можлива завдяки модулю PageSpeed. Для цього в його налаштуваннях можна включити такі опції:

• inline_images - дозволяє вбудовувати невеликі зображення безпосередньо в HTML у вигляді data: URL, Що скорочує число запитів до сервера, необхідне для побудови сторінки.
• recompress_images - прискорює завантаження зображень, на льоту видаляючи з них надлишкову інформацію (метадані та колірні профілі ICC) і перетворюючи в найбільш підходящий формат (включає в себе конвертацію в формат WebP, якщо браузер клієнта його підтримує).
• resize_images - прискорює завантаження великих зображень, стискаючи їх до того розміру, в якому вони відображаються на сторінці.

На серверах хостингу присутній ряд утиліт, За допомогою яких можна оптимізувати файли зображень.

• PNG:
  • pngcrush
  • optipng
• GIF:
  • gifsicle
• JPG/JPEG:
  • jpegoptim
  • jpegtran

Ними можна скористатися безпосередньо через консоль, підключившись до хостингу по SSH. Також можна створити власний скрипт, який буде звертатися до них і виконувати необхідні операції. Існує безліч вже готових скриптів для оптимізації зображень, Ці скрипти зазвичай включають в себе лише набір команд для зазначених утиліт і по черзі запуск для відповідних зображень.

Наприклад, для оптимізації файлів JPG / JPEG і PNG можна використовувати такий bash-скрипт.

Щоб завантажити і запустити скрипт оптимізації, виконайте команди:

wget https://gist.githubusercontent.com/lgiraudel/6065155/raw/24f667559eee61dd00a99a9940e06b46a125d3ec/optimize.sh 
sh optimize.sh -i ~/example.com/images/input -o ~/example.com/images/output

Параметри:

• -i або --input - визначає каталог, в якому розташовані оптимізуються зображення.
• -o або --output - визначає каталог, куди будуть зберігатися всі оптимізовані зображення.
• -q або --quiet - відключає виведення всіх дій.
• -s або --no-stats - відключає висновок статистики розміру.
• -h або --help - висновок довідки за вказаними ключам.

Скрипт використовує утиліти:

• pngcrush
• optipng
• jpegtran

Утиліта для оптимізації зображень без втрати якості. синтаксис:

pngcrush опції вихідний_файл.png оптимізований_файл.png

Варіанти використання утиліти:

• Максимальне стиснення без втрати якості:

  pngcrush -rem alla -rem text -reduce -brute початковий_файл.png оптимізований_файл.png

• Оптимізація файлів в каталозі без переміщення:

  for file in ~/example.com/www/images/*.png ; do pngcrush -reduce -brute -rem alla -rem gAMA -rem cHRM -rem iCCP -rem sRGB "$file" "${file%.png}-crushed.png" && mv "${file%.png}-crushed.png" "$file" ; done

  • Замість example.com/www/images вкажіть шлях до каталогу з зображеннями. Зверніть увагу, оптимізація не проводиться рекурсивно по всіх каталогах, а обмежується тільки зазначеним.
  • Кінцевий оптимізований файл замінить вихідний.

Більш детальну інформацію по роботі з утилітою можна отримати за допомогою команди:

pngcrush --help

Утиліта стиснення та оптимізації зображення, створена на основі pngcrush. Формати зображень, які можуть бути перетворені в оптимізований PNG:

• PNG
• BMP
• GIF
• PNM
• TIFF

Для оптимізації одиничного файлу потрібно виконати команду (Файл автоматично буде перетворений і замінений оптимізованою версією):

optipng ~/example.com/www/images/image.png

Для оптимізації всіх файлів в одному каталозі потрібно виконати команду:

find ~/example.com/www/images/ -iname *.png -print0 | xargs -0 optipng -o7

• Замість example.com/www/images/ вкажіть шлях до каталогу зображень.
• Замість *.png вкажіть потрібний формат файлів у вигляді *.bmp або інші.

Більш детальну інформацію по роботі з утилітою можна отримати, виконавши команду:

optipng --help

Утиліта для роботи з анімованими GIF-файлами. З її допомогою можна проводити безліч дій: оптимізувати, масштабувати, обрізати.

Оптимізація GIF-анімації з втратою якості:

gifsicle -03 --lossy=80 -o оптимізований_файл.gif вихідний_файл.gif

• Для вказівки ступеня стиснення потрібно змінити значення параметра –lossy=XX.

Більш детальну інформацію по роботі з утилітою можна отримати, виконавши команду:

gifsicle --help

Утиліта для оптимізації зображень JPEG і JPG.

Популярні способи використання утиліти:

• Оптимізація одиничного файлу:

  jpegoptim image.jpg

  • Для оптимізації всіх файлів .jpg в каталозі потрібно виконати команду так:

    jpegoptim ~/example.com/www/images/*.jpg

    • Замість example.com/www/images/ вкажіть шлях до каталогу зображень.
• Видалення всіх метаданих зображення:

  jpegoptim image.jpg --strip-all

• Перетворення в прогресивний JPEG:

  jpegoptim image.jpg --all-progressive

• Оптимізація зображення з втратою якості:

  jpegoptim -m85 image.jpg

  • Для управління рівнем якості оптимізованого зображення потрібно змінити значення ключа -mXX.

Більш детальну інформацію по роботі з утилітою можна отримати, виконавши команду:

jpegoptim --help

Ще одна утиліта для оптимізації зображень JPEG і JPG без втрати якості.

Популярні способи використання утиліти:

• Оптимізація одиничного файлу:

  jpegtran -copy none -optimize -outfile оптімізірофанний_файл.jpg вихідний_файл.jpg

  • Видалення метаданих зображення виробляються за допомогою ключа -copy none.
• Оптимізація і перетворення в прогресивний JPEG:

   jpegtran -copy none -optimize -progressive -outfile оптімізірофанний_файл.jpg вихідний_файл.jpg

• Оптимізація зі зміною якості:

  jpegtran -quality 80 -copy none -optimize -outfile оптімізірофанний_файл.jpg вихідний_файл.jpg

  • Для управління рівнем погіршення якості потрібно змінити значення ключа -quality XX.

Більш детальну інформацію по роботі з утилітою можна отримати, виконавши команду:

jpegtran --help