Масово оптимізуємо всі фото на сайті для Google PageSpeed ​​Insights

  1. Догоджаємо Google - мініфіціруем все і вся
  2. Чим оптимізувати JPG / JPEG?
  3. Як використовувати jpegoptim
  4. Чим оптимізувати PNG?
  5. Примітки

Думаю, немає жодного власника сайтів, який не зіткнувся з інструментом PageSpeed Insights і його вимогами до оптимізації зображень. З знову додаються картинками все більш-менш зрозуміло і існує маса модулів практично для будь-яких CMS, що дозволяють оптимізувати картинку в момент завантаження. А ось зі старими фотографіями, накопиченими роками, не все так просто і масово оптимізувати їх за допомогою модулів не завжди можливо.

Догоджаємо Google - мініфіціруем все і вся

Через що наші фотографії і картинки не оптимальні для web і на що дивиться Google? Не повірите, але від якості :) будь-яка оптимізація зменшує якість зображення за рахунок підміни близьких за параметрами квітів до єдиного і згладжування зображення (якщо висловлюватися зовсім грубо).

Як це не дивно, але розмір залежить не тільки від самого фото, але і від його метаданих. Якщо ви просто завантажили фото з телефону на сайт, разом з фотографією передалися кілобайти додаткових даних у вигляді дати зйомки, місця, власника і службових коментарів, боротися з якими необхідно очищенням meta інформації файлів, але сьогодні саме про графіку. Почитавши мануали Гугла [1] ми побачимо, що гігант рекомендує використовувати ряд інструментів для стиснення JPEG і PNG файлів без впливу на якість картинки (візуально без впливу).

Чим оптимізувати JPG / JPEG?

Для JPG / JPEG рекомендують встановити і використовувати jpegtran або jpegoptim. Обидва плагіна дають схожі результати і вибір залишається за вами, ми використовуємо jpegoptim.

Як використовувати jpegoptim

Всі роботи в прикладах ми проводимо на сервері з CentOS

yum install jpegoptim

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

find / home / -name * .jpg -exec jpegoptim --strip-all '{}' \

Після виконання даної команди все зображення даного формату на сайті будуть оптимізовані і переписані новими

Чим оптимізувати PNG?

Для PNG рекомендують встановити і використовувати OptiPNG або PNGOUT

yum install optipng

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

find / home / -name * .png -exec optipng -o4 '{}' \

Все як і в випадку з jpg. У прикладі є додатковий параметр -o4, який є ключем -oX, в якому про - optimixation, а X - рівень стиснення ваших фотографій, який може бути від 1 до 7. Особисто я не рекомендую виставляти в ключ значення більше 4.

Після того як обидві команди завершать свою роботу, можна йти в PageSpeed [3] і радіти поліпшенню результатів і прискорення [2] завантаження сайту.

Думаю, немає жодного власника сайтів, який не зіткнувся з   інструментом PageSpeed Insights   і його вимогами до оптимізації зображень

Примітки

  1. рекомендації Google до зображень на сайті.
  2. приклад прискорення корпоративного сайту на Бітрікс.
  3. Перевірка сайту в PageSpeed .

Чим оптимізувати JPG / JPEG?