Автор: Maxim
16.12.2016

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




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

Чтобы проверить ваш сайт на загружаемость - переходим на сайт гугла: 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 по серверному времени.




ВСЁ!

До:

После:

Скачать

Поддержать автора

собрано 0.00 монет Поддержать автора

Войдите на сайт


Все собранные средства будут переданы автору этой статьи - Maxim
Сумма перевода от 1.00 монета до 10000.00 монет

Комментарии

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

Опубликовано · Жалоба

· #1

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

Опубликовано · Жалоба

· #2

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

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

Опубликовано · Жалоба

· #3

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

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

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

Опубликовано · Жалоба

· #4

Спасибо большое автору, прошелся по своим сайтам, скорость увеличил с 75 до 95, и место на сервере освободил. А картинок было более 1 000 000, довольно быстро сжало. По качеству разницы не заметил. Слежу теперь за Вашими постами. Спасибо Вам

Опубликовано · Жалоба

· #5

Добрый вечер. Подскажите в чем может быть проблема, скрипт ошибку выдает. Спасибо