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

[MaHarder]

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

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

 

[MaHarder]

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

ВСЁ!

До:

После:

 

[Садияр]

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

 

[tish88]

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

 

[MaHarder]

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

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

 

[Romantv]

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

 

[paxim]

Добрый день.

Есть ошибки в приведенных вами командах. Первая часть команды:
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: ‘ЮЗЕР*’

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

С уважением!

 

[Keiskar]

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

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

 

[MaHarder]

Самый дурной совет! Создается уязвимость в сайте!

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

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

спасибо

 

[MaHarder]

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

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

 

[Renovatio]

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

можно подробнее о дыре? Как исправить?

 

[Renovatio]

@MaHarder, объясните чайнику плиз, "root доступ к SSH сервера" - это какой-то особый доступ? Я просто вчера пробовал сделать подобное, но уже на 1-й команде "apt-get update && apt-get install jpegoptim optipng", получил ошибку, типа нет какого-то файла в такой-то папке, etc по-мойму.

 

[Romantv]

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

 

[MaHarder]

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

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

 

[Renovatio]

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

Установил, но по Page Speed показатели только ухудшились! Но я только попробовал для постеров на Главной странице.

 

[Romantv]

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

 

[djusel]

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

 

[djusel]

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

 

[Romantv]

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

 

[Romantv]

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