Приветствую!

Это новый и обновлённый сайт maxim-harder.de! Если вы были зарегистрированы на старом сайте, то восстановите свой пароль на сайте!

Создай свой аккаунт!

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

Maxim

Проверенный
Команда форума
Регистрация
17 Фев 2015
Сообщения
17
Симпатии
0
Баллы
526
#1
Наверное, многие сталкивались из вас с тем, что сайт долго грузит, а всё из-за того, что изображения на сайте очень тяжёлые. Бывает, что даже на быстрых линиях - нужно подождать некоторое время. И за всё время, что я провёл в сети в поисках ответов на мой вопрос - я наткнулся на пару фич и программ, которые помогают мне и по сей день.

Чтобы проверить ваш сайт на загружаемость - переходим на сайт гугла: 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
Программка интегрируется в меню (когда вы нажимаете правой кнопкой мыши [ПКМ] по файлу), что очень удобно. И всё, что нам нужно сделать - выбрать изображения и послать их в программку.
1439342480_2015-08-12-03-19-39-screenshot[1].png
Открывается окно. Жмём на "Добавить задачу"
1439342996_2015-08-12-03-21-45-screenshot[1].png
Настраиваем так, чтобы программа оптимизировала под веб.
1439342985_2015-08-12-03-22-20-screenshot[1].png
Настраиваем
1439343010_2015-08-12-03-22-53-screenshot.png
Запускаем.
1439342924_2015-08-12-03-23-25-screenshot.png
Будет говорить, что файлы будут перезаписаны. На что я отвечаю "ДА". и Жду окончания.
1439342990_2015-08-12-03-23-59-screenshot.png
1439342954_2015-08-12-03-24-26-screenshot.png
1439342977_2015-08-12-03-25-04-screenshot.png

На этом всё.
Если у вас на сайте выводятся картинки одной величины или как у меня постеры, которым хватает быть всего-лишь одного размера, то делаем следующее:
Идём "Добавить задачу".
1439342998_2015-08-12-03-26-00-screenshot.png
Настраиваем ресайз под себя.
1439342931_2015-08-12-03-26-32-screenshot.png
Не забываем выставить эту задачу ПЕРЕД оптимизацией. Запускаем. Вуаля!
1439342973_2015-08-12-03-27-16-screenshot.png

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

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


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

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


Начнём. Открываем программку.
1439344025_2015-08-12-03-42-38-screenshot.png
1439344028_2015-08-12-03-43-08-screenshot.png
Настраиваем размеры:
1. По пикселям. ВАЖНО! Когда вы убираете галочку с ненужного параметра, то он не будет принят во внимание. Эти путает, так как другая галочка гаснет сразу же. Ресайз идёт автоматический, т.е. другая сторона подстраивается.
2. По процентам.
1439344045_2015-08-12-03-44-08-screenshot.png
Думаю - здесь всё понятно.
1439344064_2015-08-12-03-44-40-screenshot.png
1. как обрабатывать название
2. куда сохранять. если не указано, то на исходное место.
1439344085_2015-08-12-03-45-12-screenshot.png
перетягиваем изображения и / или папку(и) сюда.
1439344016_2015-08-12-03-45-42-screenshot.png
Ждём! Всё!

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

2. Через сервер
Это будет интересно тем, у кого есть root доступ к SSH сервера.
Заходим рутом в консоль (использую PuTTY).
1439345017_2015-08-12-03-54-39-screenshot.png
Задаём следующие параметры:
Bash:
apt-get update && apt-get install jpegoptim optipng
Затем задаём следующую команду:
Bash:
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. Его и ставьте.
Выполняем и ждём.
1439344973_2015-08-12-04-00-30-screenshot.png

2.1 всё в одном и по крону
Открываем консоль выполняем следующую команду:
Bash:
apt-get update && apt-get install jpegoptim optipng advancecomp libjpeg-progs gifsicle
Затем скидываем скрипт images.sh (ниже) в папку с изображениями. Идём в панель управления над сервером и переходим в пункт "Запланированные задания", он же "Крон", и прописываем следующее:
Bash:
59 23 * * * /путь/до/сайта/на/сервере/uploads/posts/images.sh
Скрипт будет запускаться каждый день в 23:59 по серверному времени.
1481879200_148188296093_kiss.png 1481879585_148188327949_kiss.png 1481879534_148188334443_kiss.png

ВСЁ!

До:
1439345049_2015-08-12-04-00-53-screenshot.png
После:
1439361366_2015-08-12-08-30-10-screenshot.png
 

Вложения

Сверху Снизу