Ми використовуємо cookie-файли
Для оптимізації роботи нашого сайту ми використовуємо cookie-файли. Продовжуючи використовувати сайт, Ви погоджуєтеся з використанням cookie-файлів.
Новий дизайн
Панель керування
  • Русский
  • Українська
  • English
  • UAH
  • USD
  • RUB
  • EUR
  • 0-800-307-307 Гаряча лінія
  • +38 (044) 392-74-33 Київ
  • +38 (057) 728-39-00 Харків
  • +38 (056) 794-38-31 Дніпро
  • +38 (032) 229-58-93 Львів
  • +38 (048) 738-57-70 Одеса
  • +38(093) 170-15-42  Life
  • +38 (067) 400-88-44 Київстар
  • +1(888)393-24-51  USA, Toll free
  • +44(131)507-01-14  Great Britain
  • +7 (499) 348-28-61 Москва

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

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

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

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

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

Ними можна скористатися безпосередньо через консоль, підключившись до хостингу по 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

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

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

optipng

Утиліта стиснення та оптимізації зображення, створена на основі 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

gifsicle

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

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

gifsicle -03 --lossy=80 -o оптимізований_файл.gif вихідний_файл.gif
  • Для вказівки ступеня стиснення потрібно змінити значення параметра –lossy=XX.

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

gifsicle --help

jpegoptim

Утиліта для оптимізації зображень 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

jpegtran

Ще одна утиліта для оптимізації зображень 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