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

​

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

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

​

Задаём следующие параметры:

Code:

apt-get update && apt-get install jpegoptim optipng

Затем задаём следующую команду:

Code:

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. Его и ставьте.
Выполняем и ждём.

​

ВСЁ!

До:

​

После:

​

 

поможете мне с оптимизацией изображения? На сайте много материалов, нужно все изображения оптимизировать, вручную как то долго получается

 

@MaHarder, красавчик!)) Отличный гайд - спасибо огромное!))

 

а для чего я писал вам это?
у меня более 10000 постеров, которые шринк обработал за пару часиков. если это не устраивает, то через jpegoptim/optipng

 

На главной около 60 изображений,скорость 88 изображение не оптимизовываю, пользуюсь скриптом timthumb.php доволен. Там есть дырка но ее можно закрыть

 

Добрый день.

Есть ошибки в приведенных вами командах. Первая часть команды:
find /var/www/путь/до/сайта/uploads/posts -name *.jpg -exec jpegoptim --strip-all '{}'
нужно указать выбор только файлов, исключив папки
-type f
Также кавычки для скобок не нужны, можно просто {}. Это не ошибка, но просто лишние символы, find и без этого обработает корректно любой файл, независимо от языка названия и символов.

Вторая часть команды:
find /var/www/путь/до/сайта/uploads/posts -name *.png -exec optipng -o7 '{}' \;
та же ошибка.

Третья часть:
chmod -R 777 /var/www/путь/до/сайта/uploads/posts
Самый дурной совет! Создается уязвимость в сайте!

4-я часть:
sudo chown -R ЮЗЕР* /var/www/путь/до/сайта/uploads/posts

Второе, нужно использовать не "ЮЗЕР*", а "ЮЗЕР:" ! Иначе будет ошибка:
chown: invalid user: ‘ЮЗЕР*’

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

С уважением!

 

Как вариант можно ужать следующим образом:

Code:

find /home/user/public_html/images -iname *.jpg | xargs jpegoptim --max=90 --all-progressive --strip-all --strip-com --strip-exif --strip-iptc --strip-icc

find public/images/ -iname *.png -print0 |xargs -0 optipng -o7

 

по какой-то причине - изображения имеют права 666 (по моему), из-за чего они и не отображаются на сайте. .хтаксесс можно потом и ручками поправить )
спасибо за уточнения. только начал осваиваться

спасибо

 

у меня наоборот, такая ошибка была когда : ставил.

 

разрешена загрузка картинок с других сайтов http://prntscr.com/8rklex и за этого много сайтов поломали.как именно не знаю.типа картинку подгружают с шелом она кешируется а кеш оседает на сайте с этим шелом.просто удаляешь загрузку с других сайтов.и кеш прописываеш что б кешировалась в папке
cache

 

видать у вас не убунту/дебиан

 

55 постеров на главной http://prntscr.com/8rnedk скорость 87

 

А как массово перевести png в jpg? По началу делал скрины в формате png, со временем понял, что гружу сильно хостинг. Сейчас использую формат jpg. Как мне массово можно перевести формат старых скринов?

 

скрины добавляются через доп поле - [thumb=left]http://site.ru/uploads/posts/2014-06/2405671384_t6i0qqp.png[/thumb]. Если перевести все картинки с сервера в jpg, то старые скрины не отображаются из за смены формата... Может через SQL как то можно перевести значение всех png в jpg???

 

программой https://yadi.sk/d/Su09QdtWgbJsK

 

так http://prntscr.com/8rnnlz