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

Коли критичні помилки по швидкодії завантаження веб-сторінок виправлені, можна взятись за оптимізацію картинок. Тим паче на Linux/UNIX системах є чудові утиліти для цього.

  • JPEGoptim — утиліта для оптимізації файлів формату JPEG/JFIF;
  • OptiPNG — утиліта для оптимізації PNG зображень. Також може служити для конвертації зображень формату BMP, GIF, PNM і TIFF в PNG.

Спробуємо рекурсивно обійти певну папку (напр., /some/folder/) і оптимізувати всі зображення в ній (і її підпапках). Я робив це на FreeBSD.

Рекурсивна оптимізація JPG зображень

find "/some/folder/" -type f -iname "*.jpg" -exec jpegoptim --all-progressive --strip-all -fpPm85 {} \;

де:

  • --all-progressive — файли будуть оптимізовані в прогресивний JPEG;
  • --strip-all — видаляти маркери коментарів;
  • -f — примусово оптимізувати, навіть якщо новий (оптимізований) файл більший за оригінальний;
  • -p — зберегти час створення;
  • -P — зберегти права такими ж, як в оригінального файлу.

Для тесту і додаткової інформації

  • -n — не виконувати реальну оптимізацію, просто показати попередній результат;
  • -t — показати підсумковий результат оптимізації;

Впливає на якість зображення!

  • -m85 — встановити максимальне стиснення JPEG рівним, напр., 85.

Рекурсивна оптимізація PNG зображень

find "/some/folder/" -type f -iname "*.png" -exec optipng -strip all -force -preserve {} \;

де:

  • -strip all — очистити будь-яку інформацію у всіх полях, крім tRNS;
  • -force — примусово оптимізувати, навіть якщо новий файл виходить більшим за оригінальний або має цифровий підпис dSIG.
  • -backup — зберегти резервну копію зміненого зображення;
  • -preserve — зберегти час створення та права.

Для тесту

  • -simulate — запуск в режимі симуляції, файли залишаються без змін;

Впливає на якість зображення!

  • -o3 — вказує ступінь стиснення, від 1 до 7. За замовчуванням — 2.

Перевірити, чи потребують ваші зображення оптимізації можна на PageSpeed Insights.

Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0