Сжатие и / или оптимизация изображений

16. дек, 2016 3

Сжатие и / или оптимизация изображений

Наверное, многие сталкивались из вас с тем, что сайт долго грузит, а всё из-за того, что изображения на сайте очень тяжёлые. Бывает, что даже на быстрых линиях - нужно подождать некоторое время. И за всё время, что я провёл в сети в поисках ответов на мой вопрос - я наткнулся на пару фич и программ, которые помогают мне и по сей день.

Чтобы проверить ваш сайт на загружаемость - переходим на сайт гугла: https://developers.google.com/speed/pagespeed/insights/
Для начала, скопируйте всю папку upload с сервера на ваш компьютер. (Лучше ту папку, где хранятся ваши изображения)
В моём случае - эта папка весит около 1.5 гигов.

Начнём.
Я покажу вам оптимизацию с серверной стороны (у кого есть рут доступ) и при помощи программок.

1.Программы
Пока папка качается, можно установить две программки: ImBatch и Shrink-O-Matic.
ImBatch: http://www.highmotionsoftware.com/ru/products/imbatch
Shrink-O-Matic: http://toki-woki.net/p/Shrink-O-Matic/

ImBatch
Программка интегрируется в меню (когда вы нажимаете правой кнопкой мыши [ПКМ] по файлу), что очень удобно. И всё, что нам нужно сделать - выбрать изображения и послать их в программку.
Сжатие и / или оптимизация изображений

Открывается окно. Жмём на "Добавить задачу".
Сжатие и / или оптимизация изображений
Настраиваем так, чтобы программа оптимизировала под веб.
Сжатие и / или оптимизация изображений
Настраиваем
Сжатие и / или оптимизация изображений
Запускаем.
Сжатие и / или оптимизация изображений
Будет говорить, что файлы будут перезаписаны. На что я отвечаю "ДА". и Жду окончания.
Сжатие и / или оптимизация изображений
Сжатие и / или оптимизация изображений
Сжатие и / или оптимизация изображений

На этом всё.
Если у вас на сайте выводятся картинки одной величины или как у меня постеры, которым хватает быть всего-лишь одного размера, то делаем следующее:
Идём "Добавить задачу".
Сжатие и / или оптимизация изображений
Настраиваем ресайз под себя.
Сжатие и / или оптимизация изображений
Не забываем выставить эту задачу ПЕРЕД оптимизацией. Запускаем. Вуаля!
Сжатие и / или оптимизация изображений

Плюсы программы:

  • Быстрая
  • Встроена в меню
  • Многофункциональна
  • Есть русский язык (по некоторым причинам я переставил на английский)
  • Даёт результат

Минусы:
  • Не годна для огромных количеств
  • Проблемы для иностранных компов в плане руссификации. У меня немецкая винда стоит и даже при российском уникоде, многие символы плохо отображаются


Shrink-O-Matic
Программка устанавливается при помощи Adobe Air. Будет предложено установить её, если такой нет на компе. Иначе работать не будет.
Сразу плюсы:
  • Заточена под оптимизацию
  • Лёгкая
  • Может обработать огромный поток данных (проверенно)

Минусы:
  • Не столь гибкая, как ImBatch
  • Заточена для оптимизации


Начнём. Открываем программку.
Сжатие и / или оптимизация изображений
Сжатие и / или оптимизация изображений
Настраиваем размеры:
1. По пикселям. ВАЖНО! Когда вы убираете галочку с ненужного параметра, то он не будет принят во внимание. Эти путает, так как другая галочка гаснет сразу же. Ресайз идёт автоматический, т.е. другая сторона подстраивается.
2. По процентам.
Сжатие и / или оптимизация изображений
Думаю - здесь всё понятно.
Сжатие и / или оптимизация изображений
1. как обрабатывать название
2. куда сохранять. если не указано, то на исходное место.
Сжатие и / или оптимизация изображений
перетягиваем изображения и / или папку(и) сюда.
Сжатие и / или оптимизация изображений
Ждём! Всё!

Итог: Если у вас изображения не статического размера и не так много изображений, то ImBatch самое то. А для более объёмных работ - Shrink-O-Matic.

2. Через сервер
Это будет интересно тем, у кого есть root доступ к SSH сервера.
Заходим рутом в консоль (использую PuTTY).
Сжатие и / или оптимизация изображений
Задаём следующие параметры:
apt-get update && apt-get install jpegoptim optipng

Затем задаём следующую команду:
find /путь/до/папки/с/картинками/public_html/uploads/posts -name '*.jpg' | xargs jpegoptim -m85 --strip-all && find /путь/до/папки/с/картинками/public_html/uploads/posts '*.png' -print -exec optipng -o7 -quiet -keep -preserve {} \; && chmod -R 777 /путь/до/папки/с/картинками/public_html/uploads/posts && sudo chown -R admin /путь/до/папки/с/картинками/public_html/uploads/posts

Заменяем пути.
ЮЗЕР* - у меня на сервере два юзера, рут и тот пользователь, который управляет FTP. Его и ставьте.
Выполняем и ждём.
Сжатие и / или оптимизация изображений

2.1 всё в одном и по крону
Открываем консоль выполняем следующую команду:
apt-get update && apt-get install jpegoptim optipng advancecomp libjpeg-progs gifsicle

Затем скидываем скрипт images.sh (ниже) в папку с изображениями. Идём в панель управления над сервером и переходим в пункт "Запланированные задания", он же "Крон", и прописываем следующее:
59 23 * * * /путь/до/сайта/на/сервере/uploads/posts/images.sh

Скрипт будет запускаться каждый день в 23:59 по серверному времени.
Сжатие и / или оптимизация изображенийСжатие и / или оптимизация изображенийСжатие и / или оптимизация изображений


images.zip
ТИП: zip
Скачиваний:
8
Размер:
1.24 Kb
Дата загрузки:
16 дек.,2016 в 10:12
MD5:
9d0e0f8beb9c3fd7149d168d06e5bf85


ВСЁ!

До:
Сжатие и / или оптимизация изображений
После:
Сжатие и / или оптимизация изображений



Комментарии

Оставьте свой отзыв, комментарий или даже вопрос на тему Сжатие и / или оптимизация изображений

Автор kinoliux

25 октября 2016 12:30

Посетители 3 0

Спасибо администрации сайта за столь внятный мануал по оптимизации картинок для сайта. В google много инфы по этой теме, но Максим всё так сказать "разжевал" осталось только проглотить wink
Для меня более подошла программа ImBatch.

2 нравится

Автор Maxim

25 октября 2016 12:33

Администраторы 8 43

Цитата: kinoliux
Спасибо администрации сайта за столь внятный мануал по оптимизации картинок для сайта. В google много инфы по этой теме, но Максим всё так сказать "разжевал" осталось только проглотить wink
Для меня более подошла программа ImBatch.

Всегда пожалуйста, вскоре обновлю его, есть скрипт, который автоматизирует весь этот процесс и пережимает картинки хорошенько и без потери качества

1 нравится

Автор kinoliux

25 октября 2016 12:51

Посетители 3 0

Цитата: Maxim
Цитата: kinoliux
Спасибо администрации сайта за столь внятный мануал по оптимизации картинок для сайта. В google много инфы по этой теме, но Максим всё так сказать "разжевал" осталось только проглотить wink
Для меня более подошла программа ImBatch.

Всегда пожалуйста, вскоре обновлю его, есть скрипт, который автоматизирует весь этот процесс и пережимает картинки хорошенько и без потери качества

Это было бы совсем идеально, так как любой автоматизированный процесс это экономия времени, а время в нашем деле это деньги.

0 нравится