- Догоджаємо Google - мініфіціруем все і вся
- Чим оптимізувати JPG / JPEG?
- Як використовувати jpegoptim
- Чим оптимізувати PNG?
- Примітки
Думаю, немає жодного власника сайтів, який не зіткнувся з інструментом 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] завантаження сайту.
Примітки
- рекомендації Google до зображень на сайті.
- приклад прискорення корпоративного сайту на Бітрікс.
- Перевірка сайту в PageSpeed .
Чим оптимізувати JPG / JPEG?