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

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

Без зміни вихідних файлів

Оптимізація зображень на льоту без зміни вихідних файлів можлива за допомогою наступних опцій модуля PageSpeed:

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

Зі зміною вихідних файлів

Увага!

Перед виконанням дій обов'язково створіть резервну копію сайту на випадок, якщо щось піде не так.

На серверах хостингу за замовчуванням доступні утиліти для оптимізації файлів зображень популярних форматів:

Їх можна використовувати безпосередньо через консоль або створити власний скрипт, який буде звертатися до них і виконувати необхідні операції. Є багато готових скриптів для оптимізації зображень, які представляють собою набір команд для перерахованих утиліт.

Готовий скрипт

Увага!

Скрипт некоректно працює з файлами з кирилицею в назві.
Після оптимізації всі отримані файли будуть поміщені в один з каталогів:
  • Або в каталог, вказаний після ключа -o.
  • Або в підкаталог output поточного каталогу, якщо ключ -o не був вказаний.

Для оптимізації файлів 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 --help
Зміст